*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f4f6f9; color: #1a1a2e; line-height: 1.6; } /* Navigation */ nav { display: flex; justify-content: space-between; align-items: center; padding: .75rem 2rem; background: #1a1a2e; color: #fff; } .nav-brand { font-weight: 600; letter-spacing: .03em; } .nav-user { display: flex; align-items: center; gap: 1.25rem; font-size: .9rem; } nav a { color: #a8d8ea; text-decoration: none; } nav a:hover { text-decoration: underline; } /* Layout */ main { max-width: 960px; margin: 2rem auto; padding: 0 1.25rem; } h1 { margin-bottom: .25rem; } h2 { margin: 1.25rem 0 .6rem; font-size: 1.1rem; } .subtitle { color: #555; margin-bottom: 1.75rem; font-size: .95rem; } /* Card grid */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } .card { background: #fff; border: 1px solid #dde1e7; border-radius: 8px; padding: 1.25rem; } .card--warning { border-color: #e5a100; background: #fffbe6; } /* Buttons */ .btn { display: inline-block; margin-top: .75rem; padding: .45rem 1.2rem; background: #1a1a2e; color: #fff; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: .9rem; transition: background .15s; } .btn:hover { background: #2d2d52; } .btn--danger { background: #c0392b; } .btn--danger:hover { background: #a93226; } .btn:disabled { background: #aaa; cursor: not-allowed; } /* Tables */ table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-size: .9rem; } th, td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid #e8eaed; } th { background: #f0f2f5; font-weight: 600; } tr:last-child td { border-bottom: none; } code { font-size: .82rem; background: #f0f2f5; padding: .1rem .3rem; border-radius: 3px; } /* Project list */ .project-list { list-style: none; margin: .5rem 0 1rem; } .project-list li { padding: .45rem 0; border-bottom: 1px solid #e8eaed; } .project-list li:last-child { border-bottom: none; } .client-name { color: #777; font-size: .88rem; } /* Error page */ .error-box { text-align: center; padding: 3rem 2rem; background: #fff; border-radius: 8px; border: 1px solid #dde1e7; max-width: 480px; margin: 4rem auto; } .error-box h1 { color: #c0392b; margin-bottom: 1rem; } .error-box p { color: #555; margin-bottom: 1.75rem; } section { margin-bottom: 2rem; }