:root { --bg-color:#f5f6f2; --surface-color:#fff; --text-main:#233b32; --text-muted:#78847d; --border-color:#e3e8e1; --primary:#295b48; --primary-hover:#1d4535; --success:#295b48; --radius:10px; }
body { font-family: 'Segoe UI',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
#app .navbar { position:fixed; inset:0 auto 0 0; width:224px; padding:34px 20px 24px; background:#fbfcf8; border-right:1px solid var(--border-color); border-bottom:0; flex-direction:column; align-items:stretch; justify-content:flex-start; }
#app .navbar-brand { gap:12px; padding:0 10px; margin-bottom:55px; }
#app .logo-badge { width:42px; height:42px; display:grid; place-items:center; font-family:Georgia,serif; font-size:31px; font-weight:400; border-radius:13px; background:#24513f; color:#f2f3d9; padding:0 0 5px; }
#app .navbar-brand h1 { font-size:22px; letter-spacing:-.7px; }
.workspace-brand-sub { display:block; font-size:8px; letter-spacing:1.5px; font-weight:600; color:#8a958b; margin-top:4px; }
#app .nav-tabs { flex-direction:column; gap:7px; }
.nav-caption { padding:0 14px 12px; color:#9aa498; font-size:9px; letter-spacing:1.8px; font-weight:600; }
#app .nav-tab { display:flex; align-items:center; gap:12px; text-align:left; font-size:13px; padding:13px 14px; border-radius:9px; color:#718174; }
#app .nav-tab > span { font-size:20px; line-height:1; font-weight:400; }
#app .nav-tab.active { background:#e6eee1; color:#29503c; }
#app .nav-tab:hover { background:#edf2e9; }
#app .nav-actions { margin-top:auto; border-top:1px solid #e3e8de; padding:22px 8px 0; flex-wrap:wrap; gap:12px; }
#app .user-info { width:100%; font-size:12px; }
#app .dropdown-content { top:auto; bottom:calc(100% + 10px); left:0; right:auto; }
#app .main-content { margin-left:224px; width:calc(100% - 224px); padding:46px clamp(24px,3.5vw,64px) 70px; }
.workspace-heading,.main-content > .tab-pane { max-width:1440px; margin-left:auto; margin-right:auto; }
.workspace-heading { margin-bottom:34px; }
.workspace-eyebrow { font-size:10px; letter-spacing:2px; color:#85927f; font-weight:600; margin-bottom:10px; }
.workspace-heading h2 { font-size:34px; font-weight:550; letter-spacing:-1.3px; line-height:1.25; margin-bottom:9px; }
.workspace-heading > p:last-child { color:#839080; font-size:13px; }
.portfolio-overview { display:flex; align-items:center; gap:40px; padding:22px 28px; margin-bottom:30px; border:1px solid #e0e7da; border-radius:14px; background:linear-gradient(110deg,#eef3e8,#f7f8f2); }
.portfolio-overview > div { display:flex; align-items:center; gap:12px; min-width:110px; }
.portfolio-overview strong { font-size:29px; font-weight:500; letter-spacing:-1px; }
.portfolio-overview span { display:flex; align-items:center; gap:7px; font-size:12px; color:#778470; }
.portfolio-overview > p { margin-left:auto; font-family:Georgia,serif; font-style:italic; font-size:18px; color:#8c9a80; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.status-dot.live { background:#54805e; }.status-dot.preview { background:#b99a55; }
#app .toolbar { margin-bottom:18px; gap:16px; }
#app .input-search,#app .select-filter { min-height:39px; border-color:#e0e6dc; background:#fff; font-size:12px; border-radius:8px; padding:9px 13px; }
#app .input-search { min-width:280px; }
#app .actions { display:flex; align-items:center; gap:8px; }
#app .btn { border-radius:7px; font-size:12px; padding:9px 13px; line-height:1.4; }
#app .btn-outline { background:white; color:#687b6a; border-color:#dfe6dc; }
#app .btn-primary,#app .btn-success { background:#2a5945; border-color:#2a5945; color:white; }
#app .badge-blue { background:#edf2e8; color:#557346; }
#app .table-container { box-shadow:none; border-color:#e1e7dd; border-radius:12px; }
#app .table th { font-size:10px; letter-spacing:1px; background:#fafbf7; color:#8a9686; padding:16px 22px; font-weight:600; }
#app .table td { border-color:#edf0e8; padding:19px 22px; }
#app .table tr:hover { background:#fafcf7; }
.project-table { table-layout:fixed; min-width:820px; }
.project-table th:nth-child(1) { width:43%; }.project-table th:nth-child(2) { width:12%; }.project-table th:nth-child(3) { width:11%; }.project-table th:nth-child(4) { width:15%; }.project-table th:nth-child(5) { width:19%; }
#app .project-table td { vertical-align:middle; }
.project-identity { display:flex; align-items:center; gap:16px; min-width:0; }
.project-monogram { display:grid; place-items:center; width:42px; height:46px; flex-shrink:0; border-radius:10px; font-family:Georgia,serif; font-size:23px; border:1px solid #00000005; }
.tone-0 { background:#eeeadd; color:#8b815d; }.tone-1 { background:#e5eee1; color:#5c7a4a; }.tone-2 { background:#e4ebed; color:#597784; }.tone-3 { background:#eee4df; color:#9b7766; }
.project-info { min-width:0; display:flex; flex-direction:column; gap:3px; }
.project-info > strong { font-size:15px; font-weight:600; line-height:1.45; overflow-wrap:anywhere; }
.project-info > a { color:#6d7e67; font-size:12px; text-decoration:none; overflow-wrap:anywhere; }
.project-info > a:hover { text-decoration:underline; color:#315b44; }
.project-info > small { color:#7f8d77; font-size:10px; letter-spacing:.2px; overflow-wrap:anywhere; }
#app .project-phase-control,.project-table .badge { display:inline-flex; align-items:center; gap:7px; border-radius:6px; white-space:nowrap; font-size:11px; padding:6px 9px; border:none; }
#app .project-phase-control.badge-green { color:#54744b; background:#edf4e8; }
#app .project-phase-control.badge-yellow { color:#9d874a; background:#f7f3e6; }
.project-activity { border:0; background:none; color:#9aa490; font-size:11px; cursor:pointer; white-space:nowrap; }
.project-activity strong { color:#627b56; font-weight:500; }
.project-date { font-size:12px; color:#6f8067; white-space:nowrap; }
.project-row-actions { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
#app .project-row-actions .btn { padding:6px 10px; font-size:11px; border-color:#e2e8db; white-space:nowrap; }
.project-log-link { border:none; background:none; color:#8a9980; padding:0 3px; font-size:10px; cursor:pointer; }
.project-log-link:hover { color:#2a5945; text-decoration:underline; }
@media(min-width:1550px) { .project-row-actions { flex-direction:row; align-items:center; gap:12px; } }
@media(max-width:1000px) { #app .navbar { width:190px; padding:28px 12px 20px; } #app .main-content { margin-left:190px; width:calc(100% - 190px); padding:32px 22px; } .portfolio-overview { gap:24px; padding:20px; } .portfolio-overview > div { min-width:0; } .portfolio-overview > p { display:none; } }
@media(max-width:700px) { #app .navbar { position:static; width:100%; padding:20px 18px 12px; border-right:0; border-bottom:1px solid var(--border-color); } #app .navbar-brand { margin:0 0 20px; padding:0; } #app .nav-tabs { flex-direction:row; gap:4px; } .nav-caption { display:none; } #app .nav-tab { padding:10px 8px; gap:5px; font-size:11px; flex:1; justify-content:center; } #app .nav-tab > span { font-size:17px; } #app .nav-actions { margin:14px 0 0; padding:12px 0 0; gap:10px; } #app .user-info { width:auto; margin-right:auto; } #app .main-content { width:100%; margin-left:0; padding:28px 16px; } .workspace-heading { margin-bottom:24px; }.workspace-heading h2 { font-size:28px; } .portfolio-overview { padding:16px; gap:20px; margin-bottom:22px; }.portfolio-overview > div { flex-direction:column; align-items:flex-start; gap:1px; flex:1; }.portfolio-overview strong { font-size:25px; } #app .input-search { min-width:0; width:100%; } #tab-projects .filters { width:100%; flex-wrap:nowrap; } #app .table td { padding:16px; } }
#app .project-table .badge-green { color:#54744b; background:#edf4e8; }
#app .project-table .badge-yellow { color:#8d7536; background:#f7f3e6; }
.project-activity { font-size:12px; color:#6e7d66; }
.project-log-link { font-size:11px; color:#6e7e65; }
#app .project-row-actions .btn { font-size:12px; }
@media(max-width:700px) {
  #app .project-table-container { border:0; background:none; overflow:visible; }
  .project-table { min-width:0; display:block; }
  .project-table thead { display:none; }
  .project-table tbody { display:grid; gap:12px; }
  .project-table tr { display:grid; grid-template-columns:1fr 1fr; padding:18px; gap:14px 10px; border:1px solid #e1e7dd; border-radius:12px; background:white; }
  #app .project-table td { display:block; padding:0; border:0; min-width:0; }
  .project-table td:first-child { grid-column:1 / -1; padding-bottom:4px !important; }
  .project-table td:nth-child(3) { text-align:right; }
  .project-table td:nth-child(4) { grid-column:1 / -1; font-size:11px; }
  .project-table td:nth-child(4)::before { content:'Updated '; color:#8b9684; }
  .project-table td:last-child { grid-column:1 / -1; border-top:1px solid #edf0e8 !important; padding-top:12px !important; }
  .project-row-actions { flex-direction:row; align-items:center; justify-content:space-between; }
  .project-info > strong { font-size:14px; }
  .project-info > a { font-size:11px; }
}
@media(max-width:700px) { #app .project-table { min-width:0; width:100%; } }