.page-container{display:flex;min-height:100vh;background:var(--bg)}
.pageContent{flex:1;margin-left:var(--sidebar-width);min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.pageContent > .scroll{padding:28px;flex:1;max-width:1400px;width:100%}

.page-header{margin-bottom:24px}
.page-header h1{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.3px}
.page-header p{font-size:14px;color:var(--text-secondary);margin-top:4px}
.page-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.box-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-light)}
.box-header h2,.box-header h3{font-size:15px;font-weight:600;margin:0}
.box-footer{padding-top:16px;margin-top:16px;border-top:1px solid var(--border-light);display:flex;align-items:center;justify-content:flex-end;gap:8px}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

@media(max-width:1024px){
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .pageContent{margin-left:0}
  .pageContent > .scroll{padding:16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}