:root {
  --blue: #1769e0;
  --blue-strong: #0f56c3;
  --blue-soft: #eaf2ff;
  --navy: #16243d;
  --text: #26344d;
  --muted: #70809a;
  --line: #dfe6ef;
  --canvas: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f8faff;
  --green: #17945d;
  --green-soft: #e8f7ef;
  --amber: #e99419;
  --amber-soft: #fff5dd;
  --red: #dc4b4b;
  --red-strong: #b42318;
  --red-soft: #fff0f0;
  --shadow: 0 8px 28px rgba(24, 48, 84, .08);
  --sidebar: 224px;
  --radius: 14px;
  --touch: 48px;
}

* { box-sizing: border-box; }
html { background: var(--canvas); color: var(--text); font-family: "Microsoft JhengHei UI", "PingFang TC", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(23, 105, 224, .25); outline-offset: 2px; }
button:disabled { opacity: .55; cursor: wait; }
input[type="hidden"] { display: none; }

.app-frame { min-height: 100vh; }
.mobile-topbar { display: none; }
.desktop-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 30; padding: 24px 16px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.desktop-brand, .mobile-brand, .login-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--navy); }
.desktop-brand { padding: 0 8px 24px; border-bottom: 1px solid var(--line); }
.desktop-brand > span:last-child, .login-brand > span:last-child { display: grid; gap: 2px; }
.desktop-brand strong, .login-brand strong { font-size: 15px; letter-spacing: .01em; }
.desktop-brand small, .login-brand small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.logo-mark { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 900; }
.side-nav { display: grid; gap: 5px; padding-top: 22px; }
.side-nav a { min-height: 46px; padding: 0 12px; display: flex; align-items: center; gap: 12px; border-radius: 10px; text-decoration: none; color: #63728a; font-size: 14px; font-weight: 700; }
.side-nav a > span { width: 20px; color: #8290a4; font-size: 18px; text-align: center; }
.side-nav a:hover, .side-nav a.active { background: var(--blue-soft); color: var(--blue); }
.side-nav a.active > span { color: var(--blue); }
.sidebar-user { margin-top: auto; padding: 15px 6px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-weight: 800; }
.sidebar-user > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.sidebar-user strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.sidebar-user small { color: var(--muted); font-size: 10px; }
.sidebar-user form { margin: 0; }
.sidebar-user button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }

.page-shell { margin-left: var(--sidebar); min-height: 100vh; padding: 30px 32px 56px; }
.dashboard-shell { max-width: 1700px; }
.form-shell, .detail-shell, .admin-shell { max-width: 1180px; }
.eyebrow { margin: 0 0 5px; color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.dashboard-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.dashboard-header h1, .form-page-header h1 { margin: 0; color: var(--navy); font-size: 28px; line-height: 1.2; letter-spacing: -.035em; }
.header-subtitle, .form-page-header p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.primary-button, .secondary-button, .success-button { min-height: var(--touch); border: 0; border-radius: 10px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; font-weight: 800; cursor: pointer; }
.primary-button { background: var(--blue); color: #fff; box-shadow: 0 5px 14px rgba(23,105,224,.18); }
.primary-button:hover { background: var(--blue-strong); }
.secondary-button { background: var(--blue-soft); color: var(--blue); }
.success-button { background: var(--green); color: #fff; }
.full { width: 100%; }

.scope-toolbar { display: grid; grid-template-columns: minmax(210px, 280px) minmax(210px, 280px) max-content; align-items: end; justify-content: start; gap: 12px; margin-bottom: 18px; }
label { display: grid; gap: 7px; color: #5d6b81; font-size: 12px; font-weight: 800; }
input, select, textarea { width: 100%; min-height: var(--touch); border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); padding: 10px 12px; }
input::placeholder, textarea::placeholder { color: #9aa7b9; }
textarea { resize: vertical; line-height: 1.55; }
.filter-submit { min-height: var(--touch); padding: 0 18px; justify-self: start; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--blue); font-weight: 800; cursor: pointer; }

.view-tabs { max-width: 620px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 16px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.view-tabs a { min-height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 800; }
.view-tabs a strong { min-width: 23px; padding: 3px 6px; border-radius: 10px; background: #eef1f6; color: #69778c; font-size: 10px; text-align: center; }
.view-tabs a.active { background: var(--blue); color: #fff; }
.view-tabs a.active strong { background: rgba(255,255,255,.2); color: #fff; }

.reminder-summary { display: grid; grid-template-columns: 130px 130px 130px minmax(240px, 1fr); margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.reminder-summary > div { min-height: 74px; padding: 13px 16px; border-right: 1px solid var(--line); }
.reminder-summary > div:last-child { border-right: 0; }
.reminder-summary small { display: block; color: var(--muted); font-size: 11px; }
.reminder-summary strong { display: block; margin-top: 5px; color: var(--navy); font-size: 22px; }
.reminder-summary .attention strong { color: var(--red); }
.reminder-summary .summary-latest p { margin: 6px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

.alert { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; display: flex; gap: 6px 10px; flex-wrap: wrap; font-size: 12px; line-height: 1.5; }
.alert.warning { background: var(--amber-soft); color: #86570d; }
.alert.error { background: var(--red-soft); color: #a92d2d; }
.alert.success { background: var(--green-soft); color: #0a7245; }
.filter-panel { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.filter-panel > summary { min-height: 44px; padding: 0 14px; list-style: none; display: flex; align-items: center; justify-content: space-between; color: #62718a; font-size: 12px; font-weight: 800; cursor: pointer; }
.filter-panel > summary::-webkit-details-marker { display: none; }
.filter-grid { padding: 2px 14px 14px; display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 12px; align-items: end; }
.mine-toggle { min-height: var(--touch); padding: 0 12px; display: flex; flex-direction: row; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.mine-toggle input { width: 20px; min-height: 20px; accent-color: var(--blue); }
.filter-actions { display: flex; align-items: center; gap: 12px; }
.filter-actions a { color: var(--muted); font-size: 12px; }

.work-area { display: grid; grid-template-columns: minmax(600px, 1fr) 356px; gap: 16px; align-items: start; }
.work-area.without-panel { grid-template-columns: 1fr; }
.list-pane, .detail-panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 3px 16px rgba(20,42,76,.04); overflow: hidden; }
.section-title { min-height: 60px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.section-title > div { display: flex; align-items: baseline; gap: 8px; }
.section-title h2 { margin: 0; color: var(--navy); font-size: 15px; }
.section-title span { color: var(--muted); font-size: 11px; }
.mine-link { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 800; }
.mine-link.active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.desktop-table-wrap { overflow-x: auto; }
.report-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.report-table th { height: 40px; padding: 0 12px; background: #f8faff; color: #8290a4; font-size: 10px; text-align: left; white-space: nowrap; }
.report-table th:nth-child(1) { width: 82px; }.report-table th:nth-child(2) { width: 110px; }.report-table th:nth-child(3) { width: 23%; }.report-table th:nth-child(4) { width: 90px; }.report-table th:nth-child(5) { width: 28%; }.report-table th:nth-child(6) { width: 96px; }
.report-table td { height: 68px; padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.report-table tbody tr { cursor: pointer; transition: background .15s; }
.report-table tbody tr:hover, .report-table tbody tr.selected { background: #f2f7ff; }
.report-table td > strong, .report-table td > small, .report-table td > time { display: block; }
.report-table td > small, .stale-text { margin-top: 3px; color: var(--muted); font-size: 10px; }
.report-table td > a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--navy); text-decoration: none; font-weight: 800; line-height: 1.45; }
.latest-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #536178; }
.table-status { display: inline-flex; padding: 5px 7px; border-radius: 7px; background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 900; white-space: nowrap; }
.table-status.completed { background: var(--green-soft); color: var(--green); }
.table-status.warning { background: var(--amber-soft); color: #a4660b; }
.table-status.danger { background: var(--red-soft); color: var(--red); }

.detail-panel { position: sticky; top: 24px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.detail-panel > header { min-height: 50px; padding: 0 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.detail-panel > header a { color: var(--blue); text-decoration: none; }
.panel-location { color: var(--muted); font-size: 11px; font-weight: 800; }.panel-location span { color: var(--blue); }
.panel-title { padding: 18px 16px; display: flex; align-items: flex-start; gap: 11px; }
.panel-title p { margin: 0 0 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.panel-title h2 { margin: 0; color: var(--navy); font-size: 17px; line-height: 1.4; }
.status-icon { flex: 0 0 auto; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--amber-soft); color: var(--amber); font-size: 12px; font-weight: 900; }
.status-icon.completed { background: var(--green-soft); color: var(--green); }
.panel-meta { margin: 0 16px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 9px; }
.panel-meta div { padding: 10px; }.panel-meta div + div { border-left: 1px solid var(--line); }
.panel-meta dt { color: var(--muted); font-size: 9px; }.panel-meta dd { margin: 4px 0 0; font-size: 11px; font-weight: 800; }
.panel-timeline { min-height: 0; padding: 18px 16px; overflow-y: auto; }
.panel-timeline h3 { margin: 0 0 14px; color: var(--navy); font-size: 13px; }
.mini-timeline { margin: 0; padding: 0; list-style: none; }
.mini-timeline li { position: relative; padding: 0 0 18px 19px; }
.mini-timeline li::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: -3px; width: 1px; background: var(--line); }
.mini-timeline li:last-child::before { display: none; }
.mini-timeline li > span { position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border: 2px solid var(--blue); border-radius: 50%; background: #fff; }
.mini-timeline li.completed > span { border-color: var(--green); background: var(--green); }
.mini-timeline strong { font-size: 10px; }.mini-timeline time { float: right; color: var(--muted); font-size: 9px; }.mini-timeline p { margin: 5px 0 0; color: #56647a; font-size: 11px; line-height: 1.5; }
.detail-panel > footer { padding: 12px 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-panel > footer .primary-button, .detail-panel > footer .secondary-button, .detail-panel > footer .success-button { min-height: 42px; font-size: 12px; }

.mobile-card-list, .mobile-add-button { display: none; }
.empty-state { min-height: 280px; padding: 32px; display: grid; place-items: center; align-content: center; text-align: center; }
.empty-state > span { color: #adbacb; font-size: 36px; }.empty-state h2 { margin: 8px 0; color: var(--navy); font-size: 17px; }.empty-state p { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.empty-state.compact { min-height: 180px; }

.form-page-header { margin-bottom: 22px; display: flex; align-items: center; gap: 13px; }
.back-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--navy); text-decoration: none; font-size: 20px; }
.report-form { max-width: 760px; padding: 24px; display: grid; gap: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.stack-form { display: grid; gap: 13px; }
.kind-picker, .small-segmented, .state-picker { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.kind-picker { grid-template-columns: 1fr 1fr; }
.kind-picker legend, .small-segmented legend, .state-picker legend { margin-bottom: 8px; color: #5d6b81; font-size: 12px; font-weight: 800; }
.kind-picker label, .small-segmented label, .state-picker label { cursor: pointer; }
.kind-picker input[type="radio"], .small-segmented input[type="radio"], .state-picker input[type="radio"] { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.kind-picker label span { min-height: 78px; padding: 14px; display: grid; align-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.kind-picker b { color: var(--navy); font-size: 14px; }.kind-picker small { color: var(--muted); font-size: 11px; }
.kind-picker input:checked + span, .small-segmented input:checked + span, .state-picker input:checked + span { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.kind-picker input:focus-visible + span, .small-segmented input:focus-visible + span, .state-picker input:focus-visible + span { outline: 3px solid rgba(23, 105, 224, .25); outline-offset: 2px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photo-uploader { min-height: 100px; padding: 16px; position: relative; place-items: center; align-content: center; gap: 3px; border: 1px dashed #abc0dc; border-radius: 11px; background: #f7faff; color: var(--blue); cursor: pointer; }
.photo-uploader input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-uploader small { color: var(--muted); font-weight: 500; }.camera-icon { font-size: 22px; }
.sticky-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.sticky-form-actions > a { color: var(--muted); font-size: 13px; font-weight: 800; }

.detail-shell { padding-bottom: 96px; }
.detail-page-header { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.detail-page-header p { margin: 0 0 2px; color: var(--blue); font-size: 11px; font-weight: 800; }.detail-page-header h1 { margin: 0; color: var(--navy); font-size: 20px; }
.toast-inline { margin-bottom: 14px; padding: 11px 14px; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 800; }
.detail-summary { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.detail-status-row { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.status-badge { padding: 6px 9px; border-radius: 7px; background: var(--amber-soft); color: #9a630e; font-weight: 900; }.status-badge.completed { background: var(--green-soft); color: var(--green); }
.detail-summary h2 { margin: 14px 0 8px; color: var(--navy); font-size: 24px; line-height: 1.35; }.detail-summary > p { margin: 0; color: #56647a; line-height: 1.65; }
.detail-summary dl { margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 10px; }
.detail-summary dl div { padding: 12px; }.detail-summary dl div + div { border-left: 1px solid var(--line); }.detail-summary dt { color: var(--muted); font-size: 10px; }.detail-summary dd { margin: 4px 0 0; font-size: 12px; font-weight: 800; }
.photo-link { display: inline-block; margin: 14px 8px 0 0; }.photo-link img { display: block; width: min(100%, 260px); max-height: 260px; object-fit: cover; border-radius: 10px; }
.timeline-section { margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }.section-heading h2 { margin: 0; color: var(--navy); font-size: 17px; }.section-heading > span { color: var(--muted); font-size: 11px; }
.timeline { margin: 22px 0 0; padding: 0; list-style: none; }
.timeline li { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 11px; padding-bottom: 24px; }.timeline li:last-child { padding-bottom: 0; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 0; width: 1px; background: var(--line); }
.timeline-mark { position: relative; z-index: 1; margin-top: 4px; width: 11px; height: 11px; border: 2px solid var(--blue); border-radius: 50%; background: #fff; }.timeline li.completed .timeline-mark { border-color: var(--green); background: var(--green); }.timeline li.comment .timeline-mark { border-color: #8a98aa; }
.timeline-content { padding: 0 0 0 2px; }.timeline-meta { display: flex; justify-content: space-between; gap: 12px; }.timeline-meta strong { color: var(--navy); font-size: 12px; }.timeline-meta time { color: var(--muted); font-size: 10px; }.timeline-content p { margin: 6px 0 0; color: #526077; font-size: 13px; line-height: 1.55; }
.completion-result { margin-top: 18px; padding: 20px; border: 1px solid #c8ead9; border-radius: var(--radius); background: var(--green-soft); }.completion-result > div { display: flex; gap: 12px; }.completion-result h2 { margin: 3px 0 6px; color: #145b3e; font-size: 17px; }.completion-result p { margin: 0; color: #47715f; font-size: 11px; }.completion-result details { margin-top: 16px; }.completion-result summary { cursor: pointer; color: #26684f; font-size: 12px; font-weight: 800; }.completion-result form { margin-top: 10px; }
.detail-action-bar { position: fixed; left: calc(var(--sidebar) + 32px); bottom: 18px; z-index: 20; display: flex; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); backdrop-filter: blur(12px); }

.action-dialog { width: min(94vw, 520px); max-height: 90vh; padding: 0; border: 0; border-radius: 16px; color: var(--text); box-shadow: 0 24px 80px rgba(18,35,62,.28); }.action-dialog::backdrop { background: rgba(18,31,53,.48); backdrop-filter: blur(2px); }
.dialog-form { padding: 22px; display: grid; gap: 17px; }.dialog-form > header { display: flex; justify-content: space-between; align-items: start; }.dialog-form h2 { margin: 0; color: var(--navy); font-size: 22px; }.dialog-form header button { width: 40px; height: 40px; border: 0; border-radius: 9px; background: #f0f3f8; color: var(--muted); font-size: 22px; cursor: pointer; }
.small-segmented { grid-template-columns: 1fr 1fr; }.state-picker { grid-template-columns: repeat(3, 1fr); }.small-segmented label span, .state-picker label span { min-height: 44px; padding: 0 8px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 11px; font-weight: 800; }
.dialog-note { margin: 0; padding: 11px 12px; border-radius: 9px; background: var(--green-soft); color: #357159; font-size: 12px; line-height: 1.5; }.dialog-form footer { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.dialog-cancel { min-height: var(--touch); border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted); font-weight: 800; cursor: pointer; }

.admin-jump-nav { margin: -6px 0 16px; display: flex; gap: 6px; }.admin-jump-nav a { min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 900; }.admin-jump-nav a:hover, .admin-jump-nav a.active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.admin-create-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; align-items: start; }.admin-create-card, .project-admin-card, .settings-section, .account-section { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.admin-create-card summary { min-height: 50px; padding: 0 16px; display: flex; align-items: center; list-style: none; color: var(--blue); font-size: 13px; font-weight: 900; cursor: pointer; }.admin-create-card summary::-webkit-details-marker { display: none; }.admin-create-card form { padding: 0 16px 16px; }.admin-create-card label small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.45; }.account-create-card { box-shadow: 0 0 0 2px rgba(23,105,224,.08); }
.account-section { margin-bottom: 24px; padding: 18px; }.account-list { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }.account-list > div { min-height: 58px; padding: 9px 12px; display: grid; grid-template-columns: 34px minmax(150px,1fr) 76px 58px; align-items: center; gap: 10px; border-top: 1px solid var(--line); }.account-list > div:first-child { border-top: 0; }.account-list > div > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }.account-list strong { color: var(--navy); font-size: 12px; }.account-list small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.account-role, .account-state { font-size: 10px; font-weight: 800; }.account-role { color: var(--muted); }.account-role.admin { color: var(--blue); }.account-state { color: var(--green); }.account-help { margin: 11px 0 0; color: var(--muted); font-size: 10px; }
.project-section { margin-top: 6px; }.project-card-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.project-admin-card { padding: 18px; }.project-admin-card.disabled { opacity: .68; }.project-admin-card > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.project-admin-card h3 { margin: 5px 0 0; color: var(--navy); font-size: 17px; }.project-code { color: var(--blue); font-size: 11px; font-weight: 900; }.active-badge { padding: 5px 8px; border-radius: 7px; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 900; }.disabled .active-badge { background: #eef1f5; color: var(--muted); }
.inline-editor, .member-access { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }.inline-editor summary, .member-access summary { color: var(--blue); font-size: 11px; font-weight: 800; cursor: pointer; }.inline-editor form, .member-access .member-grid { margin-top: 10px; }.inline-editor button { align-self: end; }
.line-list { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }.line-row { min-height: 54px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); }.line-row:first-child { border-top: 0; }.line-row > span, .line-row summary > span:first-child { display: grid; gap: 2px; }.line-row small { color: var(--muted); font-size: 9px; }.line-row b { color: var(--navy); font-size: 12px; }.line-row details { flex: 1; }.line-row summary { min-height: 38px; display: flex; align-items: center; justify-content: space-between; list-style: none; color: var(--blue); font-size: 10px; cursor: pointer; }.line-row details > form { display: flex; gap: 6px; padding: 6px 0; }.line-row details input { min-height: 40px; }.line-row details button { min-height: 40px; white-space: nowrap; }.locked { color: var(--muted); font-size: 10px; }.quiet-button { min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: #eef2f7; color: #64738a; font-size: 10px; font-weight: 800; cursor: pointer; }.project-toggle { margin-top: 12px; text-align: right; }
.line-danger-zone { margin: 4px 0 2px; padding: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 8px; background: var(--red-soft); }.line-danger-zone form { flex: 0 0 auto; margin: 0; padding: 0; }.line-danger-zone small { line-height: 1.45; }.danger-button { min-height: 40px; padding: 0 11px; border: 1px solid rgba(180,35,24,.35); border-radius: 8px; background: #fff; color: var(--red-strong); font-size: 12px; font-weight: 900; white-space: nowrap; cursor: pointer; }.danger-button:hover { border-color: var(--red-strong); background: var(--red-strong); color: #fff; }
.member-grid { display: flex; flex-wrap: wrap; gap: 6px; }.member-grid form { margin: 0; }.member-chip { min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: #eef2f7; color: var(--muted); font-size: 10px; font-weight: 800; cursor: pointer; }.member-chip.on { background: var(--blue-soft); color: var(--blue); }
.settings-section { margin-top: 24px; padding: 18px; }.settings-section .alert { margin-top: 14px; }.run-list > div { display: grid; grid-template-columns: 100px 90px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 11px; }.run-list small { color: var(--muted); }

.login-shell { margin: 0; min-height: 100vh; padding: 24px; display: grid; place-items: center; background: radial-gradient(circle at 20% 10%, #e9f2ff 0, transparent 34%), var(--canvas); }.login-card { width: min(100%, 400px); padding: 34px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }.login-brand { margin-bottom: 28px; }.login-card h1 { margin: 4px 0 8px; color: var(--navy); font-size: 30px; }.login-card > p:not(.eyebrow) { margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.6; }.login-card .primary-button { width: 100%; }.login-note { display: block; margin-top: 18px; color: var(--muted); text-align: center; font-size: 10px; }
.mobile-only { display: none; }

@media (max-width: 1180px) and (min-width: 761px) {
  :root { --sidebar: 196px; }
  .page-shell { padding: 24px 20px 48px; }
  .work-area { grid-template-columns: minmax(520px, 1fr) 320px; }
  .report-table th:nth-child(5), .report-table td:nth-child(5) { display: none; }
}

@media (max-width: 760px) {
  body { padding-bottom: 86px; background: var(--canvas); }
  .desktop-sidebar, .desktop-only, .desktop-table-wrap { display: none !important; }
  .mobile-only { display: initial; }
  .mobile-topbar { height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--line); }
  .mobile-brand { font-size: 15px; font-weight: 900; }.mobile-brand .logo-mark { width: 30px; height: 30px; border-radius: 9px; }
  .mobile-user { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 700; }.mobile-user a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: #f2f5fa; text-decoration: none; }
  .page-shell { margin: 0; min-height: calc(100vh - 56px); padding: 18px 14px 30px; }
  .dashboard-header { margin-bottom: 14px; }.dashboard-header h1 { font-size: 22px; }.dashboard-header .eyebrow, .header-subtitle { display: none; }
  .scope-toolbar { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }.scope-toolbar label > span { display: none; }.scope-toolbar select { min-height: 44px; padding: 8px 9px; font-size: 12px; }.filter-submit { width: 100%; min-height: 48px; grid-column: 1 / -1; justify-self: stretch; }
  .view-tabs { max-width: none; margin-bottom: 12px; }.view-tabs a { min-height: 42px; padding: 0 5px; gap: 4px; font-size: 11px; }.view-tabs a strong { min-width: 20px; padding: 2px 5px; }
  .alert { font-size: 11px; }
  .filter-panel { margin-bottom: 12px; }.filter-grid { grid-template-columns: 1fr; }.filter-actions .secondary-button { flex: 1; }
  .work-area, .work-area.without-panel { display: block; }.list-pane { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .mobile-card-list { display: grid; gap: 10px; }
  .issue-card { border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 13px; background: #fff; box-shadow: 0 3px 12px rgba(31,57,94,.05); overflow: hidden; }.issue-card.warning { border-left-color: var(--amber); }.issue-card.danger { border-left-color: var(--red); }.issue-card:has(.status-icon.completed) { border-left-color: var(--green); }
  .card-main { padding: 14px 14px 12px; display: block; text-decoration: none; }.card-topline { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; }.card-topline .status-icon { width: 22px; height: 22px; }.location { color: var(--blue); font-size: 10px; font-weight: 900; }.status-text { color: var(--muted); font-size: 10px; font-weight: 800; }
  .issue-card h2 { margin: 10px 0; color: var(--navy); font-size: 16px; line-height: 1.4; }.latest-preview { padding: 9px 10px; border-radius: 8px; background: var(--surface-soft); }.latest-preview small { color: var(--muted); font-size: 9px; font-weight: 800; }.latest-preview p, .completion-preview { margin: 3px 0 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #536177; font-size: 12px; line-height: 1.45; }.completion-preview { margin: 0; }
  .card-info { margin-top: 11px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; }.card-info strong { color: var(--text); }.danger .card-info time { color: var(--red); font-weight: 900; }.warning .card-info time { color: #a4660b; font-weight: 900; }
  .card-actions { min-height: 48px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }.card-actions.single { grid-template-columns: 1fr; }.card-actions a { display: grid; place-items: center; color: var(--blue); text-decoration: none; font-size: 12px; font-weight: 900; }.card-actions a + a { border-left: 1px solid var(--line); }.card-actions a.complete { color: var(--green); }
  .mobile-add-button { position: fixed; z-index: 25; left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 14px; background: var(--blue); color: #fff; box-shadow: 0 10px 28px rgba(23,105,224,.3); text-decoration: none; font-size: 15px; font-weight: 900; }.mobile-add-button span { font-size: 22px; }
  .empty-state { min-height: 250px; }

  .form-page-header { margin-bottom: 16px; }.form-page-header h1 { font-size: 21px; }.form-page-header p:not(.eyebrow) { font-size: 11px; }
  .report-form { padding: 0; gap: 16px; border: 0; background: transparent; box-shadow: none; }.kind-picker { grid-template-columns: 1fr 1fr; }.kind-picker label span { min-height: 74px; padding: 10px; }.kind-picker b { font-size: 12px; }.kind-picker small { font-size: 9px; }.field-grid { gap: 8px; }.field-grid label { font-size: 11px; }.photo-uploader { background: #fff; }
  .with-sticky-submit { padding-bottom: 76px; }.sticky-form-actions { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 86px 1fr; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }.sticky-form-actions > a { min-height: var(--touch); display: grid; place-items: center; text-decoration: none; }

  .detail-shell { padding-bottom: 96px; }.detail-page-header { margin-bottom: 12px; }.detail-summary { padding: 16px; }.detail-summary h2 { font-size: 20px; }.detail-summary > p { font-size: 13px; }.detail-summary dl { grid-template-columns: 1fr 1fr; }.detail-summary dl div { padding: 10px; }.detail-summary dl div:nth-child(3) { grid-column: 1/-1; border-top: 1px solid var(--line); border-left: 0; }
  .timeline-section { margin-top: 12px; padding: 16px; }.timeline-meta { display: grid; gap: 3px; }.timeline-content p { font-size: 12px; }.completion-result { padding: 16px; }
  .detail-action-bar { left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: 0 -5px 20px rgba(20,42,76,.07); }.detail-action-bar > :only-child { grid-column: 1/-1; }
  .action-dialog { width: 100%; max-width: none; max-height: 92vh; margin: auto 0 0; border-radius: 18px 18px 0 0; }.dialog-form { padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); }.state-picker { grid-template-columns: repeat(3, 1fr); }.small-segmented label span, .state-picker label span { font-size: 10px; }

  .admin-jump-nav { overflow-x: auto; }.admin-jump-nav a { flex: 0 0 auto; }.admin-create-grid, .project-card-grid { grid-template-columns: 1fr; }.admin-create-card:not([open]) { display: block; }.account-section, .project-admin-card { padding: 15px; }.account-list > div { grid-template-columns: 34px 1fr auto; }.account-state { grid-column: 2; }.inline-editor .field-grid { grid-template-columns: 1fr; }.line-row:not(.project-common) { align-items: stretch; flex-wrap: wrap; }.line-row:not(.project-common) > details, .line-row:not(.project-common) > form { flex: 1 1 100%; width: 100%; }.line-row summary { min-height: var(--touch); }.line-row details > form { flex-direction: column; gap: 8px; padding: 8px 0; }.line-row details button, .line-row > form button { width: 100%; min-height: var(--touch); white-space: nowrap; }.line-danger-zone { margin-top: 8px; align-items: stretch; flex-direction: column; }.line-danger-zone form, .line-danger-zone .danger-button { width: 100%; }.line-danger-zone .danger-button { min-height: var(--touch); }.line-danger-zone small { color: #914040; font-size: 11px; }.settings-section { padding: 15px; }.run-list > div { grid-template-columns: 80px 70px 1fr; }
  .login-shell { padding: 16px; }.login-card { padding: 25px 20px; }.login-card h1 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }