@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-deep:        #080f1a;
    --bg-card:        #111c2d;
    --bg-card-alt:    #162236;
    --bg-input:       #0c1725;
    --border:         #1e3252;
    --border-light:   #2a4570;
    --primary:        #1e6fbf;
    --primary-light:  #2985e0;
    --primary-dark:   #155495;
    --gold:           #f5a623;
    --gold-dark:      #d4880a;
    --success:        #22c55e;
    --success-dark:   #16a34a;
    --danger:         #ef4444;
    --danger-dark:    #dc2626;
    --warning:        #f59e0b;
    --warning-dark:   #d97706;
    --text-primary:   #dce8f5;
    --text-secondary: #7a9cbf;
    --text-muted:     #415e7a;
    --light:          #162236;
    --dark:           #dce8f5;
}

/*  Base  */
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-deep);
    background-image:
        radial-gradient(ellipse 80% 50% at 15% -10%, rgba(30,111,191,.13) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 110%, rgba(245,166,35,.07) 0%, transparent 55%);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/*  Header  */
header {
    background: linear-gradient(180deg, #0e1d31 0%, #0a1624 100%);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 1px 24px rgba(0,0,0,.5);
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 1rem;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: .85rem;
    text-decoration: none;
}

.header-brand .brand-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 2px 16px rgba(245,166,35,.4);
}

.header-brand .brand-icon i {
    font-size: 1.1rem;
    line-height: 1;
}

.header-brand .brand-text h1 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.02em;
    line-height: 1.2;
}

.header-brand .brand-text p {
    font-size: .7rem;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: .02em;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.header-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    padding: .45rem .9rem;
    border-radius: 7px;
    border: 1px solid var(--border);
    transition: all .2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.header-nav a:hover {
    background: var(--bg-card-alt);
    color: var(--text-primary);
    border-color: var(--border-light);
}

header > h1,
header > p { display: none; }

/*  Container  */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.75rem;
}

/*  Cards  */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 28px rgba(0,0,0,.25);
}

