/* components.css - All UI components */

/* Login */
#loginScreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #001a38 0%, #002d5c 50%, #004b9e 100%);
    transition: opacity .4s, visibility .4s;
}

#loginScreen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 15% 85%, rgba(0,180,216,.18) 0%, transparent 55%),
                radial-gradient(ellipse 50% 70% at 85% 15%, rgba(244,131,31,.14) 0%, transparent 55%);
    pointer-events: none;
}

#loginScreen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.lc {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 24px;
    padding: 2.6rem 2.2rem 2rem;
    width: 400px;
    max-width: 92vw;
    box-shadow: 0 40px 100px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
    animation: lc-in .5s cubic-bezier(.16,1,.3,1);
}

@keyframes lc-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.lc-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.lc-logo {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--orange), var(--amber));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 8px 24px rgba(244,131,31,.45);
}

.lc-title {
    font-size: 1.55rem;
    font-weight: 900;
    color: var(--navy);
    text-align: center;
    letter-spacing: -.02em;
}

.lc-sub {
    font-size: .8rem;
    color: var(--tx2);
    text-align: center;
    margin-top: 3px;
    margin-bottom: 1.6rem;
}

.lc-field {
    margin-bottom: 1rem;
}

.lc-field label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--tx2);
    margin-bottom: 5px;
}

.lc-field input {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: 'Cairo', sans-serif;
    font-size: .9rem;
    color: var(--tx);
    background: var(--surf2);
    outline: none;
    transition: all .18s;
}

.lc-field input:focus {
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,119,182,.1);
}

.lc-btn {
    width: 100%;
    margin-top: .6rem;
    padding: 13px;
    background: linear-gradient(135deg, var(--orange), var(--amber));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: .02em;
    box-shadow: 0 4px 18px rgba(244,131,31,.4);
    transition: all .2s cubic-bezier(.16,1,.3,1);
}

.lc-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(244,131,31,.5);
}

#li-err {
    color: var(--red);
    font-size: .8rem;
    text-align: center;
    min-height: 18px;
    margin-top: .6rem;
    font-weight: 600;
}

.lc-hint {
    margin-top: 1.1rem;
    padding-top: .9rem;
    border-top: 1px solid #eef3fa;
    text-align: center;
    font-size: .73rem;
    color: var(--tx3);
}

.lc-hint button {
    background: none;
    border: none;
    color: var(--blue);
    font-family: 'Cairo', sans-serif;
    font-size: .73rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

/* Page Header */
.ph {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.3rem;
    gap: .8rem;
    flex-wrap: wrap;
}

.ph-t {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--navy);
    letter-spacing: -.02em;
    line-height: 1.2;
}

.ph-s {
    font-size: .78rem;
    color: var(--tx2);
    margin-top: 2px;
}

.ph-a {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border-radius: var(--r-sm);
    border: none;
    font-family: 'Cairo', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--orange), #e07010);
    color: #fff;
    box-shadow: 0 2px 8px rgba(244,131,31,.3);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(244,131,31,.4);
}

.btn-blue {
    background: linear-gradient(135deg, var(--navy), var(--blue));
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,119,182,.2);
}

.btn-blue:hover {
    transform: translateY(-1px);
}

.btn-ghost {
    background: var(--surf3);
    color: var(--tx2);
    border: 1.5px solid var(--border);
}

.btn-ghost:hover {
    color: var(--navy);
    border-color: var(--blue);
}

.btn-danger {
    background: var(--red);
    color: #fff;
}

.btn-sm {
    padding: 5px 11px;
    font-size: .74rem;
    border-radius: 7px;
}

.btn-xs {
    padding: 3px 8px;
    font-size: .68rem;
    border-radius: 6px;
}

/* Pipeline */
.pipeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin-bottom: 1.2rem;
}

.pipe-card {
    background: var(--surf);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: .9rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--sh1);
    transition: all .2s;
}

.pipe-card:hover {
    box-shadow: var(--sh2);
    transform: translateY(-2px);
}

.pipe-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.pc-total::after {
    background: var(--tx3);
}

.pc-review::after {
    background: var(--yellow);
}

.pc-accept::after {
    background: var(--green);
}

.pc-reject::after {
    background: var(--red);
}

.pipe-num {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
}

.pipe-lbl {
    font-size: .72rem;
    color: var(--tx2);
    font-weight: 600;
    margin-top: 3px;
}

.pc-total .pipe-num {
    color: var(--navy);
}

.pc-review .pipe-num {
    color: var(--yellow);
}

.pc-accept .pipe-num {
    color: var(--green);
}

.pc-reject .pipe-num {
    color: var(--red);
}

