*{box-sizing:border-box}body{margin:0;background:#f6f7f9;color:#20242a;font-family:Inter,ui-sans-serif,system-ui,sans-serif}button,.button{align-items:center;background:#1f6f5b;border:0;border-radius:6px;color:#fff;cursor:pointer;display:inline-flex;gap:8px;min-height:36px;padding:0 12px;text-decoration:none}input,textarea{border:1px solid #cdd4dd;border-radius:6px;font:inherit;min-height:36px;padding:8px 10px;width:100%}textarea{min-height:92px;resize:vertical}label{display:grid;gap:6px;font-size:13px;font-weight:700}.shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:#1d2730;color:#fff;display:grid;grid-template-rows:auto 1fr;min-height:100vh;padding:18px}.brand{align-items:center;display:flex;gap:12px;margin-bottom:22px}.brand>span{background:#f0b429;border-radius:6px;color:#1d2730;display:grid;font-weight:900;height:40px;place-items:center;width:40px}.brand small{color:#aeb8c2;display:block}nav{display:grid;gap:4px;overflow:auto}nav a{border-radius:6px;color:#d9e2ec;padding:9px 10px;text-decoration:none;text-transform:capitalize}nav a.active,nav a:hover{background:#31414f;color:#fff}.main{min-width:0}.topbar{align-items:center;background:#fff;border-bottom:1px solid #dde3ea;display:flex;height:58px;justify-content:space-between;padding:0 24px}.search{align-items:center;color:#66717d;display:flex;gap:8px}.icon-button{background:transparent;color:#20242a;padding:0 8px}.icon-button.danger{color:#b42318}.page{padding:24px}.page h1{font-size:24px;margin:0;text-transform:capitalize}.page-header{align-items:end;display:flex;gap:16px;justify-content:space-between;margin-bottom:18px}.page-header p{color:#66717d;margin:4px 0 0}.actions{align-items:center;display:flex;gap:8px}.metrics{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}.metric{background:#fff;border:1px solid #dde3ea;border-radius:8px;padding:18px}.metric span{color:#66717d;display:block;text-transform:capitalize}.metric strong{display:block;font-size:30px;margin-top:8px}.table{background:#fff;border:1px solid #dde3ea;border-radius:8px;overflow:auto}table{border-collapse:collapse;width:100%}th,td{border-bottom:1px solid #edf1f5;padding:12px;text-align:left}th{color:#66717d;font-size:12px;text-transform:uppercase}tbody tr{cursor:pointer}tbody tr:hover{background:#f7faf9}.drawer{background:#141a2057;top:0;right:0;bottom:0;left:0;position:fixed}.drawer form{background:#fff;box-shadow:-12px 0 32px #0000002e;display:grid;gap:14px;height:100%;margin-left:auto;overflow:auto;padding:24px;width:min(480px,100vw)}.login{display:grid;min-height:100vh;place-items:center}.login form{background:#fff;border:1px solid #dde3ea;border-radius:8px;display:grid;gap:16px;padding:28px;width:min(420px,calc(100vw - 32px))}.form-error{color:#b42318;margin:0}.image-field{display:grid;gap:8px}.image-field-preview{position:relative;width:fit-content}.image-field-preview img{border:1px solid #dde3ea;border-radius:6px;max-height:140px;max-width:220px;object-fit:cover;display:block}.image-field-preview .icon-button{position:absolute;right:6px;top:6px;background:#fff;min-height:28px;padding:0 6px}.image-field-actions{align-items:center;display:flex;gap:8px}.image-field-actions input[type=text]{flex:1}.error-text{color:#b42318;font-size:12px}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.center{display:grid;min-height:100vh;place-items:center}@media (max-width: 860px){.shell{grid-template-columns:1fr}.sidebar{min-height:auto}.page-header,.actions{align-items:stretch;flex-direction:column}.metrics{grid-template-columns:1fr}}
