.page{min-height:100vh;background:#f1f5f9}.app-header{background:#fff;border-bottom:1px solid #E2E8F0;padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}.logo{font-size:18px;font-weight:800}.logo-accent{color:#2563eb}.main{margin:0 auto;padding:32px 20px}.main--sm{max-width:700px}.main--md{max-width:720px}.main--lg{max-width:820px}.card{background:#fff;border-radius:12px;border:1px solid #E2E8F0;padding:28px}.card--sm{padding:22px}.page-title{font-size:24px;font-weight:800;margin-bottom:6px}.page-sub{color:#475569;font-size:14px;margin-bottom:24px}.label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#475569;margin-bottom:6px}.label--blue{color:#2563eb;letter-spacing:.7px}.label--green{color:#059669}.label--muted{color:#94a3b8}.field{margin-bottom:18px}.input{width:100%;padding:10px 13px;border:1px solid #E2E8F0;border-radius:8px;font-size:14px;font-family:inherit;outline:none;background:#fff}.input--error{border-color:#fca5a5}.textarea{width:100%;min-height:90px;padding:10px 13px;border:1px solid #E2E8F0;border-radius:8px;font-size:13px;font-family:inherit;resize:vertical;outline:none;box-sizing:border-box}.hint{font-size:12px;color:#94a3b8;display:block;margin-bottom:10px}.btn-primary{padding:12px 28px;background:#2563eb;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}.btn-primary--sm{padding:10px 22px;font-size:14px}.btn-secondary{padding:8px 16px;background:#f1f5f9;border:1px solid #E2E8F0;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;color:#475569}.box-success{background:#f0fdf4;border:1px solid #BBF7D0;border-radius:8px;padding:12px 14px}.box-warning{background:#fef3c7;border:1px solid #FDE68A;border-radius:8px;padding:10px 14px;font-size:13px;color:#92400e}.divider{border-top:1px solid #E2E8F0;margin:18px 0}.spinner{width:28px;height:28px;border:3px solid #E2E8F0;border-top-color:#2563eb;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 12px}.err{color:#ef4444;font-size:13px;margin-top:10px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}