:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #17202a; background: #f7f8fa; }
* { box-sizing: border-box; }
body { margin: 0; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-form { width: min(100%, 360px); }
.login-input { width: 100%; height: 54px; border: 1px solid #cdd4dc; border-radius: 10px; padding: 0 16px; font-size: 18px; outline: none; }
.login-input:focus { border-color: #cf5b13; box-shadow: 0 0 0 3px rgb(207 91 19 / 16%); }
.login-input--invalid { border-color: #b42318; }
.app-header { display: flex; gap: 24px; align-items: center; padding: 14px max(24px, calc((100vw - 1120px) / 2)); background: #fff; border-bottom: 1px solid #e2e6ea; }
.app-header nav { display: flex; gap: 18px; flex: 1; }.app-header a { color: #9f4309; text-decoration: none; }.app-header .brand { color: #17202a; font-weight: 700; }.app-header a.active { font-weight: 700; }.link-button { border: 0; background: transparent; color: #9f4309; font: inherit; cursor: pointer; }
.app-main { max-width: 1120px; margin: 0 auto; padding: 34px 24px; }.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.page-heading h1 { margin: 0; font-size: clamp(24px, 4vw, 36px); }.badge { border-radius: 999px; background: #f8e1d2; color: #9f4309; padding: 6px 10px; font-size: 14px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 28px 0; }.metrics article, .empty-card { border: 1px solid #e2e6ea; border-radius: 12px; background: #fff; padding: 20px; }.metrics span { display: block; color: #5f6b76; }.metrics strong { display: block; margin-top: 12px; font-size: 28px; }.empty-card { max-width: 700px; }.empty-card h2 { margin-top: 0; } .empty-card p { line-height: 1.6; color: #43505c; }
.settings-list, .user-panel { max-width: 800px; }.settings-item, .user-panel { display: block; border: 1px solid #e2e6ea; border-radius: 12px; background: #fff; padding: 20px; }.settings-item { color: #17202a; text-decoration: none; }.settings-item span { display: block; margin-top: 7px; color: #5f6b76; }.back-link { display: inline-block; margin-bottom: 8px; }.user-panel { margin-top: 22px; }.user-panel h2 { margin-top: 0; }.user-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.user-form label { display: grid; gap: 6px; font-weight: 600; }.user-form input { border: 1px solid #cdd4dc; border-radius: 8px; padding: 10px; font: inherit; }.user-form fieldset { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }.user-form legend { font-weight: 700; margin-bottom: 8px; }.permission-option { grid-template-columns: auto 1fr; align-items: start; border: 1px solid #dce2e7; border-radius: 8px; padding: 12px; cursor: pointer; }.permission-option small { display: block; margin-top: 4px; color: #5f6b76; font-weight: 400; }.user-form .button { justify-self: start; border: 0; border-radius: 8px; background: #cf5b13; color: #fff; padding: 10px 15px; font: inherit; cursor: pointer; }.table-wrap { overflow-x: auto; border: 1px solid #e2e6ea; border-radius: 8px; }.table-wrap table { width: 100%; min-width: 600px; border-collapse: collapse; }.table-wrap th, .table-wrap td { padding: 12px; text-align: left; border-bottom: 1px solid #edf0f2; }.empty-copy { color: #5f6b76; }
@media (max-width: 700px) { .app-header { flex-wrap: wrap; gap: 12px; }.app-header nav { order: 3; flex-basis: 100%; }.metrics { grid-template-columns: repeat(2, 1fr); }.user-form { grid-template-columns: 1fr; }.app-main { padding: 24px 16px; } }