/* Stats Cards */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin-bottom: 1.2rem;
}

.stat {
    background: var(--surf);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1rem 1.1rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--sh1);
    transition: all .2s;
}

.stat:hover {
    box-shadow: var(--sh2);
    transform: translateY(-2px);
}

.stat-ico {
    position: absolute;
    top: .9rem;
    left: .9rem;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.stat-lbl {
    font-size: .72rem;
    color: var(--tx2);
    font-weight: 600;
    margin-bottom: 4px;
}

.stat-num {
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
}

.stat-foot {
    font-size: .68rem;
    color: var(--tx3);
    margin-top: 4px;
}

.stat-bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Stat colors */
.s-bl .stat-bar {
    background: var(--blue);
}
.s-bl .stat-num {
    color: var(--blue);
}
.s-bl .stat-ico {
    background: rgba(0,119,182,.1);
    color: var(--blue);
}

.s-gr .stat-bar {
    background: var(--green);
}
.s-gr .stat-num {
    color: var(--green);
}
.s-gr .stat-ico {
    background: rgba(10,153,112,.1);
    color: var(--green);
}

.s-or .stat-bar {
    background: var(--orange);
}
.s-or .stat-num {
    color: var(--orange);
}
.s-or .stat-ico {
    background: rgba(244,131,31,.1);
    color: var(--orange);
}

.s-rd .stat-bar {
    background: var(--red);
}
.s-rd .stat-num {
    color: var(--red);
}
.s-rd .stat-ico {
    background: rgba(214,40,40,.1);
    color: var(--red);
}

/* Cards */
.card {
    background: var(--surf);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh1);
}

.card-h {
    padding: .75rem 1.1rem;
    background: var(--surf2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: .84rem;
    font-weight: 800;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-b {
    padding: 1.1rem;
}

/* Charts */
.chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    margin-bottom: 1.2rem;
}

.mc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.mc-lbl {
    width: 80px;
    font-size: .72rem;
    color: var(--tx2);
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
}

.mc-track {
    flex: 1;
    background: var(--surf3);
    border-radius: 99px;
    height: 7px;
    overflow: hidden;
}

.mc-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .8s cubic-bezier(.16,1,.3,1);
}

.mc-val {
    width: 30px;
    text-align: left;
    font-size: .74rem;
    font-weight: 800;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
    padding: 0 .2rem;
}

.bc-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.bc-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    min-height: 3px;
    background: linear-gradient(180deg, var(--sky), var(--blue));
    transition: height .8s cubic-bezier(.16,1,.3,1);
    cursor: pointer;
    position: relative;
}

.bc-bar:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100%+4px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--navy);
    color: #fff;
    font-size: .63rem;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: 'Cairo', sans-serif;
    pointer-events: none;
}

.bc-lbl {
    font-size: .62rem;
    color: var(--tx3);
    font-weight: 600;
    white-space: nowrap;
}

/* Tables */
.tw {
    background: var(--surf);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh1);
}

.tb-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem .9rem;
    border-bottom: 1px solid var(--border);
    background: var(--surf2);
    flex-wrap: wrap;
}

.sr-wrap {
    flex: 1;
    min-width: 160px;
    position: relative;
}

.sr-wrap input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: .8rem;
    color: var(--tx);
    background: var(--surf);
    outline: none;
    transition: all .18s;
}

.sr-wrap input:focus {
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0,119,182,.08);
}

.sr-wrap::before {
    content: '🔍';
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .73rem;
    pointer-events: none;
}

.fsel {
    padding: 7px 10px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: .78rem;
    color: var(--tx);
    background: var(--surf);
    outline: none;
    cursor: pointer;
    transition: border-color .18s;
}

.fsel:focus {
    border-color: var(--blue);
}

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

thead {
    background: linear-gradient(90deg, var(--navy) 0%, #0a3d6e 100%);
}

th {
    padding: 9px 11px;
    text-align: right;
    font-size: .7rem;
    font-weight: 700;
    color: rgba(255,255,255,.88);
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,.07);
    letter-spacing: .02em;
}

td {
    padding: 9px 11px;
    font-size: .79rem;
    border-bottom: 1px solid var(--border);
    color: var(--tx);
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: none;
}

tbody tr:hover td {
    background: rgba(0,119,182,.025);
}

/* Pagination */
.pag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .9rem;
    border-top: 1px solid var(--border);
    font-size: .73rem;
    color: var(--tx2);
    background: var(--surf2);
}

.pag-bs {
    display: flex;
    gap: 3px;
}

