@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
*{box-sizing:border-box;}
body{ margin:0; background:var(--p-bg); color:var(--p-fg); font-family:'IBM Plex Sans',sans-serif; }
.pf-top-banner{
  background:#12232E; color:#EFF2EC; font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  text-align:center; padding:9px 16px; position:sticky; top:0; z-index:50;
}
.pf-top-banner strong{ color:#E2963A; }
.pf-top-banner a{ color:#EFF2EC; text-decoration:underline; margin-left:10px; }
.pf-header{ border-bottom:1px solid rgba(255,255,255,0.12); position:sticky; top:33px; z-index:40; background:var(--p-bg); }
.pf-header-inner{ max-width:1040px; margin:0 auto; padding:18px 28px; display:flex; justify-content:space-between; align-items:center; }
.pf-logo{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; }
.pf-nav{ display:flex; gap:26px; flex-wrap:wrap; }
.pf-nav a{ color:var(--p-fg); opacity:.75; text-decoration:none; font-size:14px; }
.pf-nav a.active{ opacity:1; text-decoration:underline; font-weight:600; }
.pf-hero{ max-width:1040px; margin:0 auto; padding:64px 28px 44px; }
.pf-hero h1{ font-family:'Space Grotesk',sans-serif; font-size:40px; line-height:1.1; max-width:620px; margin:0; font-weight:600; }
.pf-hero p{ font-size:16px; line-height:1.7; max-width:480px; opacity:.85; margin-top:18px; }
.pf-btn{ display:inline-block; margin-top:26px; padding:13px 24px; border-radius:2px; border:none; cursor:pointer; font-size:15px; font-family:'IBM Plex Sans',sans-serif; background:var(--p-accent); color:var(--p-bg); text-decoration:none; }
.pf-section{ background:var(--p-section); padding:56px 28px; }
.pf-section-inner{ max-width:1040px; margin:0 auto; }
.pf-section-label{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.06em; opacity:.65; margin-bottom:22px; }
.pf-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pf-card{ background:var(--p-card); padding:22px 20px; border-radius:4px; }
.pf-card h3{ font-size:16px; margin:0 0 8px; font-family:'Space Grotesk',sans-serif; }
.pf-card p{ font-size:13.5px; opacity:.8; line-height:1.6; margin:0; }
.pf-list{ display:flex; flex-direction:column; gap:10px; }
.pf-row{ display:flex; justify-content:space-between; align-items:center; background:var(--p-card); padding:15px 18px; border-radius:4px; font-size:14.5px; }
.pf-row .val{ color:var(--p-accent); font-family:'IBM Plex Mono',monospace; font-size:13px; }
.pf-menu{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.pf-menu .pf-card .price{ font-family:'IBM Plex Mono',monospace; color:var(--p-accent); margin-top:8px; font-size:14px; }
.pf-photo{ background:var(--p-card); border-radius:4px; height:140px; }
.pf-form{ max-width:480px; display:flex; flex-direction:column; gap:14px; }
.pf-field label{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; opacity:.7; margin-bottom:6px; }
.pf-field input, .pf-field textarea{ width:100%; background:var(--p-card); border:1px solid rgba(255,255,255,0.14); color:var(--p-fg); padding:11px 13px; border-radius:3px; font-family:inherit; font-size:14px; }
.pf-footer{ max-width:1040px; margin:0 auto; padding:34px 28px; font-size:12.5px; opacity:.6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media(max-width:760px){ .pf-cards{ grid-template-columns:1fr; } .pf-menu{ grid-template-columns:1fr; } .pf-nav{ display:none; } .pf-hero h1{ font-size:28px; } }

/* dashboard-type project */
.pfd-shell{ display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 33px); }
.pfd-sidebar{ background:var(--p-bg); color:var(--p-fg); padding:24px 16px; }
.pfd-logo{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; margin-bottom:28px; }
.pfd-sidebar nav{ display:flex; flex-direction:column; gap:3px; }
.pfd-sidebar a{ color:var(--p-fg); opacity:.7; text-decoration:none; font-size:14px; padding:10px 12px; border-radius:3px; }
.pfd-sidebar a.active{ background:var(--p-accent); color:var(--p-bg); opacity:1; font-weight:600; }
.pfd-main{ background:#F4F5F2; color:#1F3A52; padding:36px 40px; }
.pfd-main h1{ font-family:'Space Grotesk',sans-serif; font-size:24px; margin:0 0 22px; }
.pfd-stats{ display:flex; gap:14px; margin-bottom:24px; flex-wrap:wrap; }
.pfd-stat{ background:#DCEAF6; border-radius:5px; padding:16px 20px; min-width:120px; }
.pfd-stat .n{ font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:700; }
.pfd-stat .l{ font-size:12px; opacity:.75; margin-top:4px; }
.pfd-rows{ background:#fff; border:1px solid #DCE3E8; border-radius:5px; overflow:hidden; max-width:640px; }
.pfd-row{ display:flex; justify-content:space-between; padding:13px 18px; font-size:14px; border-bottom:1px solid #DCE3E8; }
.pfd-row:last-child{ border-bottom:none; }
@media(max-width:760px){ .pfd-shell{ grid-template-columns:1fr; } .pfd-sidebar{ display:flex; overflow-x:auto; gap:6px; } .pfd-sidebar nav{ flex-direction:row; } .pfd-main{ padding:24px 18px; } }