.page-wrapper {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 0 70px;
}

.section-title {
    margin-bottom: 25px;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
}

/* ---------- Form ---------- */

.modern-form {
    background: #09090b;
    border: 1px solid #27272a;
    border-radius: 18px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 10px 35px rgba(0,0,0,.30);
}

.modern-form table {
    width: 100%;
}

.modern-form th {
    text-align: left;
    padding-bottom: 8px;
    color: #d4d4d8;
    font-weight: 600;
}

.modern-form td {
    padding-bottom: 20px;
}

.modern-form input,
.modern-form select,
.modern-form textarea {
    width: 100%;
    padding: 12px 14px;
    background: #18181b;
    color: #f4f4f5;
    border: 1px solid #3f3f46;
    border-radius: 10px;
    font-size: 14px;
    transition: all .25s ease;
}

.modern-form input:focus,
.modern-form select:focus,
.modern-form textarea:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 4px rgba(56,189,248,.18);
}

.submit-btn {
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

.submit-btn:hover {
    background: #e5e7eb;
}

/* ---------- Table ---------- */

.modern-table-container {
    margin-top: 30px;
    background: #09090b;
    border: 1px solid #27272a;
    border-radius: 18px;
    overflow-x: auto;
    box-shadow: 0 10px 35px rgba(0,0,0,.25);
}

.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.modern-table thead tr {
    background: #111111;
}

.modern-table th {
    padding: 18px 16px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .8px;
    color: #ffffff;
    border-bottom: 1px solid #27272a;
    text-align: left;
    vertical-align: middle;
}

.modern-table th a {
    color: #ffffff;
    text-decoration: none;
    transition: .2s;
}

.modern-table th a:hover {
    color: #38bdf8;
}

.modern-table tbody td {
    padding: 16px;
    vertical-align: middle;
    color: #d4d4d8;
    border-top: 1px solid #1f1f23;
    font-size: .92rem;
}

.modern-table tbody tr {
    transition: .2s;
}

.modern-table tbody tr:hover {
    background: #111827;
}

/* ---------- Badges ---------- */

.gnps-badge,
.smile-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-family: monospace;
    font-size: .8rem;
    word-break: break-word;
}

.gnps-badge {
    background: #172554;
    color: #bfdbfe;
}

.smile-badge {
    background: #18181b;
    color: #e4e4e7;
    border: 1px solid #3f3f46;
}

/* ---------- Score ---------- */

.score-metric {
    background: #16a34a;
    color: white;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    display: inline-block;
}

/* ---------- Structure Images ---------- */

.structure-illustration {
    max-width: 130px;
    height: auto;
    display: inline-block;
    transition: transform .25s ease;
}

.structure-illustration:hover {
    transform: scale(1.15);
}

/* ---------- Pagination ---------- */

.pagination {
    margin-top: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.pagination a {
    color: #38bdf8;
    text-decoration: none;
    font-weight: 600;
    transition: .2s;
}

.pagination a:hover {
    color: #ffffff;
}

.pagination span {
    color: #a1a1aa;
}

/* ---------- Helpers ---------- */

.align-center-cols {
    text-align: center;
}

.no-results {
    margin-top: 25px;
    padding: 20px;
    background: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 12px;
    color: #d4d4d8;
}

.modern-table,
.modern-table thead,
.modern-table tbody,
.modern-table tr,
.modern-table th,
.modern-table td {
    background: transparent;
}

.modern-table {
    background: #09090b;
}

.modern-table thead tr {
    background: #111111;
}

.modern-table tbody tr {
    background: #09090b;
}

.modern-table tbody tr:nth-child(even) {
    background: #0d0d0f;
}

.modern-table tbody tr:hover {
    background: #111827;
}

.modern-table td,
.modern-table th {
    background: transparent;
}

/* ===========================
   LOADING OVERLAY
=========================== */

#loading-overlay{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(6px);

    z-index:9999;

}

.loading-box{

    background:#09090b;

    border:1px solid #27272a;

    border-radius:20px;

    padding:40px;

    text-align:center;

    color:white;

    min-width:320px;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}

.loading-box p{

    margin-top:20px;

    color:#a1a1aa;

    line-height:1.7;

}

/* ===========================
   SPINNER
=========================== */

.spinner{

    width:60px;

    height:60px;

    margin:auto;

    border:5px solid #27272a;

    border-top-color:#38bdf8;

    border-radius:50%;

    animation:spin .9s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ===========================
   IFRAME
=========================== */

.iframe-container{

    padding:0;

    overflow:hidden;

}

.iframe-container iframe{

    display:block;

    width:100%;

    border:none;

    background:white;

}

/* ===========================
   NO-RESULTS
=========================== */

.no-results{
    max-width:700px;
    margin:40px auto;
    padding:28px 32px;
    text-align:center;

    background:rgba(30,41,59,.35);
    border:1px solid rgba(59,130,246,.35);
    border-radius:16px;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    box-shadow:
        0 8px 30px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.no-results h3{
    margin:0 0 12px;
    color:#f8fafc;
    font-size:1.5rem;
    font-weight:600;
}

.no-results p{
    margin:0;
    color:#a1a1aa;
    font-size:1rem;
    line-height:1.6;
}