:root { --ink:#223b35; --muted:#5c6d61; --line:#e6ebe7; --bg:#f5f7f4; --paper:#fff; --green:#337b64; --dark:#152d2b; --lime:#d3f18c; --purple:#a49dd6; --shadow:0 4px 24px #18362b04; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; font-size:14px; line-height:1.5; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #74ad92; outline-offset:3px; }
button:disabled { cursor:default; opacity:.55; }
h1,h2,h3,p { margin:0; }
h1 { font-size:30px; line-height:1.2; letter-spacing:-1.1px; font-weight:650; }
h2 { font-size:17px; font-weight:650; letter-spacing:-.3px; }
h3 { font-size:15px; font-weight:600; }
svg { width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.eyebrow { font-size:11px; font-weight:650; letter-spacing:1.6px; text-transform:uppercase; }
.skip-link { position:fixed; left:20px; top:-80px; z-index:100; background:var(--dark); color:white; padding:12px 18px; }
.skip-link:focus { top:12px; }
.sidebar { width:234px; position:fixed; inset:0 auto 0 0; background:var(--dark); color:#b4c5be; display:flex; flex-direction:column; padding:31px 19px 19px; z-index:20; }
.brand { display:flex; align-items:center; gap:11px; padding:0 12px; color:white; }
.brand-mark { width:35px; height:35px; display:grid; place-items:center; background:var(--lime); color:var(--dark); border-radius:11px; }
.brand-mark svg { width:23px; height:23px; }
.brand-name { font-size:21px; font-weight:650; line-height:1.1; letter-spacing:-.7px; }
.brand-name small { display:block; font-size:10px; font-weight:450; letter-spacing:1.8px; text-transform:uppercase; color:#b4c5be; margin-top:5px; }
.workspace { margin:35px 12px 21px; display:flex; align-items:center; gap:10px; color:#eff5ed; font-size:12px; }
.workspace .workspace-square { display:grid; place-items:center; width:29px; height:29px; border:1px solid #47605a; border-radius:7px; font-size:10px; }
.sidebar .nav-label { margin:0 12px 12px; color:#7e9690; font-size:10px; letter-spacing:1.7px; text-transform:uppercase; }
.nav { display:grid; gap:6px; }
.nav a { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:8px; font-size:13px; transition:background .15s,color .15s; }
.nav a:hover { background:#ffffff08; color:white; }
.nav a.active { color:var(--lime); background:#29403a; }
.nav a svg { width:18px; height:18px; }
.nav-count { font-size:10px; margin-left:auto; background:#ffffff10; padding:1px 6px; border-radius:4px; }
.sidebar-bottom { margin-top:auto; }
.sidebar-note { margin:24px 4px 17px; padding:17px 15px; background:#223b35; border:1px solid #344b42; border-radius:11px; }
.sidebar-note svg { color:var(--lime); margin-bottom:10px; }
.sidebar-note strong { color:#f2f7ed; display:block; font-size:12px; font-weight:500; margin-bottom:5px; }
.sidebar-note p { font-size:11px; line-height:1.65; color:#a6bbb2; }
.sidebar-user { display:flex; gap:10px; align-items:center; border-top:1px solid #344740; padding:17px 10px 0; }
.avatar { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#e9eddf; color:#5b6550; font-size:10px; font-weight:600; flex-shrink:0; }
.avatar.lavender { background:#ece9f5; color:#71628e; }
.avatar.blue { background:#e2edf0; color:#46707b; }
.sidebar-user .avatar { background:#465d4d; color:#e3edda; }
.sidebar-user > div { min-width:0; }
.sidebar-user p { font-size:12px; color:#eef4e9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-user small { color:#94aca1; font-size:10px; }
.app-main { margin-left:234px; min-height:100vh; padding:0 35px 35px; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); margin-bottom:29px; }
.breadcrumb { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:12px; }
.breadcrumb svg { width:13px; height:13px; color:#626c65; }
.breadcrumb strong { font-weight:500; color:var(--ink); }
.topbar-right { display:flex; align-items:center; gap:15px; }
.demo-label { font-size:11px; color:#676d60; border:1px solid #dce3d6; background:#eff3e9; padding:4px 9px; border-radius:5px; display:flex; align-items:center; gap:6px; }
.demo-label::before { content:''; width:5px; height:5px; background:#83a366; border-radius:50%; }
.page { max-width:1430px; margin:0 auto; animation:appear .2s ease-out; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:25px; }
.page-heading p { color:var(--muted); margin-top:8px; font-size:13px; }
.button { border:1px solid transparent; border-radius:7px; padding:9px 14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--dark); color:#fff; font-size:12px; font-weight:500; min-height:37px; transition:background .15s; white-space:nowrap; }
.button:hover { background:#2c4d43; }
.button svg { width:16px; height:16px; }
.button.secondary { background:white; color:var(--ink); border-color:#dce5dd; }
.button.secondary:hover { background:#f3f6f1; }
.button.subtle { color:var(--green); background:#edf4ed; }
.button.subtle:hover { background:#e1ebdf; }
.text-button { border:0; background:transparent; color:var(--green); font-size:12px; padding:6px 0; display:inline-flex; align-items:center; gap:6px; }
.text-button svg { width:14px; height:14px; }
.welcome { padding:14px 22px; border-radius:12px; background:#eaf0e4; border:1px solid #e1e8d7; margin-bottom:20px; }
.welcome .eyebrow { color:#587150; font-size:10px; letter-spacing:1.2px; margin-bottom:5px; }
.welcome h2 { font-size:20px; letter-spacing:-.45px; line-height:1.3; font-weight:550; }
.welcome p { color:#5e6d5a; font-size:12px; margin-top:4px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:23px; }
.metric { border:1px solid var(--line); background:var(--paper); border-radius:10px; padding:19px 20px 17px; box-shadow:var(--shadow); }
.metric-label { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#606c64; font-size:12px; }
.metric-label svg { width:17px; height:17px; color:#5f6d61; }
.metric-value { font-size:31px; font-weight:600; line-height:1.2; letter-spacing:-1.3px; margin:13px 0 8px; display:flex; align-items:baseline; gap:5px; }
.metric-value span { font-size:13px; font-weight:450; letter-spacing:0; color:#606c5f; }
.metric-foot { font-size:10px; color:var(--muted); }
.metric:nth-child(3) { background:#f0f4ea; border-color:#e0e8d6; }
.metric-foot strong { color:var(--green); font-weight:500; }
.analytics { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px; margin-bottom:23px; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:22px; box-shadow:var(--shadow); min-width:0; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:19px; }
.card-head h2 { font-size:14px; }
.card-head p { color:var(--muted); font-size:11px; margin-top:4px; }
.tag { font-size:10px; background:#f5f7f2; border:1px solid #e8ede3; padding:3px 7px; border-radius:4px; color:#616c5c; white-space:nowrap; }
.legend { display:flex; align-items:center; gap:14px; font-size:10px; color:var(--muted); }
.legend span { display:flex; align-items:center; gap:5px; }
.dot { width:7px; height:7px; display:inline-block; border-radius:50%; flex-shrink:0; }
.dot.green { background:#4b947f; }
.dot.purple { background:#bbb4df; }
.bar-chart { margin-top:23px; display:grid; gap:16px; }
.bar-row { display:grid; grid-template-columns:93px minmax(0,1fr) 44px; gap:12px; align-items:center; font-size:10px; color:#606c60; }
.bar-label { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bar-track { background:#f4f5f1; height:19px; border-radius:4px; position:relative; }
.bar-target { height:19px; background:#d8d3eb; border-radius:4px; position:absolute; top:0; left:0; min-width:0; }
.bar-real { height:19px; background:#5a9d85; border-radius:4px; position:absolute; top:0; left:0; }
.bar-number { font-size:10px; text-align:right; color:#52634f; }
.chart-foot { font-size:10px; color:#636e60; margin-top:16px; padding-top:11px; border-top:1px solid #f0f3ec; }
.stage-chart { display:flex; gap:28px; align-items:center; justify-content:center; min-height:204px; }
.donut { width:145px; height:145px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; position:relative; }
.donut:after { content:''; width:113px; height:113px; border-radius:50%; background:white; position:absolute; }
.donut-label { position:relative; z-index:1; text-align:center; }
.donut-label strong { display:block; font-size:33px; letter-spacing:-1px; font-weight:600; }
.donut-label small { font-size:10px; color:var(--muted); }
.stage-legend { display:grid; gap:13px; min-width:130px; }
.stage-legend-row { display:flex; gap:7px; align-items:center; font-size:11px; color:#616d63; }
.stage-legend-row strong { color:var(--ink); font-size:11px; font-weight:500; margin-left:auto; padding-left:12px; }
.table-card { padding:0; overflow:hidden; }
.table-head { padding:20px 22px; margin:0; align-items:center; }
.table-head .muted { margin-top:4px; font-size:11px; }
.table-wrap { overflow-x:auto; position:relative; }
table { width:100%; border-collapse:collapse; text-align:left; }
th { background:#fafbf8; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:11px 16px; color:#626f60; font-size:10px; letter-spacing:.3px; font-weight:500; white-space:nowrap; }
td { padding:16px; border-bottom:1px solid #edf0e9; font-size:12px; vertical-align:middle; }
th:first-child,td:first-child { padding-left:22px; }
th:last-child,td:last-child { padding-right:22px; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#fbfcf8; }
.initiative-cell { display:flex; align-items:center; gap:11px; min-width:190px; }
.initiative-icon { width:35px; height:35px; border-radius:8px; display:grid; place-items:center; background:#edf3e9; color:#57724f; flex-shrink:0; }
.initiative-icon.application { color:#71628c; background:#eeebf6; }
.initiative-icon.ai { color:#486f7b; background:#e9f2f4; }
.initiative-icon svg { width:17px; height:17px; }
.initiative-cell strong { font-weight:500; color:#314636; display:block; font-size:12px; }
.initiative-cell small { color:#666d60; font-size:10px; display:block; margin-top:3px; }
.initiative-link:hover strong { color:var(--green); text-decoration:underline; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; font-size:10px; border-radius:5px; white-space:nowrap; font-weight:450; }
.badge .dot { width:5px; height:5px; }
.badge.diagnostico { color:#606c63; background:#eef2ee; }
.badge.propuesta { color:#726387; background:#f0edf7; }
.badge.desarrollo { color:#4a6f7f; background:#eaf2f5; }
.badge.validacion { color:#7e6532; background:#faf4e6; }
.badge.implementada { color:#44725f; background:#ebf4ec; }
.progress-cell { display:flex; gap:10px; align-items:center; min-width:103px; }
.progress-track { background:#eef1e8; height:5px; border-radius:4px; width:67px; overflow:hidden; }
.progress-track span { display:block; height:100%; background:#80a578; border-radius:4px; }
.progress-cell small { color:#606d5c; font-size:10px; }
.saving-cell strong { font-size:12px; font-weight:550; display:block; color:var(--green); white-space:nowrap; }
.saving-cell small { font-size:9px; color:#626e5c; }
.owner-cell { display:flex; align-items:center; gap:8px; color:#626c5d; font-size:11px; white-space:nowrap; }
.owner-cell .avatar { width:25px; height:25px; font-size:8px; }
.icon-button { display:inline-grid; place-items:center; border:0; background:transparent; color:#626d5d; width:29px; height:29px; border-radius:5px; }
.icon-button:hover { background:#edf3e8; color:var(--green); }
.icon-button svg { width:16px; height:16px; }
.footer-note { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:10px; color:#666c5e; margin-top:20px; }
.footer-note span { display:flex; align-items:center; gap:5px; }
.footer-note svg { width:12px; height:12px; }
.filters { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.search-box { position:relative; flex:1; min-width:190px; }
.search-box svg { position:absolute; left:12px; top:11px; color:#656d5f; width:17px; height:17px; }
.search-box input { width:100%; padding-left:38px; }
input,select,textarea { background:#fff; border:1px solid #dfe6da; border-radius:6px; padding:10px 11px; color:var(--ink); font-size:12px; width:100%; min-height:39px; }
textarea { resize:vertical; line-height:1.6; min-height:85px; }
input::placeholder,textarea::placeholder { color:#656d60; }
.filters select { width:165px; }
.view-toggle { display:flex; border:1px solid #dfe6da; padding:3px; border-radius:7px; background:white; }
.view-toggle button { border:0; color:#626e5e; background:transparent; padding:5px 8px; border-radius:4px; }
.view-toggle button.active { background:#eaf0e4; color:#4f7443; }
.kanban { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; }
.kanban-column { padding:14px 10px; background:#edf1e9; border:1px solid #e5eade; border-radius:9px; min-height:330px; }
.kanban-column h2 { display:flex; align-items:center; gap:6px; font-size:11px; margin:0 3px 17px; }
.kanban-column h2 span:last-child { margin-left:auto; color:#636d5c; }
.kanban-item { display:block; background:white; border:1px solid var(--line); border-radius:8px; padding:13px; margin-bottom:12px; }
.kanban-item:hover { border-color:#8aab7a; }
.kanban-item h3 { font-size:12px; line-height:1.5; margin:8px 0; }
.kanban-item .progress-cell { margin-top:14px; }
.kanban-item .progress-track { flex:1; }
.kanban-item .small { font-size:10px; }
.empty { text-align:center; color:var(--muted); padding:38px 20px; }
.empty svg { width:28px; height:28px; margin-bottom:10px; color:#616e56; }
.empty p { margin-top:6px; font-size:12px; }
.back-link { margin-bottom:17px; display:inline-flex; align-items:center; gap:7px; color:#626e5c; font-size:11px; }
.back-link svg { width:13px; height:13px; }
.detail-heading { margin-bottom:21px; }
.detail-heading h1 { margin-top:9px; }
.detail-meta { display:flex; align-items:center; gap:9px; margin-top:14px; color:#606d5a; font-size:11px; flex-wrap:wrap; }
.detail-meta .divider { color:#676c62; }
.detail-actions { display:flex; gap:9px; }
.detail-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.detail-metrics .metric { padding:18px 20px; }
.detail-metrics .metric:nth-child(3) { background:#f0f4ea; }
.detail-metrics .metric-value { font-size:25px; }
.tabs { display:flex; gap:26px; border-bottom:1px solid #e0e7d8; margin-bottom:23px; overflow-x:auto; white-space:nowrap; }
.tabs a { padding:12px 0; font-size:12px; color:#626c5c; border-bottom:2px solid transparent; }
.tabs a.active { color:var(--green); border-color:var(--green); font-weight:550; }
.tabs a small { background:#edf1e9; border-radius:4px; padding:2px 5px; margin-left:5px; font-size:9px; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 302px; gap:21px; }
.stack { display:grid; align-content:start; gap:20px; }
.description { font-size:13px; line-height:1.8; color:#626f5c; white-space:pre-line; }
.card > h2 { margin-bottom:15px; font-size:14px; }
.solution-card { border-color:#dce6d2; background:#f7faf2; }
.solution-card .eyebrow { color:#59704f; margin-bottom:10px; font-size:9px; }
.solution-card h3 { font-size:16px; margin-bottom:11px; }
.people-list { display:grid; gap:18px; }
.person-row { display:flex; gap:10px; align-items:center; }
.person-row strong { font-size:12px; font-weight:500; display:block; }
.person-row small { color:var(--muted); font-size:10px; }
.next-step { padding:19px; background:#edf2e5; border:1px solid #dce5cc; border-radius:9px; }
.next-step .eyebrow { font-size:9px; color:#5b704e; margin-bottom:9px; }
.next-step p { font-size:13px; line-height:1.6; color:#4d6941; }
.next-step time { display:block; color:#616f56; margin-top:12px; font-size:11px; }
.checklist { display:grid; gap:4px; }
.check-row { display:flex; align-items:center; gap:10px; padding:11px 0; font-size:12px; color:#626e59; }
.check-row input { width:17px; height:17px; min-height:0; accent-color:var(--green); flex-shrink:0; margin:0; }
.check-row.done { color:#5c6f50; }
.check-row.done span { text-decoration:line-through; text-decoration-color:#bed0ac; }
.workflow { display:grid; gap:16px; }
.workflow-step { display:flex; align-items:flex-start; gap:13px; padding-bottom:17px; border-bottom:1px solid #ecf0e5; }
.workflow-step:last-child { border-bottom:0; padding-bottom:0; }
.step-number { border-radius:8px; background:#edf3e6; color:#5a6f4c; font-size:12px; width:30px; height:30px; display:grid; place-items:center; flex-shrink:0; }
.workflow-step h3 { font-size:13px; margin-top:3px; margin-bottom:4px; }
.workflow-step p { color:var(--muted); font-size:12px; }
.baseline-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; padding:19px 0 0; border-top:1px solid var(--line); margin-top:22px; }
.baseline-grid small { display:block; font-size:10px; color:#636d58; margin-bottom:4px; }
.baseline-grid strong { font-size:15px; font-weight:550; }
.time-comparison { display:grid; gap:22px; margin:28px 0; }
.time-line { display:grid; grid-template-columns:100px minmax(0,1fr) 90px; align-items:center; gap:14px; font-size:12px; }
.time-line-track { background:#f0f3ea; border-radius:5px; height:28px; }
.time-line-track span { display:block; height:100%; border-radius:5px; }
.time-line strong { font-size:12px; font-weight:500; text-align:right; }
.measurement-box { background:#f5f8ef; border:1px solid #e5ecd8; border-radius:8px; padding:17px; }
.measurement-box h3 { font-size:12px; margin-bottom:6px; }
.measurement-box p { font-size:12px; color:#5f6d56; line-height:1.7; }
.measurement-box small { display:block; color:#626c58; margin-top:8px; font-size:10px; }
.meeting-card { padding:21px; }
.meeting-date { display:flex; align-items:center; gap:7px; color:#5a6f54; font-size:11px; margin-bottom:8px; }
.meeting-date svg { width:14px; height:14px; }
.meeting-card h3 { font-size:15px; margin-bottom:7px; }
.meeting-card .attendees { font-size:10px; color:#626d57; margin-bottom:13px; }
.meeting-card .description { font-size:12px; }
.agreements { margin-top:17px; padding-top:13px; border-top:1px solid #e9eee1; }
.agreements .eyebrow { color:#616d54; font-size:9px; margin-bottom:6px; }
.agreement-row { display:flex; gap:10px; align-items:flex-start; font-size:12px; color:#5c704b; padding:8px 0; }
.agreement-row input { width:16px; height:16px; min-height:0; accent-color:var(--green); margin-top:3px; }
.agreement-row small { display:block; color:#616d55; font-size:10px; margin-top:4px; }
.agreement-row.completed strong { text-decoration:line-through; color:#636f5a; }
.comment-form { display:grid; gap:12px; }
.comment-form .form-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.comment { display:flex; gap:13px; padding:20px 0; border-top:1px solid var(--line); }
.comment:first-child { border-top:0; padding-top:0; }
.comment > div { min-width:0; }
.comment strong { font-size:12px; font-weight:550; overflow-wrap:anywhere; }
.comment-form strong { overflow-wrap:anywhere; }
.comment time { color:#636c5a; font-size:10px; margin-left:10px; }
.comment p { margin-top:8px; font-size:13px; line-height:1.7; color:#5f6d58; white-space:pre-line; overflow-wrap:anywhere; }
.people-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.person-card .person-row { margin-bottom:20px; }
.person-card .person-row .avatar { width:41px; height:41px; font-size:12px; }
.person-links { display:grid; gap:9px; }
.person-links a { font-size:11px; color:var(--green); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.person-links a svg { width:13px; height:13px; }
.person-card .small { font-size:10px; margin-bottom:11px; }
dialog { border:1px solid #dce6d5; border-radius:14px; padding:0; width:min(620px,calc(100% - 32px)); max-height:90vh; color:var(--ink); box-shadow:0 20px 100px #142f2940; }
dialog::backdrop { background:#122d296b; backdrop-filter:blur(3px); }
.modal-head { padding:22px 26px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.modal-head h2 { font-size:19px; }
.modal-head p { font-size:12px; color:var(--muted); margin-top:5px; }
.modal-body { padding:23px 26px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full { grid-column:1/-1; }
label.field,.login-card .field { display:flex; flex-direction:column; gap:6px; color:#5e6e54; font-size:11px; }
.field-hint { font-size:10px; color:#606e55; line-height:1.6; }
.modal-foot { display:flex; gap:9px; justify-content:flex-end; border-top:1px solid var(--line); padding:16px 26px; background:#fafcf7; }
.form-error { color:#a55345; font-size:12px; margin:12px 0 0; }
.storage-message { font-size:11px; color:#7d6756; padding:9px 15px; background:#fcf5e8; border:1px solid #eee0c4; border-radius:7px; margin-bottom:16px; }
#toast { position:fixed; bottom:23px; left:50%; transform:translate(-50%,20px); opacity:0; background:var(--dark); color:#666c61; font-size:12px; border-radius:8px; padding:12px 19px; box-shadow:0 8px 35px #17322b29; pointer-events:none; z-index:100; transition:opacity .18s,transform .18s; max-width:calc(100% - 32px); text-align:center; }
#toast.show { opacity:1; transform:translate(-50%,0); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes appear { from { opacity:.3; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:1650px) { .app-main { padding-left:50px; padding-right:50px; } }
@media (max-width:1250px) { .sidebar { width:205px; } .app-main { margin-left:205px; padding:0 24px 26px; } .stage-chart { gap:17px; } .donut { width:125px; height:125px; } .donut:after { width:97px; height:97px; } .metrics { gap:11px; } .metric { padding:17px 15px; } .metric-value { font-size:28px; } .kanban { overflow-x:auto; grid-template-columns:repeat(5,minmax(170px,1fr)); padding-bottom:12px; } .detail-grid { grid-template-columns:minmax(0,1fr) 265px; } }
@media (max-width:1000px) { .sidebar { width:76px; padding:29px 10px 18px; align-items:center; } .brand { padding:0; } .brand-name,.workspace,.sidebar .nav-label,.nav a > span,.sidebar-bottom { display:none; } .nav { margin-top:40px; gap:13px; } .nav a { padding:12px; } .nav a svg { width:20px; height:20px; } .app-main { margin-left:76px; } .analytics { grid-template-columns:1.2fr 1fr; gap:15px; } .card { padding:18px; } .table-card { padding:0; } .stage-chart { flex-direction:column; gap:17px; } .stage-legend { width:100%; grid-template-columns:1fr 1fr; gap:10px; } .stage-legend-row { font-size:10px; } .metric-label { font-size:10px; } .people-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .detail-grid { grid-template-columns:minmax(0,1fr) 250px; gap:15px; } }
@media (max-width:720px) { .app-main { padding:0 18px 24px; } .topbar { height:69px; margin-bottom:23px; } h1 { font-size:25px; } .page-heading { align-items:flex-start; gap:13px; margin-bottom:19px; } .page-heading p { font-size:12px; } .welcome { padding:12px 18px; } .welcome h2 { font-size:18px; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .metric-label { font-size:12px; } .metric-value { font-size:29px; } .analytics { grid-template-columns:1fr; } .stage-chart { flex-direction:row; min-height:165px; gap:25px; } .stage-legend { display:grid; grid-template-columns:1fr; width:auto; } .detail-grid { grid-template-columns:1fr; } .detail-heading { flex-direction:column; } .detail-actions { align-self:stretch; } .detail-actions .button { flex:1; } .detail-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .detail-metrics .metric { padding:14px 10px; } .detail-metrics .metric-value { font-size:19px; } .detail-metrics .metric-label { font-size:10px; } .detail-metrics .metric-label svg { display:none; } .detail-metrics .metric-foot { font-size:9px; } .footer-note { align-items:flex-start; } }
@media (max-width:520px) { .sidebar { width:100%; height:65px; inset:0 0 auto; flex-direction:row; padding:13px 16px; justify-content:space-between; border-bottom:1px solid #264138; } .brand-mark { width:31px; height:31px; border-radius:9px; } .nav { display:flex; gap:1px; margin:0; } .nav a { padding:10px; } .nav a svg { width:17px; height:17px; } .app-main { margin-left:0; padding:65px 16px 20px; } .topbar { height:60px; margin-bottom:22px; } .topbar-right .avatar { display:none; } .breadcrumb { font-size:10px; gap:7px; } .demo-label { font-size:9px; padding:3px 6px; } .page-heading h1 { font-size:25px; } .page-heading > .button { font-size:0; width:39px; padding:9px; } .page-heading > .button svg { width:19px; height:19px; } .welcome { padding:12px 16px; } .welcome h2 { font-size:18px; } .welcome .eyebrow { font-size:9px; } .welcome p { font-size:11px; } .metrics { gap:10px; } .metric { padding:16px 14px; } .metric-label { font-size:11px; } .metric-value { font-size:29px; } .metric-foot { font-size:9px; } .bar-row { grid-template-columns:84px minmax(0,1fr) 41px; gap:8px; } .table-head { padding:19px 17px; } th:first-child,td:first-child { padding-left:17px; } td { padding:14px; } .filters { gap:9px; } .filters .search-box { flex-basis:100%; } .filters select { width:calc(50% - 5px); } .filters .view-toggle { margin-left:auto; } .people-grid { grid-template-columns:1fr; } .tabs { gap:21px; } .detail-metrics { grid-template-columns:1fr; } .detail-metrics .metric { padding:15px 19px; display:grid; grid-template-columns:1fr auto; align-items:center; } .detail-metrics .metric-value { font-size:23px; margin:0; grid-row:1/3; grid-column:2; } .detail-metrics .metric-label { font-size:11px; } .detail-metrics .metric-foot { margin-top:3px; } .detail-meta { font-size:10px; } .detail-heading h1 { font-size:26px; } .baseline-grid { gap:9px; } .baseline-grid strong { font-size:13px; } .baseline-grid small { font-size:9px; } .time-line { grid-template-columns:69px minmax(0,1fr) 69px; gap:9px; font-size:11px; } .time-line strong { font-size:10px; } .modal-head,.modal-body { padding:20px; } .form-grid { grid-template-columns:1fr; gap:13px; } .comment-form .form-grid { grid-template-columns:1fr; } .modal-foot { padding:15px 20px; } .comment time { display:block; margin:3px 0 0; } .footer-note { flex-direction:column; gap:7px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at 20% 0%,#e5eddc,transparent 60%),var(--bg); }
.login-card { width:min(100%,410px); padding:36px; border:1px solid #dfe7d8; border-radius:16px; background:var(--paper); box-shadow:0 16px 65px #18362b0d; }
.login-brand { display:flex; align-items:center; gap:11px; margin-bottom:29px; }
.login-brand .brand-mark { background:var(--dark); color:var(--lime); width:37px; height:37px; }
.login-brand strong { font-size:18px; font-weight:600; letter-spacing:-.5px; }
.login-card .eyebrow { color:#647859; font-size:10px; margin-bottom:10px; }
.login-card h1 { font-size:27px; letter-spacing:-.65px; }
.login-description { margin:9px 0 25px; color:var(--muted); font-size:12px; }
.login-card form { display:grid; gap:17px; }
.login-card input { font-size:14px; min-height:44px; }
.password-control { position:relative; }
.password-control input { width:100%; padding-right:102px; }
.password-toggle { position:absolute; inset:2px 2px 2px auto; width:94px; display:flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:6px; background:transparent; color:var(--green); font-size:11px; }
.password-toggle:hover { background:#edf3e8; }
.password-toggle svg { width:18px; height:18px; }
.login-card .button { width:100%; justify-content:center; min-height:44px; }
.login-card .form-error:empty { display:none; }
.session-name { font-size:11px; color:var(--muted); max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.access-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.access-selector .checklist { max-height:240px; overflow-y:auto; margin-top:12px; }
.access-selector .check-row { padding:10px 0; }
.logout-button,.refresh-button { white-space:nowrap; font-size:11px; }
@media(max-width:520px) {
  .login-page { padding:18px; }
  .login-card { padding:28px 24px; }
  .session-name { max-width:65px; }
  .topbar-right { gap:10px; }
  .refresh-button { display:none; }
  .access-heading { align-items:flex-start; }
  .access-heading .text-button { font-size:10px; }
  .nav a { padding:8px; }
}