/* Randomly Generated Identity – modern, clean UI */
.rgi { --bg:#0b1020; --card:#121938; --muted:#a8b3cf; --text:#e7ecff; --brand:#6ea8fe; --chip:#1a2248; --chipActive:#2743ff; --ok:#23c55e; }
.rgi { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); }
.rgi * { box-sizing: border-box; }
.rgi .rgi-toolbar { background: linear-gradient(180deg, rgba(39,67,255,0.14), transparent); padding: 16px; border-radius: 16px; }
.rgi .rgi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .rgi .rgi-row { grid-template-columns: 1fr; } }

.rgi .rgi-field { display: flex; flex-direction: column; gap: 8px; }
.rgi .rgi-label { font-size: 12px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.rgi .rgi-select { background: var(--chip); border: 1px solid #2a3570; color: var(--text); padding: 10px 12px; border-radius: 12px; }

.rgi .rgi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rgi .chip { background: var(--chip); color: var(--text); border: 1px solid #2a3570; border-radius: 999px; padding: 8px 12px; cursor: pointer; transition: .15s; font-size: 14px; }
.rgi .chip:hover { transform: translateY(-1px); border-color: var(--brand); }
.rgi .chip.chip-active { background: var(--chipActive); border-color: var(--chipActive); }

.rgi .rgi-actions { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.rgi .rgi-btn { background: var(--brand); color: white; border: 0; padding: 10px 14px; border-radius: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 25px rgba(39,67,255,.28); }
.rgi .rgi-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.rgi .rgi-note { color: var(--muted); font-size: 12px; }

.rgi .rgi-card { background: var(--card); border: 1px solid #202a61; border-radius: 18px; padding: 16px; margin-top: 16px; box-shadow: 0 20px 60px rgba(16,24,64,.35); }

.rgi .rgi-profile-head { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.rgi .rgi-avatar { width: 96px; height: 96px; border-radius: 16px; background: #182152; border: 1px solid #2a3570; }
.rgi .rgi-title .rgi-name { font-size: 20px; font-weight: 800; letter-spacing: .2px; }
.rgi .rgi-title .rgi-sub { color: var(--muted); margin-top: 2px; font-size: 13px; }
.rgi .rgi-sub2 { color: var(--muted); margin-top: 6px; font-size: 12px; }

.rgi .rgi-badge { background: rgba(35,197,94,.12); color: #b7ffd1; border: 1px solid rgba(35,197,94,.4); padding: 2px 8px; border-radius: 999px; font-size: 11px; }

.rgi .rgi-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 720px) { .rgi .rgi-grid { grid-template-columns: 1fr; } }

.rgi .rgi-item { background: #0f1633; border: 1px solid #1d275d; padding: 10px 12px; border-radius: 14px; display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: center; }
.rgi .rgi-item .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.rgi .rgi-item .v { font-weight: 600; }

.rgi .rgi-item.rgi-pay { grid-column: span 2; }
@media (max-width: 720px) { .rgi .rgi-item.rgi-pay { grid-column: span 1; } }