:root { --ink: #20252e; --muted: #80848b; --line: #e6e7e3; --paper: #fbfbf8; --surface: #fff; --mint: #2f8375; --mint-soft: #e6f5ef; --plum: #4c405c; --plum-dark: #302839; --orange: #d36e45; --shadow: 0 16px 38px rgba(49,43,54,.06); }
* { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.5 Manrope, system-ui, sans-serif; } button, input, select { font: inherit; } button, a { cursor: pointer; }.skip-link { position: fixed; left: 18px; top: 10px; z-index: 5; transform: translateY(-160%); background: var(--plum-dark); color: #fff; padding: 9px 13px; border-radius: 7px; }.skip-link:focus { transform: translateY(0); }
.admin-topbar { min-height: 72px; padding: 0 clamp(18px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(251,251,248,.96); }.brand { color: var(--plum-dark); text-decoration: none; display: flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -.6px; }.brand-mark { height: 25px; width: 27px; display: flex; gap: 3px; align-items: end; }.brand-mark i { display: block; width: 7px; border-radius: 7px 7px 3px 3px; background: #76bca9; transform: rotate(30deg); }.brand-mark i:nth-child(1) { height: 15px; }.brand-mark i:nth-child(2) { height: 23px; background: #a9dacd; }.brand-mark i:nth-child(3) { height: 18px; background: #e2a088; }.top-actions { display: flex; gap: 22px; align-items: center; font-size: 11px; }.top-actions span { color: #9b9d9f; }.top-actions a { color: var(--plum); text-decoration: none; font-weight: 800; }.admin-main { max-width: 1250px; margin: auto; padding: 34px clamp(18px, 5vw, 72px) 60px; }.breadcrumb { display: flex; gap: 10px; color: #9c9e9f; font-size: 11px; margin-bottom: 28px; }.breadcrumb a { color: #85878a; text-decoration: none; }.breadcrumb strong { color: #4c4c53; }.heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }.eyebrow { margin: 0; color: #989c9c; font: 10px 'DM Mono', monospace; letter-spacing: .1em; }.accent { color: var(--mint); }.heading h1 { margin: 10px 0 7px; font-size: clamp(27px, 3vw, 38px); letter-spacing: -1.4px; }.heading p:last-child { margin: 0; color: #85888d; font-size: 13px; }.role-badge { color: #3f806f; background: var(--mint-soft); padding: 7px 11px; border-radius: 999px; font: 10px 'DM Mono', monospace; white-space: nowrap; }.forms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 17px; }.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); padding: 22px 24px; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.panel h2 { margin: 7px 0 0; font-size: 19px; letter-spacing: -.5px; }.step-number { width: 27px; height: 27px; border-radius: 50%; color: var(--mint); background: var(--mint-soft); display: grid; place-items: center; font: 10px 'DM Mono', monospace; }.panel-intro { color: #898c91; font-size: 11px; line-height: 1.55; margin: 13px 0 18px; max-width: 480px; }.panel form { display: grid; gap: 7px; }.panel label { color: #5b5c61; font-size: 10px; font-weight: 800; margin-top: 4px; }.panel input, .panel select { width: 100%; border: 1px solid #dedfdb; border-radius: 7px; padding: 10px 11px; color: var(--ink); background: #fff; outline: none; font-size: 11px; }.panel input:focus, .panel select:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(84,153,137,.12); }.primary-button, .secondary-button { min-height: 38px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; font-size: 11px; font-weight: 800; margin-top: 10px; }.primary-button { border: 0; color: #fff; background: var(--plum); }.secondary-button { border: 1px solid var(--line); color: #5e5a63; background: #fff; }.primary-button:hover { background: #5a4c69; }.secondary-button:hover { border-color: #c8c9c6; }.table-panel { padding-bottom: 26px; }.text-button { border: 0; background: transparent; color: var(--mint); padding: 0; font-size: 10px; font-weight: 800; }.tables-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }.tables-grid h3 { margin: 0 0 9px; color: #5d5f64; font-size: 11px; }.table-wrap { border: 1px solid #ecece8; border-radius: 8px; overflow-x: auto; }.table-wrap table { width: 100%; border-collapse: collapse; min-width: 235px; }.table-wrap th { color: #9a9c9d; font: 9px 'DM Mono', monospace; text-align: left; padding: 10px; border-bottom: 1px solid #efefec; }.table-wrap td { color: #6b6d72; font-size: 10px; padding: 11px 10px; border-bottom: 1px solid #f0f0ed; }.table-wrap tr:last-child td { border-bottom: 0; }.status { color: #5f8f82; }.status.pending { color: #ac795c; }.empty-cell { color: #a0a2a3 !important; text-align: center; padding: 20px 10px !important; }.toast { position: fixed; right: 22px; bottom: 22px; background: var(--plum-dark); color: #fff; border-radius: 7px; padding: 11px 14px; font-size: 11px; box-shadow: 0 12px 28px rgba(0,0,0,.17); transform: translateY(120px); opacity: 0; transition: .22s ease; pointer-events: none; }.toast.show { transform: translateY(0); opacity: 1; }
@media (max-width: 900px) { .tables-grid { grid-template-columns: 1fr; }.table-wrap table { min-width: 0; } }
@media (max-width: 640px) { .admin-topbar { padding: 0 18px; }.top-actions span { display: none; }.admin-main { padding: 25px 16px 40px; }.heading { align-items: flex-start; flex-direction: column; }.forms-grid { grid-template-columns: 1fr; }.panel { padding: 18px; } }
.invite-result { margin-top: 15px; padding: 12px; border: 1px solid #cfe8dc; border-radius: 8px; color: #3e7a6b; background: #f2faf6; font-size: 10px; line-height: 1.5; }.invite-result strong { display: block; font-size: 11px; }.invite-result p { margin: 4px 0 9px; }.invite-result input { margin-top: 0; background: #fff; color: #5c6862; font-size: 10px; }.copy-invite { border: 0; color: var(--mint); background: transparent; padding: 7px 0 0; font-size: 10px; font-weight: 800; }