.pb {
    min-width: 26px;
    height: 26px;
    background: var(--surf);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-size: .72rem;
    color: var(--tx2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.pb:hover, .pb.on {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: .67rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid;
}

.b-gr {
    background: rgba(10,153,112,.09);
    color: #067a56;
    border-color: rgba(10,153,112,.2);
}

.b-rd {
    background: rgba(214,40,40,.09);
    color: var(--red);
    border-color: rgba(214,40,40,.18);
}

.b-yw {
    background: rgba(233,185,73,.13);
    color: #8a6200;
    border-color: rgba(233,185,73,.28);
}

.b-bl {
    background: rgba(0,119,182,.09);
    color: var(--blue);
    border-color: rgba(0,119,182,.18);
}

.b-gy {
    background: var(--surf3);
    color: var(--tx3);
    border-color: var(--border);
}

.b-or {
    background: rgba(244,131,31,.09);
    color: #b55a00;
    border-color: rgba(244,131,31,.2);
}

.b-nv {
    background: rgba(0,45,92,.08);
    color: var(--navy);
    border-color: rgba(0,45,92,.15);
}

/* Modals */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,20,50,.6);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.overlay.open {
    display: flex;
}

.modal {
    background: var(--surf);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 1.7rem;
    width: 660px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--sh4);
    animation: mi .28s cubic-bezier(.16,1,.3,1);
}

.modal-sm {
    width: 440px;
}

@keyframes mi {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.mh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--border);
}

.mh-t {
    font-size: 1rem;
    font-weight: 900;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mh-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--orange), var(--amber));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}

.mx {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--surf3);
    border: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    color: var(--tx2);
    transition: all .18s;
    flex-shrink: 0;
}

.mx:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.fg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
}

.fg.g1 {
    grid-template-columns: 1fr;
}

.fi {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fi.full {
    grid-column: 1/-1;
}

.fi label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--tx2);
}

.fi input, .fi select, .fi textarea {
    background: var(--surf2);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 8px 11px;
    font-family: 'Cairo', sans-serif;
    font-size: .83rem;
    color: var(--tx);
    outline: none;
    transition: all .18s;
}

.fi input:focus, .fi select:focus, .fi textarea:focus {
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0,119,182,.08);
}

.fi textarea {
    resize: vertical;
    min-height: 60px;
}

.mf {
    display: flex;
    gap: 7px;
    justify-content: flex-end;
    margin-top: 1.2rem;
    padding-top: .85rem;
    border-top: 1px solid var(--border);
}

/* Confirm Modal */
.cfbox {
    background: var(--surf);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 2rem 1.7rem;
    width: 360px;
    max-width: 92vw;
    text-align: center;
    box-shadow: var(--sh4);
    animation: mi .28s cubic-bezier(.16,1,.3,1);
}

.cf-ico {
    font-size: 2.8rem;
    margin-bottom: .7rem;
    display: block;
}

.cf-t {
    font-size: 1rem;
    font-weight: 900;
    color: var(--navy);
    margin-bottom: .35rem;
}

.cf-m {
    font-size: .81rem;
    color: var(--tx2);
    margin-bottom: 1.3rem;
    line-height: 1.6;
}

