@import url('styles.css');

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-bg);color:var(--text-primary);font-family:var(--font-body)}
img{max-width:100%;display:block}
a{color:var(--primary)}
a:hover{color:var(--primary-hover)}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 32px}

/* nav */
.site-nav{display:flex;align-items:center;gap:28px;padding:20px 32px;border-bottom:1px solid var(--border-subtle)}
.site-nav .brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none}
.site-nav .brand img{width:28px;height:28px}
.site-nav .brand span{font-family:var(--font-display);font-weight:600;font-size:var(--text-md);color:var(--text-primary);white-space:nowrap;flex-shrink:0}
.site-nav a.navlink{font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);text-decoration:none}
.site-nav a.navlink:hover,.site-nav a.navlink[aria-current='page']{color:var(--primary)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:var(--text-base);border-radius:var(--radius-md);padding:12px 24px;text-decoration:none;cursor:pointer;transition:background var(--duration-fast) var(--ease-standard)}
.btn-primary{background:var(--primary);color:var(--text-on-brand);border:1px solid transparent}
.btn-primary:hover{background:var(--primary-hover)}
.btn-secondary{background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border-default)}
.btn-secondary:hover{background:var(--gray-50)}

/* badge */
.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;background:var(--primary-soft);color:var(--primary-hover)}
.badge-neutral{background:var(--gray-100);color:var(--text-secondary)}

/* card */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px}
.card-kicker{font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--primary-hover);margin-bottom:8px}
.card-title{font-family:var(--font-display);font-weight:600;font-size:var(--text-md);margin:0 0 8px}
.card-body{font-size:var(--text-sm);color:var(--text-secondary);margin:0}

/* stat tile */
.stat{flex:1;text-align:center;background:var(--surface-sunken);border-radius:var(--radius-md);padding:20px 12px}
.stat .num{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--primary-hover)}
.stat .label{font-size:var(--text-sm);color:var(--text-secondary);margin-top:4px}

/* footer */
.site-footer{border-top:1px solid var(--border-subtle);padding:40px 32px;margin-top:64px}
.site-footer .legal{font-size:var(--text-xs);color:var(--text-tertiary);line-height:var(--leading-normal);max-width:900px;margin:0 auto 24px}
.logo-row{display:flex;gap:32px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.logo-row img{height:32px;width:auto}
.foot-bottom{display:flex;justify-content:space-between;font-size:var(--text-sm);color:var(--text-tertiary);flex-wrap:wrap;gap:12px}

/* avatar */
.avatar{border-radius:50%;object-fit:cover;flex-shrink:0}

/* refs */
.refs{font-size:var(--text-xs);color:var(--text-tertiary);line-height:1.7;border-top:1px solid var(--border-subtle);padding-top:16px;margin-top:32px}
.refs .refs-label{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin-bottom:8px}

/* form */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:var(--text-sm);font-weight:600;color:var(--text-secondary)}
.field input,.field textarea{font:inherit;font-size:var(--text-base);padding:10px 14px;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-primary)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--focus-ring);box-shadow:var(--shadow-focus)}
.seg{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label{display:inline-flex;align-items:center;padding:8px 16px;border-radius:var(--radius-md);border:1px solid var(--border-default);font-size:var(--text-sm);font-weight:600;cursor:pointer;color:var(--text-secondary)}
.seg input:checked + label{background:var(--primary);color:var(--text-on-brand);border-color:transparent}

@media (max-width:820px){
  .site-nav{flex-wrap:wrap;gap:12px 18px;padding:16px 20px}
  .site-nav .brand{margin-right:0;flex-basis:100%}
  .grid-2{grid-template-columns:1fr!important}
  .grid-3{grid-template-columns:1fr!important}
  h1{font-size:var(--text-3xl)!important}
}