.citizen-wrap {
    display: grid;
    gap: 14px;
}

.citizen-auth-shell {
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
}

.citizen-auth-head {
    text-align: center;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #fafdff 0%, #eef6ff 42%, #f8fbff 100%);
    border: 1px solid #d5e3f6;
    border-radius: 20px;
    padding: 18px 20px 16px;
    position: relative;
    overflow: hidden;
}

.citizen-auth-head::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    left: -70px;
    top: -100px;
    background: radial-gradient(circle, rgba(51, 185, 207, 0.2) 0%, rgba(51, 185, 207, 0) 72%);
}

.citizen-auth-head::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -60px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(47, 95, 168, 0.16) 0%, rgba(47, 95, 168, 0) 72%);
}

.citizen-auth-head-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2f5fa8 0%, #1f4c96 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 8px 20px rgba(31, 76, 150, 0.24);
    position: relative;
    z-index: 1;
}

.citizen-auth-main-title {
    margin: 0;
    color: #15325f;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.4;
    position: relative;
    z-index: 1;
    letter-spacing: -0.2px;
}

.citizen-auth-divider {
    width: 120px;
    height: 4px;
    border-radius: 999px;
    margin: 10px auto 8px;
    background: linear-gradient(90deg, rgba(47,95,168,0) 0%, rgba(47,95,168,0.95) 50%, rgba(47,95,168,0) 100%);
    position: relative;
    z-index: 1;
}

.citizen-auth-main-subtitle {
    margin: 7px auto 0;
    color: #5f7595;
    font-size: 1rem;
    max-width: 720px;
    line-height: 1.95;
    position: relative;
    z-index: 1;
}

.citizen-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.citizen-auth-tab {
    border: 1px solid #d3def0;
    background: #f6f9ff;
    color: #2a426a;
    border-radius: 10px;
    padding: 9px 10px;
    font-weight: 700;
}

.citizen-auth-tab.active {
    background: #fff;
    border-color: #2f5fa8;
    color: #1f4c96;
}

.citizen-auth-panel {
    display: none;
}

.citizen-auth-panel.is-active {
    display: block;
}

.citizen-card {
    background: #fff;
    border: 1px solid #dce5f2;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 4px 16px rgba(32, 56, 92, 0.06);
}

.citizen-title {
    margin: 0 0 8px;
    color: #1d2f4b;
    font-size: 1.45rem;
    font-weight: 800;
}

.citizen-muted {
    color: #6c7d97;
    margin: 0;
    line-height: 1.8;
}

.citizen-card-title {
    margin: 0 0 12px;
    color: #26416a;
    font-size: 1.02rem;
    font-weight: 700;
}

.citizen-hero {
    background: linear-gradient(135deg, #f6f9ff 0%, #edf4ff 55%, #f8fbff 100%);
    border-color: #d4def0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.citizen-hero-main {
    flex: 1;
    min-width: 220px;
}

.citizen-hero-pills {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.citizen-hero-pills span {
    background: #fff;
    border: 1px solid #d3dff2;
    color: #27436f;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.76rem;
    font-weight: 600;
}

.citizen-hero-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2f5fa8 0%, #1f4c96 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 8px 20px rgba(31, 76, 150, 0.28);
}

.citizen-auth-card {
    border-top: 4px solid #dce7f7;
}

.citizen-auth-card.is-active {
    border-top-color: #2f5fa8;
}

.citizen-auth-card .citizen-field + .citizen-grid-2,
.citizen-auth-card .citizen-grid-2 + .citizen-field,
.citizen-auth-card .citizen-grid-2 + .citizen-grid-2 {
    margin-top: 8px;
}

.citizen-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.citizen-field {
    display: grid;
    gap: 5px;
}

.citizen-field label {
    font-size: 0.82rem;
    color: #405575;
    font-weight: 600;
}

.citizen-field input,
.citizen-field select,
.citizen-field textarea {
    width: 100%;
    border: 1px solid #ccd7e8;
    border-radius: 10px;
    min-height: 40px;
    padding: 8px 10px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.citizen-field input:focus,
.citizen-field select:focus,
.citizen-field textarea:focus {
    border-color: #2f5fa8;
    box-shadow: 0 0 0 3px rgba(47, 95, 168, 0.16);
    outline: none;
}

.citizen-field textarea {
    min-height: 120px;
    resize: vertical;
}

.citizen-btn {
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #2f5fa8 0%, #1f4c96 100%);
    color: #fff;
    padding: 10px 14px;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(32, 77, 152, 0.28);
    cursor: pointer;
}

.citizen-btn i {
    margin-left: 6px;
}

.citizen-btn-block {
    width: 100%;
    margin-top: 14px;
}

.citizen-link-btn {
    display: inline-block;
    border-radius: 9px;
    background: #f4f8ff;
    border: 1px solid #cfdaeb;
    color: #1f3f74;
    padding: 8px 12px;
    text-decoration: none;
    font-weight: 600;
}

.citizen-link-btn i {
    margin-left: 5px;
}

.citizen-help-text {
    margin: 10px 0 0;
    color: #6f819d;
    font-size: 0.8rem;
    text-align: center;
}

.citizen-auth-row {
    margin: 4px 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.citizen-remember {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #4f6386;
    font-size: 0.82rem;
}

.citizen-auth-link {
    color: #33b9cf;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
}

.citizen-table-wrap {
    overflow-x: auto;
}

.citizen-table {
    width: 100%;
    border-collapse: collapse;
}

.citizen-table th,
.citizen-table td {
    border-bottom: 1px solid #edf1f8;
    padding: 10px 9px;
    font-size: 0.85rem;
    text-align: right;
}

.citizen-table thead th {
    background: #f7faff;
    color: #395377;
    font-weight: 700;
}

.citizen-status {
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.74rem;
    display: inline-block;
    font-weight: 700;
}

.status-pending { background: #fff6e8; color: #946200; }
.status-approved { background: #e8f7ee; color: #1b7a45; }
.status-rejected { background: #fdecec; color: #a12a2a; }
.status-published { background: #e8efff; color: #2547a3; }

@media (max-width: 900px) {
    .citizen-grid-2 {
        grid-template-columns: 1fr;
    }

    .citizen-auth-main-title {
        font-size: 1.55rem;
    }

    .citizen-auth-main-subtitle {
        font-size: 0.9rem;
    }

    .citizen-title {
        font-size: 1.2rem;
    }
}