.cf-a {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Payments Status Bar */
.ps-bar {
    display: flex;
    gap: .7rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.ps-item {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--surf);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: .75rem .9rem;
    flex: 1;
    min-width: 130px;
    box-shadow: var(--sh1);
    transition: all .2s;
}

.ps-item:hover {
    box-shadow: var(--sh2);
    transform: translateY(-1px);
}

.ps-ico {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.ps-n {
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
}

.ps-l {
    font-size: .67rem;
    color: var(--tx2);
    margin-top: 1px;
    font-weight: 600;
}

/* Reports */
.rpt-sum {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin-bottom: 1.2rem;
}

.rs-c {
    background: var(--surf);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1rem;
    text-align: center;
    box-shadow: var(--sh1);
    transition: all .2s;
}

.rs-c:hover {
    box-shadow: var(--sh2);
    transform: translateY(-1px);
}

.rs-n {
    font-size: 1.65rem;
    font-weight: 900;
    margin: .25rem 0;
    letter-spacing: -.03em;
}

.rs-l {
    font-size: .7rem;
    color: var(--tx2);
    font-weight: 600;
}

/* Alerts */
.al-box {
    background: var(--surf);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1rem 1.1rem;
    margin-bottom: .9rem;
    box-shadow: var(--sh1);
}

.al-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: .79rem;
}

.al-item:last-child {
    border-bottom: none;
}

.al-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Admin / Users */
.toggle {
    position: relative;
    width: 40px;
    height: 21px;
    flex-shrink: 0;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ttrack {
    position: absolute;
    inset: 0;
    background: var(--surf3);
    border: 1.5px solid var(--border);
    border-radius: 99px;
    cursor: pointer;
    transition: all .2s;
}

.ttrack::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    top: 1px;
    right: 1px;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.toggle input:checked + .ttrack {
    background: var(--blue);
    border-color: var(--blue);
}

.toggle input:checked + .ttrack::after {
    transform: translateX(-19px);
}

.perm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.perm-row:last-child {
    border-bottom: none;
}

.perm-lbl {
    font-size: .8rem;
    font-weight: 600;
    color: var(--tx);
}

.perm-hint {
    font-size: .69rem;
    color: var(--tx3);
    font-weight: 400;
    margin-right: 3px;
}

.perms-panel {
    background: var(--surf2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: .9rem;
    margin-top: .5rem;
}

.pp-t {
    font-size: .76rem;
    font-weight: 800;
    color: var(--tx2);
    margin-bottom: .6rem;
}

.role-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}

.rb {
    padding: 5px 12px;
    border-radius: 7px;
    font-family: 'Cairo', sans-serif;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid;
    transition: all .18s;
}

.rb-a {
    border-color: var(--orange);
    color: var(--orange);
    background: rgba(244,131,31,.05);
}

.rb-a:hover {
    background: var(--orange);
    color: #fff;
}

.rb-e {
    border-color: var(--blue);
    color: var(--blue);
    background: rgba(0,119,182,.05);
}

.rb-e:hover {
    background: var(--blue);
    color: #fff;
}

.rb-v {
    border-color: var(--tx3);
    color: var(--tx2);
    background: var(--surf3);
}

.rb-v:hover {
    background: var(--tx3);
    color: #fff;
}

.user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .9rem;
    margin-bottom: 1.2rem;
}

.uc {
    background: var(--surf);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.1rem;
    box-shadow: var(--sh1);
    transition: all .2s;
}

.uc:hover {
    box-shadow: var(--sh2);
    border-color: var(--border);
}

.uc-top {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: .8rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--border);
}

.uc-av {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
}

.uc-nm {
    font-size: .88rem;
    font-weight: 800;
    color: var(--navy);
}

.uc-un {
    font-size: .7rem;
    color: var(--tx2);
    margin-top: 1px;
}

.uc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: auto;
    flex-shrink: 0;
}

.uc-dot.on {
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(10,153,112,.18);
}

.uc-dot.off {
    background: var(--tx3);
}

.pchips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin-bottom: .7rem;
}

.pchip {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: .67rem;
    font-weight: 700;
    border: 1px solid;
}

.pchip.on {
    background: rgba(0,119,182,.07);
    color: var(--blue);
    border-color: rgba(0,119,182,.15);
}

.pchip.off {
    background: var(--surf3);
    color: var(--tx3);
    border-color: var(--border);
    text-decoration: line-through;
    opacity: .5;
}

.log-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 1.1rem;
    border-bottom: 1px solid var(--border);
    font-size: .77rem;
}

.log-item:last-child {
    border-bottom: none;
}

.log-ic {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    background: var(--surf3);
    flex-shrink: 0;
}

.log-tx {
    flex: 1;
    color: var(--tx);
}

.log-tm {
    font-size: .68rem;
    color: var(--tx3);
}

/* Empty State */
.empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--tx3);
}

.empty .ei {
    font-size: 2.4rem;
    margin-bottom: .6rem;
    opacity: .3;
    display: block;
}

.empty p {
    font-size: .82rem;
}

/* Email Notifications */
.notif-panel {
    background: var(--surf2);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.2rem;
    margin-bottom: 1.2rem;
}

.notif-panel.active-panel {
    border-color: rgba(0,119,182,.3);
    background: rgba(0,119,182,.03);
}

.notif-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.notif-row:last-child {
    border-bottom: none;
}

.notif-lbl {
    font-size: .83rem;
    font-weight: 600;
    color: var(--tx);
}

.notif-hint {
    font-size: .7rem;
    color: var(--tx3);
    margin-top: 2px;
}

.ej-key-field {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
    margin-bottom: .8rem;
}

.ej-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 700;
}

.ej-ok {
    background: rgba(10,153,112,.1);
    color: var(--green);
    border: 1px solid rgba(10,153,112,.2);
}

.ej-off {
    background: rgba(214,40,40,.1);
    color: var(--red);
    border: 1px solid rgba(214,40,40,.2);
}

.ej-pending {
    background: rgba(233,185,73,.1);
    color: #8a6200;
    border: 1px solid rgba(233,185,73,.25);
}

.notif-test-btn {
    padding: 5px 12px;
    border-radius: 7px;
    font-family: 'Cairo', sans-serif;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid var(--blue);
    color: var(--blue);
    background: rgba(0,119,182,.05);
    transition: all .18s;
}

