/* Global styles for 张志强 个人主页 */
:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0f1724;
  --muted:#5b6b7f;
  --accent:#2563eb;
  --accent-2:#7c3aed;
  --glass:rgba(255,255,255,0.6);
  --border:rgba(15,23,36,0.06);
  --shadow:0 10px 30px rgba(11,22,64,0.06);
}
[data-theme="dark"]{
  --bg:#051226;
  --card:#071429;
  --text:#e6f3ff;
  --muted:#9fb3d6;
  --accent:#4f8ef7;
  --accent-2:#8b5cf6;
  --glass:rgba(255,255,255,0.03);
  --border:rgba(255,255,255,0.04);
  --shadow:0 12px 36px rgba(0,0,0,0.6);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;background:linear-gradient(180deg,var(--bg),#fff 2000px);color:var(--text);}
a{color:var(--accent)}

.container{max-width:1080px;margin:32px auto;padding:24px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.avatar{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;box-shadow:0 8px 20px rgba(37,99,235,0.12)}
.name{font-weight:700;font-size:18px}
.role{font-size:12px;color:var(--muted)}

.main-nav{display:flex;gap:10px;align-items:center}
.button{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--text);font-weight:600;border:1px solid var(--border);background:transparent;cursor:pointer}
.button:hover{transform:translateY(-2px);transition:all 150ms}

.card{background:var(--card);padding:18px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow)}
.hero-landing{padding:36px}
.hero-content{display:flex;gap:20px;align-items:flex-start;justify-content:space-between}
.hero-side{max-width:300px}
.feature{padding:14px}
h1{margin:0;font-size:36px}
.lead{margin-top:8px;color:var(--muted);font-size:15px}
.actions{display:flex;gap:12px;margin-top:14px}

.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.proj{padding:14px}
.proj h3{margin:0 0 6px}
.proj .muted{color:var(--muted);font-size:14px}
.proj-actions{margin-top:10px}

.skill-row{display:flex;gap:16px;flex-wrap:wrap}
.skill{flex:1;min-width:180px}
.skill-title{font-weight:600;margin-bottom:8px}
.bar{height:12px;background:linear-gradient(90deg,rgba(0,0,0,0.04),rgba(0,0,0,0.02));border-radius:10px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));}

.contact-cta{text-align:left;display:flex;flex-direction:column;gap:10px}

footer{margin-top:28px;text-align:center;color:var(--muted);font-size:13px}
.footer-line a{color:var(--muted);text-decoration:underline}

/* Responsive */
@media (max-width:900px){
  .hero-content{flex-direction:column}
  .projects-grid{grid-template-columns:1fr}
  header{flex-direction:column;align-items:flex-start;gap:12px}
}

/* Accessibility focus */
a:focus,.button:focus{outline:3px solid rgba(37,99,235,0.18);outline-offset:2px}