.card h2 {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    padding: .9rem 1.5rem;
    background: var(--bg-card-alt);
    border-bottom: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.card h2::before {
    content: '';
    width: 3px;
    height: 14px;
    background: var(--primary);
    border-radius: 2px;
    flex-shrink: 0;
}

/*  Forms  */
.form-group { margin-bottom: 1.25rem; }

label {
    display: block;
    margin-bottom: .4rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea {
    width: 100%;
    padding: .65rem .9rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .93rem;
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30,111,191,.18);
}

input::placeholder { color: var(--text-muted); }
select option { background: #1a2840; color: var(--text-primary); }

/*  Buttons  */
button, .btn {
    padding: .55rem 1.2rem;
    border: none;
    border-radius: 8px;
    font-size: .87rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    font-family: inherit;
    letter-spacing: .01em;
    line-height: 1.4;
}

.btn-primary  { background: var(--primary);  color:#fff; box-shadow:0 2px 10px rgba(30,111,191,.35); }
.btn-primary:hover  { background: var(--primary-light);  box-shadow:0 4px 20px rgba(30,111,191,.5);  transform:translateY(-1px); }
.btn-success  { background: var(--success);  color:#fff; box-shadow:0 2px 10px rgba(34,197,94,.3); }
.btn-success:hover  { background: var(--success-dark);  box-shadow:0 4px 20px rgba(34,197,94,.45); transform:translateY(-1px); }
.btn-danger   { background: var(--danger);   color:#fff; box-shadow:0 2px 10px rgba(239,68,68,.3); }
.btn-danger:hover   { background: var(--danger-dark);   box-shadow:0 4px 20px rgba(239,68,68,.45);  transform:translateY(-1px); }
.btn-warning  { background: var(--warning);  color:#fff; box-shadow:0 2px 10px rgba(245,158,11,.3); }
.btn-warning:hover  { background: var(--warning-dark);  box-shadow:0 4px 20px rgba(245,158,11,.45); transform:translateY(-1px); }
.btn-ghost    { background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
.btn-ghost:hover    { background: var(--bg-card-alt); color:var(--text-primary); border-color:var(--border-light); transform:translateY(-1px); }

.btn-sm  { padding:.35rem .8rem;  font-size:.78rem; }
.btn-lg  { padding:.75rem 1.75rem; font-size:1rem; }
.btn-icon { padding:.4rem .6rem; line-height:1; min-width:2.2rem; display:inline-flex; align-items:center; justify-content:center; }
.btn-icon.btn-sm { padding:.32rem .5rem; min-width:1.9rem; font-size:.82rem; }
.btn-icon.btn-lg { padding:.65rem .9rem; min-width:2.75rem; font-size:1.1rem; }

/*  Shared Modal + Pagination Utilities  */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 2200;
    align-items: center;
    justify-content: center;
}

.modal-title {
    margin: 0 0 .75rem 0;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 700;
}

.modal-description {
    margin: 0 0 1.25rem 0;
    color: var(--text-secondary);
}

.modal-actions {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.empty-state {
    text-align: center;
    padding: 2.5rem;
    color: var(--text-secondary);
}

.empty-state-sm {
    padding: 2rem;
}

.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.pagination-bar-compact {
    padding: .75rem .25rem 0 .25rem;
    margin-top: 0;
}

.pagination-info {
    color: var(--text-secondary);
    font-size: .85rem;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.pagination-indicator {
    color: var(--text-secondary);
    font-size: .85rem;
    min-width: 90px;
    text-align: center;
}

/*  Tables  */
.table-wrapper {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
}

table { width:100%; border-collapse:collapse; }
thead { background: var(--bg-card-alt); }

th {
    padding: .75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: .73rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

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

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(30,111,191,.05); }

/*  Grid  */
.grid   { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }

/*  Module Cards  */
.module-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.module-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent-color, var(--primary));
    border-radius: 16px 16px 0 0;
}

.module-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 56px rgba(0,0,0,.45);
    border-color: var(--border-light);
}

.module-card.blue   { --accent-color:#3b82f6; }
.module-card.green  { --accent-color:#22c55e; }
.module-card.orange { --accent-color:#f59e0b; }
.module-card.purple { --accent-color:#a855f7; }

.module-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: .5rem;
    letter-spacing: -.01em;
}

.module-card p  { color: var(--text-secondary); font-size: .85rem; line-height:1.55; }
.module-icon    { font-size:2.5rem; margin-bottom:1rem; display:block; }
.module-icon i  { font-size:inherit; line-height:1; }

.home-subtitle {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
    margin-bottom: .6rem;
}

/*  Participants Page  */
.participants-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.participants-delete-modal,
.participants-history-modal {
    z-index: 2000;
}

.participants-modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: 1.5rem;
    border-radius: 16px;
}

.participants-delete-box {
    width: min(480px, 92vw);
}

.participants-history-box {
    width: min(920px, 95vw);
    max-height: 86vh;
    overflow: auto;
}

.participants-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .8rem;
}

.participants-filter-row {
    margin-bottom: 1rem;
    padding-bottom: .9rem;
}

.participants-filter-group {
    max-width: 260px;
}

.participants-filter-group label {
    margin-bottom: .35rem;
}

/*  Secretariat Page  */
.secretariat-modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: 1.5rem;
    border-radius: 16px;
}

.secretariat-edit-box {
    width: min(760px, 94vw);
    box-shadow: 0 24px 72px rgba(0,0,0,.6);
}

.secretariat-reject-box {
    width: min(520px, 92vw);
}

.secretariat-modal-title-lg {
    margin-bottom: 1.25rem;
}

.secretariat-edit-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.secretariat-meta-label {
    font-size: .75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .3rem;
}

.secretariat-meta-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.secretariat-edit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.secretariat-filter-row {
    margin-bottom: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--border);
}

.secretariat-filter-group {
    max-width: 260px;
}

.secretariat-filter-group label {
    margin-bottom: .35rem;
}

.secretariat-edit-input,
.secretariat-total-value {
    margin-top: .5rem;
}

.secretariat-total-cell {
    text-align: center;
}

.pending-score-card {
    border-left: 4px solid var(--warning);
}

.pending-score-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 1.25rem;
    align-items: start;
}

.pending-score-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: .4rem;
}

.pending-score-number {
    font-weight: 400;
    color: var(--text-muted);
    font-size: .9rem;
}

.pending-score-apparatus {
    font-size: .85rem;
    color: var(--text-secondary);
    margin-bottom: .25rem;
}

.pending-score-submitted {
    font-size: .78rem;
    color: var(--text-muted);
}

.pending-score-actions {
    display: flex;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/*  Score Display  Jury  */
.score-display {
    background: var(--bg-card-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.score-display h2 {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    margin: 0 0 1.25rem 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.score-display h2::before { display:none; }

.score-values {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
}

.score-value {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem;
    text-align: center;
    transition: border-color .2s, box-shadow .2s;
}

.score-value label {
    font-size: .7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .75rem;
    display: block;
}

.score-value input[type="number"] {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .6rem;
    background: var(--bg-card);
    border-color: var(--border-light);
    border-radius: 7px;
}

.score-value .value {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    margin-top: .4rem;
}

.score-value.d-score { border-color:rgba(59,130,246,.25); }
.score-value.d-score:hover { border-color:rgba(59,130,246,.4); box-shadow:0 0 0 2px rgba(59,130,246,.1); }
.score-value.d-score label,.score-value.d-score .value { color:#60a5fa; }
.score-value.d-score input { border-color:rgba(59,130,246,.3); }

.score-value.e-score { border-color:rgba(34,197,94,.25); }
.score-value.e-score:hover { border-color:rgba(34,197,94,.4); box-shadow:0 0 0 2px rgba(34,197,94,.1); }
.score-value.e-score label,.score-value.e-score .value { color:#4ade80; }
.score-value.e-score input { border-color:rgba(34,197,94,.3); }

.score-value.n-score { border-color:rgba(239,68,68,.25); }
.score-value.n-score:hover { border-color:rgba(239,68,68,.4); box-shadow:0 0 0 2px rgba(239,68,68,.1); }
.score-value.n-score label,.score-value.n-score .value { color:#f87171; }
.score-value.n-score input { border-color:rgba(239,68,68,.3); }

.score-value.total-score { background:rgba(245,166,35,.08); border-color:rgba(245,166,35,.25); }
.score-value.total-score label { color:var(--gold); }
.score-value.total-score .value { color:var(--gold); font-size:2.5rem; }

/*  DEN Tiles  Secretariat  */
.den-scores {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .75rem;
}

.den-score-item { border-radius:9px; padding:.9rem; text-align:center; }
.den-score-item.d     { background:rgba(59,130,246,.1);  border:1px solid rgba(59,130,246,.2); }
.den-score-item.e     { background:rgba(34,197,94,.1);   border:1px solid rgba(34,197,94,.2); }
.den-score-item.n     { background:rgba(239,68,68,.1);   border:1px solid rgba(239,68,68,.2); }
.den-score-item.total { background:rgba(245,158,11,.1);  border:1px solid rgba(245,158,11,.2); }

.den-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    display: block;
    margin-bottom: .35rem;
}

.den-score-item.d     .den-label,.den-score-item.d     .den-val { color:#60a5fa; }
.den-score-item.e     .den-label,.den-score-item.e     .den-val { color:#4ade80; }
.den-score-item.n     .den-label,.den-score-item.n     .den-val { color:#f87171; }
.den-score-item.total .den-label,.den-score-item.total .den-val { color:#fbbf24; }

.den-val {
    font-size: 1.7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    display: block;
    line-height: 1;
}

/*  Badges  */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .65rem;
    border-radius: 20px;
    font-size: .73rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-pending  { background:rgba(245,158,11,.15);  color:#fbbf24; border:1px solid rgba(245,158,11,.25); }
.badge-approved { background:rgba(34,197,94,.12);   color:#4ade80; border:1px solid rgba(34,197,94,.25); }
.badge-rejected { background:rgba(239,68,68,.12);   color:#f87171; border:1px solid rgba(239,68,68,.25); }
.badge-edited   { background:rgba(168,85,247,.12);  color:#c084fc; border:1px solid rgba(168,85,247,.25); }

/*  Alerts  */
.alert { padding:.875rem 1rem; border-radius:9px; margin-bottom:1rem; font-size:.88rem; display:flex; align-items:flex-start; gap:.6rem; border:1px solid; }
.alert-success { background:rgba(34,197,94,.1);  color:#4ade80; border-color:rgba(34,197,94,.2); }
.alert-error   { background:rgba(239,68,68,.1);  color:#f87171; border-color:rgba(239,68,68,.2); }
.alert-warning { background:rgba(245,158,11,.1); color:#fbbf24; border-color:rgba(245,158,11,.2); }

/*  Toasts  */
#toast-container {
    position: fixed;
    top: 1.25rem; right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 11px;
    padding: .875rem 1.2rem;
    font-size: .87rem;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: 0 8px 36px rgba(0,0,0,.5);
    max-width: 320px;
    animation: toastIn .3s cubic-bezier(.34,1.56,.64,1);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.toast.success { border-left:3px solid var(--success); }
.toast.error   { border-left:3px solid var(--danger); }
.toast.warning { border-left:3px solid var(--warning); }

@keyframes toastIn {
    from { transform:translateX(110%); opacity:0; }
    to   { transform:translateX(0);    opacity:1; }
}

/*  Loading  */
.loading { text-align:center; padding:3rem; color:var(--text-muted); font-size:.88rem; }

.spinner {
    width:32px; height:32px;
    border:3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .75s linear infinite;
    margin: 0 auto .875rem;
}

@keyframes spin { to { transform:rotate(360deg); } }

/*  Leaderboard  */
.leaderboard { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }

.leaderboard h3 {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .9rem 1.25rem;
    background: var(--bg-card-alt);
    border-bottom: 1px solid var(--border);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    gap: .875rem;
    transition: background .15s;
}
.leaderboard-item:last-child { border-bottom:none; }
.leaderboard-item:hover { background:rgba(30,111,191,.06); }

.rank { font-weight:700; color:var(--text-secondary); min-width:36px; font-size:1rem; font-variant-numeric:tabular-nums; }
.rank.gold   { color:#f5c542; font-size:1.3rem; }
.rank.silver { color:#b0b8c4; font-size:1.3rem; }
.rank.bronze { color:#cd7f32; font-size:1.3rem; }
.rank i { font-size: inherit; }

.score { font-weight:700; color:var(--gold); font-size:1.1rem; min-width:72px; text-align:right; font-variant-numeric:tabular-nums; }

/*  Modals  global backdrop upgrade  */
#editModal, #rejectModal, #deleteConfirmModal, #statusMessage {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#editModal > div,
#rejectModal > div,
#deleteConfirmModal > div {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 72px rgba(0,0,0,.6) !important;
    animation: modalIn .25s cubic-bezier(.34,1.56,.64,1);
    color: var(--text-primary) !important;
}

#statusMessage > div {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
}

@keyframes modalIn {
    from { transform:scale(.9) translateY(12px); opacity:0; }
    to   { transform:scale(1)  translateY(0);    opacity:1; }
}

/* Edit modal DEN panels */
#editModal [style*="background: #dbeafe"] { background:rgba(59,130,246,.1) !important; border:1px solid rgba(59,130,246,.25) !important; border-radius:9px !important; }
#editModal [style*="background: #dcfce7"] { background:rgba(34,197,94,.1)  !important; border:1px solid rgba(34,197,94,.25)  !important; border-radius:9px !important; }
#editModal [style*="background: #fee2e2"] { background:rgba(239,68,68,.1)  !important; border:1px solid rgba(239,68,68,.25)  !important; border-radius:9px !important; }
#editModal [style*="background: #fef3c7"] { background:rgba(245,158,11,.1) !important; border:1px solid rgba(245,158,11,.25) !important; border-radius:9px !important; }
#editTotal { color:var(--gold) !important; }

/* Secretariat inline score DEN badges */
.card [style*="background: #dbeafe"], .card [style*="background: rgb(219"] { background:rgba(59,130,246,.1)  !important; border-radius:9px !important; color:#60a5fa !important; }
.card [style*="background: #dcfce7"] { background:rgba(34,197,94,.1)  !important; border-radius:9px !important; color:#4ade80 !important; }
.card [style*="background: #fee2e2"] { background:rgba(239,68,68,.1)  !important; border-radius:9px !important; color:#f87171 !important; }
.card [style*="background: #fef3c7"] { background:rgba(245,158,11,.1) !important; border-radius:9px !important; color:#fbbf24 !important; }

/*  Display Page  */
.display-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: .5rem;
}

.current-score {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
}

.current-score h2 {
    background: var(--bg-card-alt) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: .9rem 1.5rem !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    border-radius: 0 !important;
}
.current-score h2::before { display:none !important; }

.participant-name { font-size:2.4rem; font-weight:800; color:var(--text-primary); margin-bottom:.4rem; letter-spacing:-.03em; line-height:1.1; }
.apparatus-name   { font-size:1rem; color:var(--text-secondary); margin-bottom:1.75rem; }

.score-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .75rem;
}

.score-item {
    background: var(--bg-card-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}

.score-item label { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; display:block; margin-bottom:.5rem; }
.score-item .value { font-size:2rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }

.leaderboard-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
}

.leaderboard-container h3 {
    background: var(--bg-card-alt);
    border-bottom: 1px solid var(--border);
    padding: .9rem 1.5rem;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-secondary);
    margin: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.score-updated-flash {
    animation: scoreFlash .9s ease;
}

@keyframes scoreFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
        background: rgba(34, 197, 94, 0.08);
    }
    100% {
        box-shadow: 0 0 0 22px rgba(34, 197, 94, 0);
        background: transparent;
    }
}

/*  Responsive  */
@media (max-width:1100px) {
    .display-container { grid-template-columns:1fr; }
}

@media (max-width:768px) {
    .container    { padding:1.25rem 1rem; }
    .header-inner { height:56px; padding:0 1rem; }
    .header-brand .brand-text p { display:none; }
    .grid         { grid-template-columns:1fr 1fr; }
    .grid-4,.score-values,.score-grid,.den-scores { grid-template-columns:repeat(2,1fr); }
    .secretariat-edit-meta,
    .pending-score-layout { grid-template-columns: 1fr; }
    .pending-score-actions { flex-wrap: wrap; }
    .participant-name { font-size:1.75rem; }
    .score-item .value,.score-value .value { font-size:1.5rem; }
    .den-val { font-size:1.3rem; }
}

@media (max-width:480px) {
    .grid { grid-template-columns:1fr; }
    .header-brand .brand-text h1 { font-size:.85rem; }
    .score-values,.den-scores { grid-template-columns:repeat(2,1fr); }
}

/*  Display Mode (large screen)  */
.display-mode .participant-name { font-size:3.5rem; }
.display-mode .score-item .value { font-size:2.8rem; }
.display-mode .score-item label  { font-size:.9rem; }
.display-mode .leaderboard-item  { padding:1.1rem 1.5rem; font-size:1.1rem; }
.display-mode .score { font-size:1.4rem; }

/*  Utility  */
.text-muted     { color:var(--text-muted); }
.text-secondary { color:var(--text-secondary); }
.text-gold      { color:var(--gold); }
.text-success   { color:var(--success); }
.text-danger    { color:var(--danger); }
.d-flex         { display:flex; }
.align-center   { align-items:center; }
.gap-1          { gap:.5rem; }
.gap-2          { gap:1rem; }
.mb-1           { margin-bottom:.5rem; }
.mb-2           { margin-bottom:1rem; }
.mt-2           { margin-top:1rem; }
.fw-bold        { font-weight:700; }
.fs-sm          { font-size:.85rem; }