.notif-test-btn:hover {
    background: var(--blue);
    color: #fff;
}

/* Scorecard Styles (New Redesign) */
:root {
  --b9:#060f24; --b8:#0a2252; --b7:#0e3070; --b6:#1549a8; --b5:#1d5fcc; --b4:#3278e4; --b3:#5d9af0; --b1:#ccdeff; --b0:#eef4ff;
  --or:#f47b20; --or2:#e06510; --orl:#fff4eb;
  --gr:#0fa868; --grl:#e8faf3;
  --ye:#d49508; --yel:#fef8e0;
  --re:#d63535; --rel:#fdeaea;
  --ink:#071428; --mu:#5872a0; --bo:#c8d9f5; --bof:#ddeaff;
  --sc-rad:16px;
}

.sc-page { width:100%; display:flex; flex-direction:column; gap:0; font-family:'IBM Plex Sans Arabic', sans-serif; }

/* HEADER */
.hdr {
  background: linear-gradient(145deg, var(--b9) 0%, var(--b8) 40%, var(--b7) 75%, #163d8a 100%);
  border-radius: var(--sc-rad) var(--sc-rad) 0 0;
  padding: 1.5rem 1.5rem 1.2rem;
  position: relative;
  overflow: hidden;
}
.hdr-orb1{position:absolute;top:-70px;right:-50px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(244,123,32,.22) 0%,transparent 65%);pointer-events:none;}
.hdr-orb2{position:absolute;bottom:-80px;left:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(50,120,228,.12) 0%,transparent 65%);pointer-events:none;}
.hdr-inner{position:relative;z-index:2;}
.hdr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;}
.sc-brand{display:flex;flex-direction:column;gap:.3rem;}
.sc-brand-row{display:flex;align-items:center;gap:.7rem;}
.sc-brand-icon{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--or),#f9a55a);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;box-shadow:0 4px 12px rgba(244,123,32,.4);
}
.sc-brand-name{font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1;}
.sc-brand-name em{color:var(--or);font-style:normal;}
.sc-brand-sub{font-family:'IBM Plex Mono',monospace;font-size:.5rem;letter-spacing:.2em;color:rgba(255,255,255,.3);text-transform:uppercase;padding-right:.4rem;}
.hdr-badge{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  padding:.5rem .9rem;
  border-radius:10px;
  text-align:center;
}
.hdr-badge-top{font-family:'IBM Plex Mono',monospace;font-size:.45rem;letter-spacing:.12em;color:var(--or);text-transform:uppercase;margin-bottom:.1rem;}
.hdr-badge-main{font-size:.7rem;font-weight:700;color:#fff;line-height:1.2;}
.hdr-divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);margin:1rem 0;}
.hdr-title-row{display:flex;align-items:center;gap:1rem;}
.hdr-title-ar{font-size:.95rem;font-weight:600;color:rgba(255,255,255,.85);flex:1;}
.hdr-pills{display:flex;gap:.4rem;}
.hdr-pill{font-family:'IBM Plex Mono',monospace;font-size:.45rem;letter-spacing:.1em;color:rgba(255,255,255,.35);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:.2rem .5rem;border-radius:99px;text-transform:uppercase;}
.hdr-bar{height:3px;background:linear-gradient(90deg,var(--or2),var(--or),#ffb05a,var(--or),var(--or2));}

/* RECRUITER STRIP */
.rec-strip{
  background:#fff;
  border-right:1px solid var(--bo);border-left:1px solid var(--bo);
  padding:.7rem 1.2rem;
  display:flex;align-items:center;gap:.8rem;
  border-bottom:1px solid var(--bof);
}
.rec-icon{
  width:32px;height:32px;border-radius:8px;
  background:var(--b0);border:1.5px solid var(--bo);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;flex-shrink:0;
}
.rec-label{font-size:.7rem;font-weight:700;color:var(--mu);letter-spacing:.04em;white-space:nowrap;}
.rec-input{
  flex:1;border:none;border-bottom:1.5px solid var(--bof);
  background:transparent;
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:.85rem;font-weight:500;color:var(--ink);
  padding:.2rem .3rem;outline:none;transition:border-color .2s;
}
.rec-input:focus{border-color:var(--b4);}
.rec-input::placeholder{color:#bbc8df;font-weight:400;}

/* PROGRESS */
.prog-wrap{
  background:#fff;
  border-right:1px solid var(--bo);border-left:1px solid var(--bo);
  padding:.7rem 1.2rem;
  border-bottom:2px solid var(--bof);
}
.prog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem;}
.prog-label{font-size:.65rem;font-weight:700;color:var(--mu);letter-spacing:.06em;text-transform:uppercase;}
.prog-count{font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:var(--b5);font-weight:600;}
.prog-bar-bg{height:4px;background:var(--b0);border-radius:99px;overflow:hidden;}
.prog-bar-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--or),var(--b4));transition:width .5s ease;}
.prog-steps{display:flex;align-items:center;gap:.3rem;margin-top:.6rem;}
.ps{
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--bo);background:var(--b0);
  font-family:'IBM Plex Mono',monospace;font-size:.55rem;font-weight:700;color:var(--mu);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .3s;
}
.ps.active{background:var(--b5);border-color:var(--b5);color:#fff;box-shadow:0 0 0 4px rgba(29,95,204,.15);}
.ps.done{background:var(--gr);border-color:var(--gr);color:#fff;}
.pl{flex:1;height:2px;background:var(--b1);border-radius:99px;overflow:hidden;position:relative;}
.pl-f{position:absolute;top:0;right:0;height:100%;width:0%;background:var(--gr);transition:width .4s;}

/* BODY */
.sc-body{
  background:var(--bg);
  border-right:1px solid var(--bo);border-left:1px solid var(--bo);
  padding:1rem;
  display:flex;flex-direction:column;gap:.8rem;
}

/* SECTION */
.sec {
  background:#fff;
  border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  overflow:hidden;
  transition:all .25s;
  border:1.5px solid rgba(200,217,245,.5);
  padding: 0 !important; /* Override existing padding */
  margin-bottom: 0 !important;
}
.sec:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);}
.sec.done{border-color:rgba(15,168,104,.25);}
.sec.done .sec-num-bg{background:linear-gradient(160deg,var(--gr),#0b8a56);}
.sec-head{display:flex;align-items:stretch;}
.sec-num-bg{
  background:linear-gradient(160deg,var(--b5),var(--b8));
  width:50px;min-width:50px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
  position:relative;overflow:hidden;
}
.sec-num-bg::after{content:'';position:absolute;top:-20px;right:-20px;width:55px;height:55px;border-radius:50%;background:rgba(255,255,255,.05);}
.sec-n{font-family:'IBM Plex Mono',monospace;font-size:.9rem;font-weight:700;color:#fff;line-height:1;}
.sec-n-sub{font-family:'IBM Plex Mono',monospace;font-size:.4rem;letter-spacing:.04em;color:rgba(255,255,255,.4);text-transform:uppercase;}
.sec-meta{padding:.6rem .9rem;flex:1;}
.sec-en{font-family:'IBM Plex Mono',monospace;font-size:.5rem;letter-spacing:.12em;color:var(--b4);text-transform:uppercase;margin-bottom:.1rem;}
.sec-ar{font-size:.85rem;font-weight:700;color:var(--ink);}
.sec-chk-wrap{display:flex;align-items:center;padding-left:.8rem;padding-right:.1rem;}
.sec-chk{
  width:26px;height:26px;border-radius:50%;
  background:var(--gr);color:#fff;font-size:.75rem;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(15,168,104,.35);
}
.sec.done .sec-chk{display:flex;}
.sec-desc{
  padding:.4rem .9rem .5rem;font-size:.7rem;color:var(--mu);line-height:1.5;
  border-top:1px solid #f0f4fc;background:linear-gradient(180deg,#fafcff, #fff);
}
.chips-zone{padding:.5rem .9rem .8rem;border-top:1px solid #f0f4fc;}
.chips-hint{font-size:.55rem;font-weight:700;color:var(--mu);letter-spacing:.07em;text-transform:uppercase;margin-bottom:.4rem;display:flex;align-items:center;gap:.3rem;}
.chips-hint::after{content:'';flex:1;height:1px;background:var(--bof);}
.chips{display:flex;flex-wrap:wrap;gap:.3rem;}
.chip {
  display:flex;align-items:center;gap:.3rem;
  padding:.35rem .7rem .35rem .35rem;
  border-radius:99px;border:1.5px solid var(--bo);background:var(--b0);
  cursor:pointer;transition:all .15s;
  user-select:none;position:relative;overflow:hidden;
  flex: none; min-width: auto; height: auto;
}
.chip:hover{border-color:var(--b4);background:var(--b1);transform:translateY(-1px);}
.chip.on {
  background:linear-gradient(135deg,var(--b5),var(--b6));
  border-color:var(--b5);box-shadow:0 4px 12px rgba(29,95,204,.3);
  color:#fff; transform:translateY(-1px);
}
.chip-n{
  width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.2);color:var(--b7);
  font-family:'IBM Plex Mono',monospace;font-size:.55rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.chip.on .chip-n{background:var(--or);color:#fff;box-shadow:0 2px 6px rgba(244,123,32,.35);}
.chip-t{font-size:.75rem;font-weight:500;color:var(--ink);transition:color .15s;}
.chip.on .chip-t{color:#fff;font-weight:600;}

.sec-score-bar{
  display:none;align-items:center;gap:.5rem;
  padding:.4rem .9rem;
  background:linear-gradient(90deg,var(--grl),#fff);
  border-top:1px solid rgba(15,168,104,.12);
  opacity: 1; transform: none; /* Override old anim */
}
.sec.done .sec-score-bar{display:flex;}
.ssb-label{font-size:.62rem;font-weight:600;color:var(--gr);}
.ssb-stars{display:flex;gap:.1rem; color: var(--or); font-size: .7rem;}
.ssb-val{margin-right:auto;font-family:'IBM Plex Mono',monospace;font-size:.65rem;font-weight:700;color:var(--gr);}

/* TOTAL */
.tot-card{
  background:#fff;border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);overflow:hidden;
  border:1.5px solid var(--b1);transition:border-color .4s;
  color: var(--ink); /* Override navy */
}
.tot-card.live{border-color:var(--b4);}
.tot-topbar{height:4px;background:#e0eafc;position:relative;overflow:hidden;}
.tot-topbar-fill{position:absolute;top:0;right:0;height:100%;width:0%;background:linear-gradient(90deg,var(--or),#f9b060,var(--b4));transition:width .6s ease;}
.tot-body{display:flex; padding: 0 !important;}
.tot-left{padding:1.1rem 1.3rem;flex:1;}
.tot-sub{font-size:.58rem;font-weight:700;color:var(--mu);letter-spacing:.07em;text-transform:uppercase;margin-bottom:.15rem;}
.tot-status{font-size:.82rem;font-weight:500;color:var(--mu);min-height:1.2rem;line-height:1.4;}
.tot-track{height:6px;background:var(--b0);border-radius:99px;overflow:hidden;margin:.8rem 0 .7rem;}
.tot-track-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--or),var(--b4));transition:width .6s ease;}
.vp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;}
.vp{border-radius:9px;padding:.5rem .2rem;text-align:center;border:2px solid transparent;transition:all .3s;opacity:.25; background: none; flex: none;}
.vp.on{opacity:1;transform:scale(1.05) translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1);}
.vp-r{font-family:'IBM Plex Mono',monospace;font-size:.5rem;font-weight:700;margin-bottom:.2rem; opacity: 1;}
.vp-l{font-size:.7rem;font-weight:800;}
.vp-re{background:var(--rel);border-color:#f0b0b0;} .vp-re .vp-r,.vp-re .vp-l{color:var(--re);}
.vp-ye{background:var(--yel);border-color:#f0d888;} .vp-ye .vp-r,.vp-ye .vp-l{color:var(--ye);}
.vp-bl{background:var(--b0);border-color:var(--b1);}  .vp-bl .vp-r,.vp-bl .vp-l{color:var(--b5);}
.vp-gr{background:var(--grl);border-color:#a8e8cc;} .vp-gr .vp-r,.vp-gr .vp-l{color:var(--gr);}
.tot-right{
  background:linear-gradient(160deg,var(--b9) 0%,var(--b8) 100%);
  min-width:110px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.8rem;gap:.05rem;position:relative;overflow:hidden;
  border-right: none; text-align: center;
}
.tot-right::before{content:'';position:absolute;top:-35px;left:-35px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(244,123,32,.12),transparent 70%);}
.tot-num{font-family:'IBM Plex Mono',monospace;font-size:3.2rem;font-weight:700;color:rgba(255,255,255,.12);line-height:1;transition:color .4s;position:relative;z-index:1;}
.tot-den{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:rgba(255,255,255,.18);position:relative;z-index:1;margin-top:.05rem; opacity: 1;}

/* BLOCKS */
.blk{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);overflow:hidden;border:1.5px solid rgba(200,217,245,.5); margin-bottom: 0 !important;}
.blk-hd{padding:.6rem 1.1rem;background:linear-gradient(135deg,var(--b9) 0%,var(--b8) 100%);display:flex;justify-content:space-between;align-items:center;}
.blk-hd-ar{font-size:.85rem;font-weight:700;color:#fff;}
.blk-hd-en{font-family:'IBM Plex Mono',monospace;font-size:.45rem;letter-spacing:.12em;color:var(--or);text-transform:uppercase;}

/* DECISION */
.dec-list{padding:.4rem .7rem; display: flex; flex-direction: column; gap: 0;}
.dec-item{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem .5rem;border-radius:9px;cursor:pointer;
  transition:all .15s;
  border-bottom:1px solid #f2f5ff;
  border-left: 1.5px solid transparent; border-right: 1.5px solid transparent; border-top: 1.5px solid transparent; /* Reset */
  background: none;
}
.dec-item:last-child{border-bottom:none;}
.dec-item:hover{background:var(--b0);}
.dec-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--bo);background:white;display:flex;align-items:center;justify-content:center;flex-shrink:0; transition: all .2s;}
.dec-dot{width:8px;height:8px;border-radius:50%;background:#fff;opacity:0;transform:scale(0);transition:all .2s;}
.dec-item.on .dec-dot{opacity:1;transform:scale(1);}
.dec-item.on[data-dec="send"] .dec-radio{background:var(--gr);border-color:var(--gr);box-shadow:0 2px 8px rgba(15,168,104,.3);}
.dec-item.on[data-dec="send"] .dec-lbl{color:var(--gr);font-weight:700;}
.dec-item.on[data-dec="keep"] .dec-radio{background:var(--ye);border-color:var(--ye);box-shadow:0 2px 8px rgba(212,149,8,.3);}
.dec-item.on[data-dec="keep"] .dec-lbl{color:var(--ye);font-weight:700;}
.dec-item.on[data-dec="reject"] .dec-radio{background:var(--re);border-color:var(--re);box-shadow:0 2px 8px rgba(214,53,53,.3);}
.dec-item.on[data-dec="reject"] .dec-lbl{color:var(--re);font-weight:700;}
.dec-emoji{font-size:.95rem;width:24px;text-align:center;flex-shrink:0;}
.dec-info{display:flex;flex-direction:column;gap:.04rem;}
.dec-lbl{font-size:.82rem;color:var(--ink);transition:color .2s;}
.dec-sub{font-size:.62rem;color:var(--mu);}

/* NOTES */
.notes-wrap{position:relative;}
.notes-ta{
  width:100%;padding:.8rem 1.1rem;min-height:80px;border:none;
  background:#fff;font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:.82rem;color:var(--ink);resize:vertical;outline:none;line-height:1.6;transition:background .2s;
}
.notes-ta:focus{background:#fafcff;}
.notes-ta::placeholder{color:#c0ccdf;}
.notes-count{position:absolute;bottom:.4rem;left:.9rem;font-family:'IBM Plex Mono',monospace;font-size:.52rem;color:var(--mu);pointer-events:none;}

/* SIGNATURE */
.sig-block{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);overflow:hidden;border:1.5px solid rgba(200,217,245,.5);}
.sig-hd{padding:.6rem 1.1rem;background:linear-gradient(90deg,var(--b0),#fff);border-bottom:1px solid var(--bof);display:flex;justify-content:space-between;align-items:center;}
.sig-hd-ar{font-size:.75rem;font-weight:700;color:var(--b6);}
.sig-hd-en{font-family:'IBM Plex Mono',monospace;font-size:.45rem;letter-spacing:.12em;color:var(--mu);text-transform:uppercase;}
.sig-grid{padding:.9rem 1.2rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.sf{display:flex;flex-direction:column;gap:.3rem;}
.sf-lbl{font-size:.6rem;font-weight:700;color:var(--mu);letter-spacing:.05em;text-transform:uppercase;}
.sf-in{
  border:none;border-bottom:1.5px solid var(--bof);background:transparent;
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:.85rem;font-weight:500;color:var(--ink);
  padding:.2rem .1rem;outline:none;transition:border-color .2s;
}
.sf-in:focus{border-color:var(--b4);}
.sf-in::placeholder{color:#c4d0e8;font-weight:400;}

/* FOOTER */
.sc-footer{
  background:linear-gradient(135deg,var(--b9),var(--b8));
  border-radius:0 0 12px 12px;
  border-top:3px solid var(--or);
  padding:.7rem 1.5rem;
  display:flex;justify-content:space-between;align-items:center;
  margin-top: 0 !important;
}
.sc-foot-brand{font-size:.9rem;font-weight:800;color:#fff;letter-spacing:-.02em;}
.sc-foot-brand em{color:var(--or);font-style:normal;}
.sc-foot-en{font-family:'IBM Plex Mono',monospace;font-size:.45rem;letter-spacing:.12em;color:rgba(255,255,255,.25);text-transform:uppercase;text-align:left;line-height:1.6;}

@media(max-width:560px){
  .sig-grid{grid-template-columns:1fr;}
  .vp-row{grid-template-columns:repeat(2,1fr);}
  .chip-t{font-size:.7rem;}
  .tot-num{font-size:2.5rem;}
  .tot-right{min-width:85px;}
  .hdr-pills{display:none;}
}