* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f5f5f5; color: #111; }
.header { background: #222; color: #fff; padding: 0.75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.header a { color: #fff; text-decoration: none; margin-right: 1rem; }
.header a:hover { text-decoration: underline; }
.logo { font-weight: bold; font-size: 1.25rem; }
.inline-form { display: inline; margin: 0; }
.inline-form button { background: transparent; border: 1px solid #666; color: #fff; padding: 0.25rem 0.5rem; cursor: pointer; font-size: inherit; }
.inline-form button:hover { background: #444; }
.main { max-width: 56rem; margin: 2rem auto; padding: 0 1rem; }
h1 { margin-top: 0; }
.form label { display: block; margin-top: 0.75rem; margin-bottom: 0.25rem; }
.form input[type="email"], .form input[type="password"], .form input[type="url"], .form input[type="text"] { width: 100%; padding: 0.5rem; font-size: 1rem; box-sizing: border-box; }
.form label .optional { font-weight: normal; color: #666; }
.form .hint { font-size: 0.875rem; color: #666; margin-top: 0.25rem; margin-bottom: 0; }
.form button { margin-top: 1rem; padding: 0.5rem 1rem; font-size: 1rem; cursor: pointer; background: #222; color: #fff; border: none; }
.form button:hover { background: #444; }
.error { color: #c00; margin-top: 0.5rem; }
.success { color: #080; margin-top: 0.5rem; }
.short-url-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.short-url-row .copy-btn { margin: 0; margin-left: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.875rem; cursor: pointer; background: #222; color: #fff; border: none; border-radius: 4px; }
.short-url-row .copy-btn:hover { background: #444; }
.flash { padding: 0.75rem; margin-bottom: 1rem; border-radius: 4px; }
.flash-info { background: #e3f2fd; color: #0d47a1; }
.flash-success { background: #e8f5e9; color: #1b5e20; }
.flash-error { background: #ffebee; color: #b71c1c; }
.links-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.links-table th, .links-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #eee; }
.links-table th { background: #fafafa; font-weight: 600; }
.links-table a { color: #1976d2; text-decoration: none; }
.links-table a:hover { text-decoration: underline; }
.long-url { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-actions { white-space: nowrap; }
.link-actions .inline-form { display: inline-block; margin-right: 0.5rem; }
.link-actions .btn-small { padding: 0.25rem 0.5rem; font-size: 0.875rem; cursor: pointer; background: #222; color: #fff; border: none; border-radius: 4px; }
.link-actions .btn-small:hover { background: #444; }
.link-actions .btn-danger { background: #b71c1c; }
.link-actions .btn-danger:hover { background: #c62828; }
tr.link-disabled { opacity: 0.7; }
.link-unavailable { text-align: center; padding: 2rem 1rem; }
.link-unavailable h1 { margin-top: 0; }
.link-unavailable p { margin: 1rem 0; }
.profile-email { margin-bottom: 1.5rem; }
.profile-form h2 { font-size: 1rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; }

.admin-users-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.admin-users-table th, .admin-users-table td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid #eee; }
.admin-users-table th { background: #f8f9fa; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.02em; color: #495057; }
.admin-users-table tbody tr:hover { background: #fafafa; }
.admin-user-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.admin-action-form { display: inline-flex; margin: 0; }
.admin-role-select { padding: 0.35rem 0.6rem; font-size: 0.875rem; border: 1px solid #dee2e6; border-radius: 6px; background: #fff; color: #212529; cursor: pointer; min-width: 5.5rem; }
.admin-role-select:hover { border-color: #adb5bd; }
.admin-role-select:focus { outline: none; border-color: #222; box-shadow: 0 0 0 2px rgba(34,34,34,0.15); }
.admin-user-actions .btn-small { padding: 0.35rem 0.65rem; font-size: 0.8125rem; cursor: pointer; border: none; border-radius: 6px; font-weight: 500; }
.admin-user-actions .btn-small:not(.btn-danger) { background: #495057; color: #fff; }
.admin-user-actions .btn-small:not(.btn-danger):hover { background: #343a40; }
.admin-user-actions .btn-danger { background: #dc3545; color: #fff; }
.admin-user-actions .btn-danger:hover { background: #c82333; }
.role-badge { display: inline-block; padding: 0.2rem 0.5rem; font-size: 0.75rem; font-weight: 600; border-radius: 4px; text-transform: lowercase; }
.role-badge.role-admin { background: #e7f1ff; color: #0d6efd; }
.role-badge.role-user { background: #e9ecef; color: #495057; }

.delete-user-options { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1rem; }
.delete-option { background: #fff; padding: 1rem 1.25rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid #eee; }
.delete-option h2 { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem 0; }
.delete-option p { margin: 0 0 0.5rem 0; color: #333; }
.reassign-form select { padding: 0.35rem 0.6rem; font-size: 1rem; min-width: 16rem; margin-right: 0.5rem; }
.admin-user-actions a.btn-small { text-decoration: none; display: inline-block; }