:root{
    --kk-main:#009688;
    --kk-dark:#00695c;
    --kk-soft:#d9f3ef;
    --kk-bg:#f2fbf9;
    --kk-accent:#26a69a;
    --kk-text:#18323b;
}

body{
    color:var(--kk-text);
    background:var(--kk-bg);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.theme-auth{
    background:
        linear-gradient(135deg, rgba(0,150,136,.96), rgba(0,105,92,.96)),
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 30%);
}

.theme-main .container-fluid{
    max-width: 1800px;
}

.dashboard-filter .form-control,
.dashboard-filter .form-select{
    min-height: 3.1rem;
}

.dashboard-filter .form-label{
    font-weight:600;
}

.dashboard-filter .btn-kemenkes{
    min-height: 3.1rem;
}

.sidebar-kemenkes{
    background:#fff;
    border-radius:1.5rem;
    padding:1.5rem;
    box-shadow:0 .5rem 1.5rem rgba(0,0,0,.06);
}

.logo-badge,
.display-logo{
    width:3rem;
    height:3rem;
    border-radius:1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    color:#fff;
}

.display-logo{
    width:4rem;
    height:4rem;
    font-size:1.25rem;
}

.theme-chip{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    border-radius:999px;
    padding:.5rem .9rem;
    background:rgba(255,255,255,.14);
    color:#fff;
    font-size:.9rem;
}

.menu-list{
    display:grid;
    gap:.5rem;
}

.menu-link{
    text-decoration:none;
    padding:.9rem 1rem;
    border-radius:1rem;
    color:#456;
    background:#f6fbfb;
    font-weight:600;
}

.menu-link:hover,
.menu-link.active{
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    color:#fff;
}

.panel-highlight{
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    border-radius:1.5rem;
}

.btn-kemenkes{
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    color:#fff;
    border:none;
}

.btn-kemenkes:hover{
    color:#fff;
    filter:brightness(.96);
}

.btn-outline-kemenkes{
    border:1px solid var(--kk-main);
    color:var(--kk-main);
    background:#fff;
}

.btn-outline-kemenkes:hover{
    color:#fff;
    background:var(--kk-main);
    border-color:var(--kk-main);
}

.dashboard-header{
    background:#fff;
    border-radius:1.5rem;
    box-shadow:0 .5rem 1.5rem rgba(0,0,0,.06);
    padding:1.5rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}

.metric-card{
    background:#fff;
    border-radius:1.5rem;
    padding:1.25rem;
    box-shadow:0 .5rem 1.5rem rgba(0,0,0,.06);
    height:100%;
}

.metric-value{
    font-size:2.2rem;
    font-weight:800;
    margin:.35rem 0;
    color:var(--kk-dark);
}

.live-panel{
    border-radius:1.75rem;
    padding:1.5rem;
    background:linear-gradient(135deg, #173840, #0e5e57 45%, #06796e);
    color:#fff;
}

.score-card,
.set-box{
    border-radius:1.35rem;
    padding:1rem 1.1rem;
    background:#fff;
    color:#173840;
}

.set-box-active{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
}

.score-big{
    font-size:3rem;
    line-height:1;
    font-weight:800;
    color:var(--kk-dark);
}

.progress-kemenkes{
    height:.8rem;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    overflow:hidden;
}

.queue-card,
.status-card{
    background:#f8fbfb;
    border-radius:1rem;
    padding:1rem;
    margin-bottom:.9rem;
}

.badge-live{
    background:#22c55e;
    color:#fff;
    padding:.5rem .8rem;
    border-radius:999px;
}

.badge-soft{
    background:var(--kk-soft);
    color:var(--kk-dark);
    padding:.45rem .75rem;
    border-radius:999px;
}

.badge-ok{
    background:#dcfce7;
    color:#166534;
}

.badge-warn{
    background:#fff3cd;
    color:#8a6d3b;
}

.form-control,
.form-select,
textarea.form-control{
    border-radius:.95rem;
    min-height:2.8rem;
    border:1px solid rgba(0,150,136,.35);
    background:rgba(0,150,136,.05);
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.form-control::placeholder,
textarea.form-control::placeholder,
.form-select{
    color:var(--kk-text);
}

.form-label,
.form-check-label{
    color:var(--kk-dark);
    font-weight:600;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus{
    border-color:var(--kk-main);
    box-shadow:0 0 0 .25rem rgba(0,150,136,.18);
    background:rgba(0,150,136,.08);
}

.form-check-input:checked{
    background-color:var(--kk-main);
    border-color:var(--kk-main);
}

.btn-primary,
.btn-kemenkes{
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    color:#fff;
    border:none;
}

.btn-primary:hover,
.btn-kemenkes:hover{
    background:linear-gradient(135deg, var(--kk-dark), var(--kk-main));
    color:#fff;
}

.btn-outline-primary,
.btn-outline-kemenkes{
    color:var(--kk-main);
    border-color:var(--kk-main);
    background:#fff;
}

.btn-outline-primary:hover,
.btn-outline-kemenkes:hover{
    background:var(--kk-main);
    color:#fff;
}

.display-body{
    background: linear-gradient(135deg, #0e5e57 0%, #173840 50%, #0e5e57 100%);
    min-height: 100vh;
    color: #fff;
}

.live-display-header{
    text-align: center;
    padding: 2rem 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    margin-bottom: 2rem;
}

.match-card, .live-match-card{
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    color: #333;
    transition: all 0.3s ease;
    overflow: hidden;
}

.live-match-card{
    border: 2px solid #dc3545;
    box-shadow: 0 8px 32px rgba(220, 53, 69, 0.3);
}

.glow-effect{
    animation: glowPulse 2s infinite alternate;
}

@keyframes glowPulse {
    from { box-shadow: 0 8px 32px rgba(220, 53, 69, 0.3); }
    to { box-shadow: 0 8px 32px rgba(220, 53, 69, 0.6); }
}

.match-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.live-match-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(220, 53, 69, 0.4);
}

.match-title{
    font-size: 1rem;
    color: var(--kk-dark);
}

.participants-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.5rem 0;
}

.participant{
    flex: 1;
    text-align: center;
}

.participant-photo{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--kk-main);
    margin-bottom: 0.5rem;
}

.no-photo{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--kk-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    border: 3px solid var(--kk-main);
}

.participant-name{
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--kk-dark);
}

.vs-section{
    flex: 0 0 80px;
    text-align: center;
}

.vs-badge{
    background: var(--kk-main);
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0 auto 0.5rem;
}

.set-score{
    font-weight: bold;
    color: var(--kk-dark);
    font-size: 1.2rem;
}

.table-info{
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.match-time{
    text-align: center;
}

.animate-fade-in{
    animation: fadeIn 0.5s ease-in;
}

.animate-fade-out{
    animation: fadeOut 0.3s ease-out;
}

.animate-slide-in{
    animation: slideInUp 0.5s ease-out;
}

.card-click-effect{
    animation: clickEffect 0.3s ease;
}

.animate-pulse{
    animation: pulse 2s infinite;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes clickEffect {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

@keyframes progressPulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.progress-bar{
    background: linear-gradient(90deg, #dc3545, #ff6b6b);
}

#loading-spinner{
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .live-display-header{
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .participants-row{
        flex-direction: column;
        gap: 1rem;
    }

    .vs-section{
        order: 1;
    }

    .participant{
        order: 2;
    }

    .participant-photo, .no-photo{
        width: 60px;
        height: 60px;
    }
}


.form-label,
.form-check-label,
legend{
    color:var(--kk-text);
}

.btn-primary,
.btn-success,
.btn-kemenkes{
    background:var(--kk-main);
    border-color:var(--kk-main);
    color:#fff;
}

.btn-primary:hover,
.btn-success:hover,
.btn-kemenkes:hover{
    background:var(--kk-dark);
    border-color:var(--kk-dark);
    color:#fff;
}

.table > :not(caption) > * > *{
    padding:.9rem 1rem;
}

.display-hero,
.display-card,
.display-footer-box{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:2rem;
    box-shadow:0 .8rem 2rem rgba(0,0,0,.18);
    backdrop-filter:blur(8px);
}

.display-hero{
    padding:1.8rem;
}

.display-card{
    padding:1.5rem;
    height:100%;
}

.display-title{
    font-size:clamp(1.8rem, 3vw, 3.2rem);
    font-weight:800;
}

.display-stat{
    background:rgba(255,255,255,.08);
    border-radius:1.35rem;
    padding:1rem 1.1rem;
    min-width:160px;
}

.live-public-panel{
    background:#fff;
    color:#173840;
    border-radius:1.8rem;
    padding:1.5rem;
}

.display-match-title{
    font-size:clamp(1.6rem, 2.6vw, 2.6rem);
    font-weight:800;
    line-height:1.15;
}

.display-progress-box{
    background:#f0f7f6;
    border-radius:1.2rem;
    padding:1rem 1.1rem;
    min-width:120px;
}

.player-public-card,
.set-public,
.podium-box{
    border-radius:1.3rem;
    padding:1rem 1.1rem;
}

.player-public-card{
    border:2px solid #e5f0ef;
    background:#fff;
}

.score-public{
    font-size:4rem;
    line-height:1;
    font-weight:900;
    color:var(--kk-dark);
}

.set-public{
    background:#f1f6f6;
}

.set-public.active{
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    color:#fff;
}

.display-list-item{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:1.3rem;
    padding:1rem 1.1rem;
    display:flex;
    justify-content:space-between;
    gap:1rem;
    align-items:flex-start;
    margin-bottom:.85rem;
}

/* Kemenkes green-tosca form styling */
.form-label,
label {
    color: var(--kk-dark);
}

.form-control,
.form-select,
textarea.form-control {
    border-radius: .95rem;
    min-height: 2.8rem;
    border-color: rgba(0,150,136,.35);
    background-color: #f7fffd;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--kk-main);
    box-shadow: 0 0 0 .25rem rgba(0,150,136,.18);
}

.form-check-input:checked {
    background-color: var(--kk-main);
    border-color: var(--kk-main);
}

.btn-primary,
.btn-kemenkes,
.btn-tm {
    background: var(--kk-main) !important;
    border-color: var(--kk-main) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-kemenkes:hover,
.btn-tm:hover {
    background: var(--kk-dark) !important;
    border-color: var(--kk-dark) !important;
}

.btn-outline-primary {
    color: var(--kk-main) !important;
    border-color: var(--kk-main) !important;
}

.btn-outline-primary:hover {
    background: var(--kk-main) !important;
    color: #fff !important;
}

.form-control::placeholder,
.form-select::placeholder {
    color: rgba(0, 0, 0, .45);
}

.display-time-box{
    background:rgba(255,255,255,.1);
    border-radius:1rem;
    padding:.8rem .9rem;
    min-width:86px;
    text-align:center;
    font-weight:800;
    font-size:1.1rem;
}

.podium-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:1.4rem;
    padding:1rem 1.1rem;
    margin-bottom:1rem;
}

.podium-1{ background:rgba(251,191,36,.18); }
.podium-2{ background:rgba(203,213,225,.18); }
.podium-3{ background:rgba(249,115,22,.18); }

.display-footer-box{
    padding:1.1rem 1.2rem;
}

@media (max-width: 991.98px){
    .dashboard-header{
        align-items:flex-start;
    }
}

/* ===== Dashboard Tosca Redesign ===== */
:root{
    --tosca:#0aa69d;
    --tosca-2:#00796f;
    --tosca-dark:#004d45;
    --tosca-soft:#e8fbf8;
    --tosca-bg:#f6fffd;
    --ink:#132333;
    --muted:#6b7280;
    --line:#e5ecef;
}
.admin-shell{background:var(--tosca-bg); color:var(--ink); overflow-x:hidden;}
.app-wrapper{min-height:100vh; display:flex;}
.app-sidebar{width:315px; background:linear-gradient(180deg,#097d75 0%,#004b45 75%,#013632 100%); color:#fff; position:sticky; top:0; height:100vh; padding:18px 14px; box-shadow:8px 0 30px rgba(0,0,0,.08); z-index:20; overflow-y:auto;}
.brand-area{display:flex; align-items:center; gap:12px; margin-bottom:20px; min-height:52px;}
.sidebar-burger{background:transparent; border:0; color:white; font-size:1.45rem; padding:0 4px;}
.brand-logo{width:44px;height:44px;display:grid;place-items:center;font-size:1.9rem;border-radius:14px;background:rgba(255,255,255,.08);}
.brand-title{font-weight:800; letter-spacing:.5px; font-size:1.2rem; line-height:1;}
.brand-subtitle{font-size:.78rem; color:rgba(255,255,255,.78); font-weight:600;}
.sidebar-nav{display:grid; gap:8px;}
.side-section{font-size:.78rem; color:#38f5dd; text-transform:uppercase; font-weight:800; margin:18px 10px 6px; letter-spacing:.04em;}
.side-link{display:flex; align-items:center; gap:14px; color:#fff; text-decoration:none; padding:12px 14px; border-radius:10px; font-weight:650; border:1px solid transparent; transition:.2s ease;}
.side-link i{width:22px; font-size:1.12rem; text-align:center;}
.side-link:hover{background:rgba(255,255,255,.11); color:#fff; transform:translateX(2px);}
.side-link.active{background:linear-gradient(135deg,#18c9bd,#0a9d93); color:#fff; box-shadow:0 10px 24px rgba(10,166,157,.28);}
.app-main{flex:1; min-width:0;}
.app-topbar{height:72px; background:linear-gradient(90deg,#00766f,#0aa69d); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 28px; position:sticky; top:0; z-index:15; box-shadow:0 8px 28px rgba(0,0,0,.08);}
.topbar-title{font-weight:800; font-size:1.05rem;}
.topbar-subtitle{font-size:.82rem; opacity:.78;}
.topbar-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end;}
.topbar-pill{display:flex; align-items:center; gap:8px; padding:8px 12px; border-right:1px solid rgba(255,255,255,.18); font-weight:650;}
.notification-bell{position:relative; font-size:1.25rem; padding:6px 8px;}
.notification-bell em{position:absolute; top:-4px; right:-4px; width:20px; height:20px; border-radius:50%; background:#ef4444; font-size:.68rem; font-style:normal; display:grid; place-items:center; font-weight:800;}
.user-chip{display:flex; align-items:center; gap:9px;}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);color:#0a8f85;font-size:1.3rem;}
.user-chip small{display:block; color:rgba(255,255,255,.78); margin-top:-3px;}
.page-content{padding:28px;}
.dashboard-heading{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;}
.dashboard-heading h1{font-size:1.55rem; font-weight:800; margin:0 0 6px;}
.dashboard-heading p{margin:0; color:var(--muted);}
.heading-actions{display:flex; gap:10px; flex-wrap:wrap;}
.btn-tosca{background:linear-gradient(135deg,var(--tosca),var(--tosca-2)); color:#fff; border:0; border-radius:12px; padding:.65rem 1rem; font-weight:700;}
.btn-tosca:hover{filter:brightness(.95); color:#fff;}
.btn-outline-tosca{background:#fff; color:var(--tosca-2); border:1px solid rgba(10,166,157,.35); border-radius:12px; padding:.65rem 1rem; font-weight:700;}
.btn-outline-tosca:hover{background:var(--tosca); color:#fff;}
.stat-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px; display:flex; align-items:center; gap:16px; box-shadow:0 10px 26px rgba(15,35,50,.06); transition:.2s ease;}
.stat-card:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(15,35,50,.10);}
.stat-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem; flex:0 0 auto;}
.stat-icon.green{background:#dff7ef;color:#079172}.stat-icon.blue{background:#e5f0ff;color:#2563eb}.stat-icon.red{background:#fee2e2;color:#ef4444}.stat-icon.success{background:#dcfce7;color:#22a957}.stat-icon.orange{background:#fff3d7;color:#f59e0b}.stat-icon.purple{background:#efe7ff;color:#7c3aed}
.stat-title{font-size:.92rem; color:#667085;}.stat-value{font-size:1.8rem; line-height:1.05; font-weight:850; color:#111827; margin:4px 0;}.stat-desc{font-size:.84rem; color:#7b8190;}
.panel-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px; box-shadow:0 10px 26px rgba(15,35,50,.06);}
.panel-title-bar{background:linear-gradient(135deg,var(--tosca),var(--tosca-2)); color:white; margin:-20px -20px 18px; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:14px;}
.panel-title-bar h2,.section-title{font-size:1.15rem; font-weight:800; margin:0;}
.panel-title-bar a,.panel-link{color:#fff; text-decoration:none; font-weight:700;}
.panel-link{color:var(--tosca-2);}
.event-feature{background:linear-gradient(135deg,#eefbf9,#fff); border:1px solid #dbeeed; border-radius:10px; padding:24px; display:flex; gap:18px; align-items:flex-start;}
.event-feature h3{font-size:1.12rem; font-weight:800; color:#07575a; margin-bottom:18px;}.event-feature p{margin:8px 0; color:#475569; display:flex; align-items:center; gap:9px;}
.event-trophy{font-size:2.35rem; color:#f5a400; line-height:1;}
.event-badges{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px;}.event-badges span{background:#f3f8ff; color:#2563eb; border:1px solid #dbeafe; border-radius:8px; padding:10px 14px; font-weight:700;}.event-badges span:nth-child(2){background:#ecfdf5;color:#078b77;border-color:#c7f2e6}.event-badges span:nth-child(3){background:#f4f1ff;color:#7c3aed;border-color:#e7ddff}.event-badges .live{background:#e9fbf4;color:#047857;border-color:#c8f5e2}.event-badges .live i{font-size:.6rem;}
.quick-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px;}.quick-card{min-height:114px; border:1px solid #dbe5ea; border-radius:10px; text-decoration:none; color:#1f2937; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:16px; transition:.2s ease; background:linear-gradient(135deg,#fff,#fbfffe);}.quick-card:hover{transform:translateY(-3px); box-shadow:0 16px 28px rgba(0,0,0,.08); color:#0b736b}.quick-card.accent{border-color:#fed7aa;background:#fffaf2}.quick-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.55rem}.quick-icon.green{background:#0aa69d}.quick-icon.blue{background:#2563eb}.quick-icon.orange{background:#f59e0b}.quick-icon.purple{background:#7c3aed}.quick-icon.red{background:#ef4444}
.system-card{display:flex; justify-content:space-between; align-items:center; background:linear-gradient(135deg,#f0fffb,#fff);}.system-list{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px;}.system-list li{display:flex; align-items:center; gap:10px; color:#35525c;}.system-list i{color:#22c55e}.paddle-illustration{font-size:7rem; opacity:.9; filter:drop-shadow(0 12px 18px rgba(0,0,0,.12)); transform:rotate(-18deg);}
.dashboard-table thead th{background:#f8fafc; color:#344054; font-size:.86rem;}.status-pill{display:inline-flex; align-items:center; justify-content:center; border-radius:8px; padding:6px 12px; background:#f1f5f9; color:#64748b; font-weight:800; font-size:.8rem;}.status-pill.active{background:#dcfce7;color:#047857}.status-pill.soon{background:#e8f1ff;color:#2563eb}.status-pill.danger{background:#fee2e2;color:#dc2626}.match-monitor-card{height:100%; background:#f8fffd; border:1px solid #d9efec; border-radius:12px; padding:16px;}.match-monitor-card small{display:block; color:#667085; margin-bottom:4px;}.list-stack{display:grid; gap:12px;}.stack-item{border:1px solid var(--line); border-radius:12px; padding:14px; background:#fbfffe; display:grid; gap:4px;}.stack-item small{color:#667085}.stack-item span{color:#0b756d; font-weight:700; font-size:.88rem}.empty-state{background:#f8fafc; border:1px dashed #cbd5e1; border-radius:12px; padding:24px; color:#64748b; text-align:center;}.app-footer{display:flex; justify-content:space-between; gap:12px; color:#7b8190; padding:24px 0 0; margin-top:18px; font-size:.9rem;}
.mobile-menu{background:linear-gradient(180deg,#097d75,#004b45); color:#fff;}.mobile-menu .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.12)}
@media (max-width:1199.98px){.page-content{padding:20px}.app-topbar{padding:0 18px}.topbar-pill{display:none}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:767.98px){.app-topbar{height:auto; min-height:64px; padding:12px 16px; align-items:flex-start}.topbar-actions{gap:8px}.notification-bell,.user-chip .avatar{display:none}.dashboard-heading h1{font-size:1.35rem}.quick-grid{grid-template-columns:1fr}.stat-card{padding:16px}.stat-icon{width:52px;height:52px;font-size:1.45rem}.event-feature{flex-direction:column}.paddle-illustration{display:none}.app-footer{flex-direction:column}.heading-actions .btn{width:100%;}.heading-actions{width:100%;}.dashboard-heading{align-items:stretch;}}

/* ===== Public Kemenkes Tosca Theme Update ===== */
:root{
    --kmk-tosca:#00a99d;
    --kmk-tosca-dark:#00796f;
    --kmk-tosca-deep:#005f56;
    --kmk-mint:#e7faf6;
    --kmk-mint-2:#f3fffc;
    --kmk-gold:#f6c453;
    --kmk-ink:#123235;
}

.public-body{
    min-height:100vh;
    color:var(--kmk-ink);
    background:
        radial-gradient(circle at top left, rgba(0,169,157,.18), transparent 34rem),
        radial-gradient(circle at top right, rgba(246,196,83,.16), transparent 28rem),
        linear-gradient(180deg, #f4fffc 0%, #eefbf8 55%, #ffffff 100%);
}

.public-navbar{
    background:rgba(255,255,255,.86);
    border-bottom:1px solid rgba(0,121,111,.12);
    box-shadow:0 .7rem 2rem rgba(0,95,86,.07);
    backdrop-filter:blur(14px);
}

.public-navbar .navbar-brand{
    color:var(--kmk-tosca-deep);
    letter-spacing:-.02em;
}

.brand-mark{
    width:2.6rem;
    height:2.6rem;
    border-radius:1rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:.9rem;
    background:linear-gradient(135deg, var(--kmk-tosca), var(--kmk-tosca-deep));
    box-shadow:0 .5rem 1.2rem rgba(0,121,111,.25);
}

.public-navbar .nav-link{
    color:#355a5c;
    font-weight:600;
    border-radius:999px;
    padding:.55rem .95rem;
}

.public-navbar .nav-link:hover,
.public-navbar .nav-link.active{
    color:var(--kmk-tosca-deep);
    background:rgba(0,169,157,.10);
}

.public-navbar .nav-login{
    color:#fff;
    background:linear-gradient(135deg, var(--kmk-tosca), var(--kmk-tosca-dark));
    box-shadow:0 .45rem 1rem rgba(0,121,111,.18);
}

.public-navbar .nav-login:hover{
    color:#fff;
    background:linear-gradient(135deg, var(--kmk-tosca-dark), var(--kmk-tosca-deep));
}

.hero-kemenkes{
    position:relative;
    overflow:hidden;
    border-radius:2rem;
    padding:3.2rem;
    color:#fff;
    background:
        linear-gradient(135deg, rgba(0,169,157,.97), rgba(0,95,86,.98)),
        radial-gradient(circle at 85% 15%, rgba(255,255,255,.24), transparent 18rem);
    box-shadow:0 1.5rem 4rem rgba(0,95,86,.24);
}

.hero-pattern{
    position:absolute;
    inset:0;
    opacity:.18;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.95) 1px, transparent 0);
    background-size:26px 26px;
}

.hero-kemenkes h1{
    letter-spacing:-.04em;
}

.hero-kemenkes .lead{
    max-width:760px;
    color:rgba(255,255,255,.92);
}

.hero-chip{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:.55rem .9rem;
    font-weight:700;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.22);
}

.hero-btn{
    border-radius:1rem;
    padding:.8rem 1.15rem;
    font-weight:700;
}

.hero-side-card{
    border-radius:1.6rem;
    padding:1.4rem;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter:blur(10px);
}

.hero-icon{
    width:4rem;
    height:4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:1.25rem;
    margin-bottom:1rem;
    font-size:2rem;
    background:rgba(255,255,255,.20);
}

.public-metric-card{
    height:100%;
    padding:1.35rem;
    border-radius:1.5rem;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(0,121,111,.12);
    box-shadow:0 .9rem 2.2rem rgba(0,95,86,.09);
    transition:.18s ease;
}

.public-metric-card:hover{
    transform:translateY(-3px);
    box-shadow:0 1.2rem 2.8rem rgba(0,95,86,.14);
}

.metric-icon{
    width:2.75rem;
    height:2.75rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:1rem;
    margin-bottom:1rem;
    background:var(--kmk-mint);
    color:var(--kmk-tosca-deep);
    font-size:1.35rem;
}

.metric-number{
    margin-top:.2rem;
    font-size:2rem;
    line-height:1;
    color:var(--kmk-tosca-deep);
}

.card,
.table,
.list-group-item{
    border-color:rgba(0,121,111,.12) !important;
}

.card{
    border-radius:1.35rem;
    box-shadow:0 .7rem 1.8rem rgba(0,95,86,.07);
}

.bg-primary{
    background:linear-gradient(135deg, var(--kmk-tosca), var(--kmk-tosca-deep)) !important;
}

.text-primary{
    color:var(--kmk-tosca-deep) !important;
}

@media (max-width: 768px){
    .hero-kemenkes{
        padding:2rem;
        border-radius:1.5rem;
    }
    .public-navbar .navbar-nav{
        padding-top:1rem;
    }
    .public-navbar .nav-link{
        border-radius:.9rem;
    }
}

.public-body.kemenkes-public-theme{
    background:
        radial-gradient(circle at top left, rgba(0,150,136,.08), transparent 22%),
        linear-gradient(180deg, #f6fbfa 0%, #eef7f5 100%);
    color: var(--kk-text);
}

.public-navbar{
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0,150,136,.08);
    box-shadow: 0 10px 30px rgba(12, 77, 68, 0.08);
}

.public-navbar .navbar-brand{
    color: var(--kk-text);
}

.public-navbar .nav-link{
    color: #45606a;
    font-weight: 600;
    padding: .75rem 1rem !important;
    border-radius: 999px;
}

.public-navbar .nav-link:hover,
.public-navbar .nav-link:focus{
    color: var(--kk-dark);
    background: rgba(0,150,136,.08);
}

.public-navbar .nav-login{
    background: linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(0,105,92,.2);
}

.public-navbar .nav-login:hover,
.public-navbar .nav-login:focus{
    background: linear-gradient(135deg, var(--kk-dark), var(--kk-main));
    color:#fff;
}

.brand-mark-large{
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1.15rem;
    font-size: 1.1rem;
    box-shadow: 0 12px 24px rgba(0,105,92,.18);
}

.brand-title{
    line-height: 1.05;
    font-size: 1.7rem;
    letter-spacing: -.02em;
}

.brand-subtitle{
    display:block;
    color:#5b7a79;
    font-weight:600;
    font-size:.82rem;
    margin-top:.12rem;
}

.home-kemenkes-hero{
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    padding: 2rem;
    background:
        linear-gradient(135deg, rgba(1, 151, 138, .96), rgba(0, 105, 92, .96)),
        radial-gradient(circle at top right, rgba(255,255,255,.2), transparent 35%);
    box-shadow: 0 24px 50px rgba(0, 105, 92, .20);
    color: #fff;
}

.hero-glow{
    position:absolute;
    border-radius:50%;
    filter: blur(8px);
    opacity:.45;
    pointer-events:none;
}

.hero-glow-1{
    width: 220px;
    height: 220px;
    right: -30px;
    top: -40px;
    background: rgba(255,255,255,.2);
}

.hero-glow-2{
    width: 170px;
    height: 170px;
    left: -40px;
    bottom: -60px;
    background: rgba(186, 255, 245, .18);
}

.home-chip{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.7rem 1rem;
    border-radius:999px;
    background: rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.18);
    font-weight:700;
}

.chip-dot{
    width:.65rem;
    height:.65rem;
    border-radius:50%;
    background:#bbf7d0;
    box-shadow: 0 0 0 .25rem rgba(187,247,208,.16);
}

.home-title{
    font-size: clamp(2.1rem, 4vw, 3.9rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.03em;
}

.home-subtitle{
    max-width: 760px;
    font-size: 1.12rem;
    line-height: 1.8;
    color: rgba(255,255,255,.90);
}

.home-cta-primary,
.home-cta-secondary{
    padding: .95rem 1.4rem;
    border-radius: 1rem;
    font-weight: 700;
    box-shadow: 0 14px 26px rgba(0,0,0,.10);
}

.home-cta-secondary{
    border-width: 1px;
}

.hero-mini-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
}

.hero-mini-card{
    display:flex;
    gap: .85rem;
    align-items:flex-start;
    padding: 1rem 1.1rem;
    border-radius: 1.25rem;
    background: rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.12);
}

.hero-mini-card strong{
    display:block;
    margin-bottom:.1rem;
}

.hero-mini-card small{
    color: rgba(255,255,255,.76);
    line-height:1.55;
}

.mini-icon{
    flex: 0 0 2.5rem;
    width:2.5rem;
    height:2.5rem;
    border-radius:.9rem;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,.16);
}

.event-showcase-card{
    background: rgba(10, 67, 60, .42);
    border:1px solid rgba(255,255,255,.12);
    border-radius: 1.8rem;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    height:100%;
}

.event-showcase-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
}

.eyebrow,
.section-eyebrow{
    display:inline-block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .73rem;
    font-weight: 800;
}

.eyebrow{
    color: rgba(255,255,255,.72);
    margin-bottom:.4rem;
}

.showcase-badge{
    padding: .5rem .85rem;
    border-radius: 999px;
    background: rgba(34,197,94,.16);
    color:#bbf7d0;
    font-weight:700;
    font-size:.85rem;
    border:1px solid rgba(187,247,208,.18);
}

.showcase-list{
    display:grid;
    gap:.85rem;
}

.showcase-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.08);
    padding: .95rem 1rem;
}

.showcase-item span{
    color: rgba(255,255,255,.70);
    font-size: .93rem;
}

.showcase-item strong{
    font-size: 1rem;
    text-align:right;
}

.progress-soft{
    height: .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
}

.progress-kemenkes-bar{
    background: linear-gradient(90deg, #8ff0de, #d2fff7);
}

.public-stat-card{
    background: #fff;
    border-radius: 1.5rem;
    padding: 1.35rem;
    box-shadow: 0 18px 40px rgba(16, 80, 74, .08);
    border: 1px solid rgba(0,150,136,.08);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.public-stat-card::after{
    content:"";
    position:absolute;
    inset:auto -30px -30px auto;
    width: 95px;
    height: 95px;
    border-radius:50%;
    background: rgba(0,150,136,.06);
}

.stat-icon{
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 1.15rem;
    background: var(--kk-soft);
    margin-bottom: .9rem;
}

.stat-label{
    color:#5d7777;
    font-weight:700;
    margin-bottom:.35rem;
}

.stat-value{
    font-size: 2rem;
    line-height:1.15;
    font-weight: 800;
    color: var(--kk-dark);
    margin-bottom: .25rem;
}

.stat-value.stat-text{
    font-size: 1.45rem;
}

.stat-note{
    color:#708787;
    font-size: .92rem;
    line-height:1.6;
}

.home-section-card{
    background:#fff;
    border-radius: 1.8rem;
    padding: 1.75rem;
    box-shadow: 0 18px 40px rgba(16, 80, 74, .08);
    border:1px solid rgba(0,150,136,.08);
}

.section-heading-wrap{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
}

.section-eyebrow{
    color: var(--kk-main);
    margin-bottom:.6rem;
}

.section-title{
    font-size: clamp(1.55rem, 2.5vw, 2.3rem);
    font-weight: 800;
    color: var(--kk-text);
    letter-spacing: -.02em;
}

.section-subtitle{
    color: #5e7272;
    line-height: 1.8;
}

.flow-card{
    background: linear-gradient(180deg, #fbfefe 0%, #f1faf8 100%);
    border:1px solid rgba(0,150,136,.08);
    border-radius: 1.4rem;
    padding: 1.35rem;
    height:100%;
}

.flow-number{
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .9rem;
    background: linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    margin-bottom: 1rem;
}

.flow-card h3{
    font-size: 1.12rem;
    font-weight: 800;
    margin-bottom: .55rem;
}

.flow-card p{
    margin-bottom:0;
    color:#607575;
    line-height:1.7;
}

.feature-list-grid{
    display:grid;
    gap: 1rem;
}

.feature-list-item{
    display:flex;
    gap: .95rem;
    align-items:flex-start;
    padding: 1rem 1.05rem;
    border-radius: 1.2rem;
    background:#f6fbfa;
    border:1px solid rgba(0,150,136,.08);
}

.feature-list-item strong{
    display:block;
    margin-bottom:.25rem;
}

.feature-list-item p{
    color:#607575;
    line-height:1.6;
}

.feature-bullet{
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background: var(--kk-soft);
    color: var(--kk-dark);
    font-weight: 800;
}

.home-side-banner{
    border-radius: 1.8rem;
    padding: 1.75rem;
    background: linear-gradient(145deg, #0d6158 0%, #0b8175 100%);
    box-shadow: 0 24px 50px rgba(0, 105, 92, .20);
    color:#fff;
}

.home-side-banner h2{
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    font-weight: 800;
    margin-bottom: .7rem;
}

.home-side-banner p{
    color: rgba(255,255,255,.80);
    line-height:1.8;
}

.quick-link-stack{
    display:grid;
    gap:.85rem;
    margin-top:1.25rem;
}

.quick-link-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    text-decoration:none;
    color:#fff;
    padding: .95rem 1rem;
    background: rgba(255,255,255,.10);
    border-radius: 1rem;
    border:1px solid rgba(255,255,255,.10);
    transition: transform .15s ease, background .15s ease;
}

.quick-link-item:hover{
    transform: translateY(-2px);
    color:#fff;
    background: rgba(255,255,255,.16);
}

@media (max-width: 991.98px){
    .home-kemenkes-hero,
    .home-section-card,
    .home-side-banner{
        border-radius: 1.5rem;
    }

    .hero-mini-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px){
    .brand-title{
        font-size: 1.35rem;
    }

    .home-kemenkes-hero{
        padding: 1.4rem;
    }

    .home-subtitle{
        font-size: 1rem;
    }

    .public-navbar .navbar-brand{
        gap:.75rem !important;
    }

    .brand-mark-large{
        width: 2.75rem;
        height: 2.75rem;
    }

    .event-showcase-top,
    .section-heading-wrap{
        flex-direction: column;
    }

    .showcase-item{
        align-items:flex-start;
        flex-direction:column;
    }
}
:root{
    --kk-main:#009688;
    --kk-dark:#00695c;
    --kk-soft:#d9f3ef;
    --kk-bg:#f2fbf9;
    --kk-accent:#26a69a;
    --kk-text:#18323b;
}

body{
    color:var(--kk-text);
    background:var(--kk-bg);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.theme-auth{
    background:
        linear-gradient(135deg, rgba(0,150,136,.96), rgba(0,105,92,.96)),
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 30%);
}

.theme-main .container-fluid{
    max-width: 1800px;
}

.dashboard-filter .form-control,
.dashboard-filter .form-select{
    min-height: 3.1rem;
}

.dashboard-filter .form-label{
    font-weight:600;
}

.dashboard-filter .btn-kemenkes{
    min-height: 3.1rem;
}

.sidebar-kemenkes{
    background:#fff;
    border-radius:1.5rem;
    padding:1.5rem;
    box-shadow:0 .5rem 1.5rem rgba(0,0,0,.06);
}

.logo-badge,
.display-logo{
    width:3rem;
    height:3rem;
    border-radius:1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    color:#fff;
}

.display-logo{
    width:4rem;
    height:4rem;
    font-size:1.25rem;
}

.theme-chip{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    border-radius:999px;
    padding:.5rem .9rem;
    background:rgba(255,255,255,.14);
    color:#fff;
    font-size:.9rem;
}

.menu-list{
    display:grid;
    gap:.5rem;
}

.menu-link{
    text-decoration:none;
    padding:.9rem 1rem;
    border-radius:1rem;
    color:#456;
    background:#f6fbfb;
    font-weight:600;
}

.menu-link:hover,
.menu-link.active{
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    color:#fff;
}

.panel-highlight{
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    border-radius:1.5rem;
}

.btn-kemenkes{
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    color:#fff;
    border:none;
}

.btn-kemenkes:hover{
    color:#fff;
    filter:brightness(.96);
}

.btn-outline-kemenkes{
    border:1px solid var(--kk-main);
    color:var(--kk-main);
    background:#fff;
}

.btn-outline-kemenkes:hover{
    color:#fff;
    background:var(--kk-main);
    border-color:var(--kk-main);
}

.dashboard-header{
    background:#fff;
    border-radius:1.5rem;
    box-shadow:0 .5rem 1.5rem rgba(0,0,0,.06);
    padding:1.5rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}

.metric-card{
    background:#fff;
    border-radius:1.5rem;
    padding:1.25rem;
    box-shadow:0 .5rem 1.5rem rgba(0,0,0,.06);
    height:100%;
}

.metric-value{
    font-size:2.2rem;
    font-weight:800;
    margin:.35rem 0;
    color:var(--kk-dark);
}

.live-panel{
    border-radius:1.75rem;
    padding:1.5rem;
    background:linear-gradient(135deg, #173840, #0e5e57 45%, #06796e);
    color:#fff;
}

.score-card,
.set-box{
    border-radius:1.35rem;
    padding:1rem 1.1rem;
    background:#fff;
    color:#173840;
}

.set-box-active{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
}

.score-big{
    font-size:3rem;
    line-height:1;
    font-weight:800;
    color:var(--kk-dark);
}

.progress-kemenkes{
    height:.8rem;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    overflow:hidden;
}

.queue-card,
.status-card{
    background:#f8fbfb;
    border-radius:1rem;
    padding:1rem;
    margin-bottom:.9rem;
}

.badge-live{
    background:#22c55e;
    color:#fff;
    padding:.5rem .8rem;
    border-radius:999px;
}

.badge-soft{
    background:var(--kk-soft);
    color:var(--kk-dark);
    padding:.45rem .75rem;
    border-radius:999px;
}

.badge-ok{
    background:#dcfce7;
    color:#166534;
}

.badge-warn{
    background:#fff3cd;
    color:#8a6d3b;
}

.form-control,
.form-select,
textarea.form-control{
    border-radius:.95rem;
    min-height:2.8rem;
    border:1px solid rgba(0,150,136,.35);
    background:rgba(0,150,136,.05);
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.form-control::placeholder,
textarea.form-control::placeholder,
.form-select{
    color:var(--kk-text);
}

.form-label,
.form-check-label{
    color:var(--kk-dark);
    font-weight:600;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus{
    border-color:var(--kk-main);
    box-shadow:0 0 0 .25rem rgba(0,150,136,.18);
    background:rgba(0,150,136,.08);
}

.form-check-input:checked{
    background-color:var(--kk-main);
    border-color:var(--kk-main);
}

.btn-primary,
.btn-kemenkes{
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    color:#fff;
    border:none;
}

.btn-primary:hover,
.btn-kemenkes:hover{
    background:linear-gradient(135deg, var(--kk-dark), var(--kk-main));
    color:#fff;
}

.btn-outline-primary,
.btn-outline-kemenkes{
    color:var(--kk-main);
    border-color:var(--kk-main);
    background:#fff;
}

.btn-outline-primary:hover,
.btn-outline-kemenkes:hover{
    background:var(--kk-main);
    color:#fff;
}

.display-body{
    background: linear-gradient(135deg, #0e5e57 0%, #173840 50%, #0e5e57 100%);
    min-height: 100vh;
    color: #fff;
}

.live-display-header{
    text-align: center;
    padding: 2rem 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    margin-bottom: 2rem;
}

.match-card, .live-match-card{
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    color: #333;
    transition: all 0.3s ease;
    overflow: hidden;
}

.live-match-card{
    border: 2px solid #dc3545;
    box-shadow: 0 8px 32px rgba(220, 53, 69, 0.3);
}

.glow-effect{
    animation: glowPulse 2s infinite alternate;
}

@keyframes glowPulse {
    from { box-shadow: 0 8px 32px rgba(220, 53, 69, 0.3); }
    to { box-shadow: 0 8px 32px rgba(220, 53, 69, 0.6); }
}

.match-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.live-match-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(220, 53, 69, 0.4);
}

.match-title{
    font-size: 1rem;
    color: var(--kk-dark);
}

.participants-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.5rem 0;
}

.participant{
    flex: 1;
    text-align: center;
}

.participant-photo{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--kk-main);
    margin-bottom: 0.5rem;
}

.no-photo{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--kk-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    border: 3px solid var(--kk-main);
}

.participant-name{
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--kk-dark);
}

.vs-section{
    flex: 0 0 80px;
    text-align: center;
}

.vs-badge{
    background: var(--kk-main);
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0 auto 0.5rem;
}

.set-score{
    font-weight: bold;
    color: var(--kk-dark);
    font-size: 1.2rem;
}

.table-info{
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.match-time{
    text-align: center;
}

.animate-fade-in{
    animation: fadeIn 0.5s ease-in;
}

.animate-fade-out{
    animation: fadeOut 0.3s ease-out;
}

.animate-slide-in{
    animation: slideInUp 0.5s ease-out;
}

.card-click-effect{
    animation: clickEffect 0.3s ease;
}

.animate-pulse{
    animation: pulse 2s infinite;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes clickEffect {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

@keyframes progressPulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.progress-bar{
    background: linear-gradient(90deg, #dc3545, #ff6b6b);
}

#loading-spinner{
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .live-display-header{
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .participants-row{
        flex-direction: column;
        gap: 1rem;
    }

    .vs-section{
        order: 1;
    }

    .participant{
        order: 2;
    }

    .participant-photo, .no-photo{
        width: 60px;
        height: 60px;
    }
}


.form-label,
.form-check-label,
legend{
    color:var(--kk-text);
}

.btn-primary,
.btn-success,
.btn-kemenkes{
    background:var(--kk-main);
    border-color:var(--kk-main);
    color:#fff;
}

.btn-primary:hover,
.btn-success:hover,
.btn-kemenkes:hover{
    background:var(--kk-dark);
    border-color:var(--kk-dark);
    color:#fff;
}

.table > :not(caption) > * > *{
    padding:.9rem 1rem;
}

.display-hero,
.display-card,
.display-footer-box{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:2rem;
    box-shadow:0 .8rem 2rem rgba(0,0,0,.18);
    backdrop-filter:blur(8px);
}

.display-hero{
    padding:1.8rem;
}

.display-card{
    padding:1.5rem;
    height:100%;
}

.display-title{
    font-size:clamp(1.8rem, 3vw, 3.2rem);
    font-weight:800;
}

.display-stat{
    background:rgba(255,255,255,.08);
    border-radius:1.35rem;
    padding:1rem 1.1rem;
    min-width:160px;
}

.live-public-panel{
    background:#fff;
    color:#173840;
    border-radius:1.8rem;
    padding:1.5rem;
}

.display-match-title{
    font-size:clamp(1.6rem, 2.6vw, 2.6rem);
    font-weight:800;
    line-height:1.15;
}

.display-progress-box{
    background:#f0f7f6;
    border-radius:1.2rem;
    padding:1rem 1.1rem;
    min-width:120px;
}

.player-public-card,
.set-public,
.podium-box{
    border-radius:1.3rem;
    padding:1rem 1.1rem;
}

.player-public-card{
    border:2px solid #e5f0ef;
    background:#fff;
}

.score-public{
    font-size:4rem;
    line-height:1;
    font-weight:900;
    color:var(--kk-dark);
}

.set-public{
    background:#f1f6f6;
}

.set-public.active{
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
    color:#fff;
}

.display-list-item{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:1.3rem;
    padding:1rem 1.1rem;
    display:flex;
    justify-content:space-between;
    gap:1rem;
    align-items:flex-start;
    margin-bottom:.85rem;
}

/* Kemenkes green-tosca form styling */
.form-label,
label {
    color: var(--kk-dark);
}

.form-control,
.form-select,
textarea.form-control {
    border-radius: .95rem;
    min-height: 2.8rem;
    border-color: rgba(0,150,136,.35);
    background-color: #f7fffd;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--kk-main);
    box-shadow: 0 0 0 .25rem rgba(0,150,136,.18);
}

.form-check-input:checked {
    background-color: var(--kk-main);
    border-color: var(--kk-main);
}

.btn-primary,
.btn-kemenkes,
.btn-tm {
    background: var(--kk-main) !important;
    border-color: var(--kk-main) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-kemenkes:hover,
.btn-tm:hover {
    background: var(--kk-dark) !important;
    border-color: var(--kk-dark) !important;
}

.btn-outline-primary {
    color: var(--kk-main) !important;
    border-color: var(--kk-main) !important;
}

.btn-outline-primary:hover {
    background: var(--kk-main) !important;
    color: #fff !important;
}

.form-control::placeholder,
.form-select::placeholder {
    color: rgba(0, 0, 0, .45);
}

.display-time-box{
    background:rgba(255,255,255,.1);
    border-radius:1rem;
    padding:.8rem .9rem;
    min-width:86px;
    text-align:center;
    font-weight:800;
    font-size:1.1rem;
}

.podium-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:1.4rem;
    padding:1rem 1.1rem;
    margin-bottom:1rem;
}

.podium-1{ background:rgba(251,191,36,.18); }
.podium-2{ background:rgba(203,213,225,.18); }
.podium-3{ background:rgba(249,115,22,.18); }

.display-footer-box{
    padding:1.1rem 1.2rem;
}

@media (max-width: 991.98px){
    .dashboard-header{
        align-items:flex-start;
    }
}

/* ===== Dashboard Tosca Redesign ===== */
:root{
    --tosca:#0aa69d;
    --tosca-2:#00796f;
    --tosca-dark:#004d45;
    --tosca-soft:#e8fbf8;
    --tosca-bg:#f6fffd;
    --ink:#132333;
    --muted:#6b7280;
    --line:#e5ecef;
}
.admin-shell{background:var(--tosca-bg); color:var(--ink); overflow-x:hidden;}
.app-wrapper{min-height:100vh; display:flex;}
.app-sidebar{width:315px; background:linear-gradient(180deg,#097d75 0%,#004b45 75%,#013632 100%); color:#fff; position:sticky; top:0; height:100vh; padding:18px 14px; box-shadow:8px 0 30px rgba(0,0,0,.08); z-index:20; overflow-y:auto;}
.brand-area{display:flex; align-items:center; gap:12px; margin-bottom:20px; min-height:52px;}
.sidebar-burger{background:transparent; border:0; color:white; font-size:1.45rem; padding:0 4px;}
.brand-logo{width:44px;height:44px;display:grid;place-items:center;font-size:1.9rem;border-radius:14px;background:rgba(255,255,255,.08);}
.brand-title{font-weight:800; letter-spacing:.5px; font-size:1.2rem; line-height:1;}
.brand-subtitle{font-size:.78rem; color:rgba(255,255,255,.78); font-weight:600;}
.sidebar-nav{display:grid; gap:8px;}
.side-section{font-size:.78rem; color:#38f5dd; text-transform:uppercase; font-weight:800; margin:18px 10px 6px; letter-spacing:.04em;}
.side-link{display:flex; align-items:center; gap:14px; color:#fff; text-decoration:none; padding:12px 14px; border-radius:10px; font-weight:650; border:1px solid transparent; transition:.2s ease;}
.side-link i{width:22px; font-size:1.12rem; text-align:center;}
.side-link:hover{background:rgba(255,255,255,.11); color:#fff; transform:translateX(2px);}
.side-link.active{background:linear-gradient(135deg,#18c9bd,#0a9d93); color:#fff; box-shadow:0 10px 24px rgba(10,166,157,.28);}
.app-main{flex:1; min-width:0;}
.app-topbar{height:72px; background:linear-gradient(90deg,#00766f,#0aa69d); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 28px; position:sticky; top:0; z-index:15; box-shadow:0 8px 28px rgba(0,0,0,.08);}
.topbar-title{font-weight:800; font-size:1.05rem;}
.topbar-subtitle{font-size:.82rem; opacity:.78;}
.topbar-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end;}
.topbar-pill{display:flex; align-items:center; gap:8px; padding:8px 12px; border-right:1px solid rgba(255,255,255,.18); font-weight:650;}
.notification-bell{position:relative; font-size:1.25rem; padding:6px 8px;}
.notification-bell em{position:absolute; top:-4px; right:-4px; width:20px; height:20px; border-radius:50%; background:#ef4444; font-size:.68rem; font-style:normal; display:grid; place-items:center; font-weight:800;}
.user-chip{display:flex; align-items:center; gap:9px;}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);color:#0a8f85;font-size:1.3rem;}
.user-chip small{display:block; color:rgba(255,255,255,.78); margin-top:-3px;}
.page-content{padding:28px;}
.dashboard-heading{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;}
.dashboard-heading h1{font-size:1.55rem; font-weight:800; margin:0 0 6px;}
.dashboard-heading p{margin:0; color:var(--muted);}
.heading-actions{display:flex; gap:10px; flex-wrap:wrap;}
.btn-tosca{background:linear-gradient(135deg,var(--tosca),var(--tosca-2)); color:#fff; border:0; border-radius:12px; padding:.65rem 1rem; font-weight:700;}
.btn-tosca:hover{filter:brightness(.95); color:#fff;}
.btn-outline-tosca{background:#fff; color:var(--tosca-2); border:1px solid rgba(10,166,157,.35); border-radius:12px; padding:.65rem 1rem; font-weight:700;}
.btn-outline-tosca:hover{background:var(--tosca); color:#fff;}
.stat-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px; display:flex; align-items:center; gap:16px; box-shadow:0 10px 26px rgba(15,35,50,.06); transition:.2s ease;}
.stat-card:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(15,35,50,.10);}
.stat-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem; flex:0 0 auto;}
.stat-icon.green{background:#dff7ef;color:#079172}.stat-icon.blue{background:#e5f0ff;color:#2563eb}.stat-icon.red{background:#fee2e2;color:#ef4444}.stat-icon.success{background:#dcfce7;color:#22a957}.stat-icon.orange{background:#fff3d7;color:#f59e0b}.stat-icon.purple{background:#efe7ff;color:#7c3aed}
.stat-title{font-size:.92rem; color:#667085;}.stat-value{font-size:1.8rem; line-height:1.05; font-weight:850; color:#111827; margin:4px 0;}.stat-desc{font-size:.84rem; color:#7b8190;}
.panel-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px; box-shadow:0 10px 26px rgba(15,35,50,.06);}
.panel-title-bar{background:linear-gradient(135deg,var(--tosca),var(--tosca-2)); color:white; margin:-20px -20px 18px; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:14px;}
.panel-title-bar h2,.section-title{font-size:1.15rem; font-weight:800; margin:0;}
.panel-title-bar a,.panel-link{color:#fff; text-decoration:none; font-weight:700;}
.panel-link{color:var(--tosca-2);}
.event-feature{background:linear-gradient(135deg,#eefbf9,#fff); border:1px solid #dbeeed; border-radius:10px; padding:24px; display:flex; gap:18px; align-items:flex-start;}
.event-feature h3{font-size:1.12rem; font-weight:800; color:#07575a; margin-bottom:18px;}.event-feature p{margin:8px 0; color:#475569; display:flex; align-items:center; gap:9px;}
.event-trophy{font-size:2.35rem; color:#f5a400; line-height:1;}
.event-badges{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px;}.event-badges span{background:#f3f8ff; color:#2563eb; border:1px solid #dbeafe; border-radius:8px; padding:10px 14px; font-weight:700;}.event-badges span:nth-child(2){background:#ecfdf5;color:#078b77;border-color:#c7f2e6}.event-badges span:nth-child(3){background:#f4f1ff;color:#7c3aed;border-color:#e7ddff}.event-badges .live{background:#e9fbf4;color:#047857;border-color:#c8f5e2}.event-badges .live i{font-size:.6rem;}
.quick-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px;}.quick-card{min-height:114px; border:1px solid #dbe5ea; border-radius:10px; text-decoration:none; color:#1f2937; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:16px; transition:.2s ease; background:linear-gradient(135deg,#fff,#fbfffe);}.quick-card:hover{transform:translateY(-3px); box-shadow:0 16px 28px rgba(0,0,0,.08); color:#0b736b}.quick-card.accent{border-color:#fed7aa;background:#fffaf2}.quick-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.55rem}.quick-icon.green{background:#0aa69d}.quick-icon.blue{background:#2563eb}.quick-icon.orange{background:#f59e0b}.quick-icon.purple{background:#7c3aed}.quick-icon.red{background:#ef4444}
.system-card{display:flex; justify-content:space-between; align-items:center; background:linear-gradient(135deg,#f0fffb,#fff);}.system-list{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px;}.system-list li{display:flex; align-items:center; gap:10px; color:#35525c;}.system-list i{color:#22c55e}.paddle-illustration{font-size:7rem; opacity:.9; filter:drop-shadow(0 12px 18px rgba(0,0,0,.12)); transform:rotate(-18deg);}
.dashboard-table thead th{background:#f8fafc; color:#344054; font-size:.86rem;}.status-pill{display:inline-flex; align-items:center; justify-content:center; border-radius:8px; padding:6px 12px; background:#f1f5f9; color:#64748b; font-weight:800; font-size:.8rem;}.status-pill.active{background:#dcfce7;color:#047857}.status-pill.soon{background:#e8f1ff;color:#2563eb}.status-pill.danger{background:#fee2e2;color:#dc2626}.match-monitor-card{height:100%; background:#f8fffd; border:1px solid #d9efec; border-radius:12px; padding:16px;}.match-monitor-card small{display:block; color:#667085; margin-bottom:4px;}.list-stack{display:grid; gap:12px;}.stack-item{border:1px solid var(--line); border-radius:12px; padding:14px; background:#fbfffe; display:grid; gap:4px;}.stack-item small{color:#667085}.stack-item span{color:#0b756d; font-weight:700; font-size:.88rem}.empty-state{background:#f8fafc; border:1px dashed #cbd5e1; border-radius:12px; padding:24px; color:#64748b; text-align:center;}.app-footer{display:flex; justify-content:space-between; gap:12px; color:#7b8190; padding:24px 0 0; margin-top:18px; font-size:.9rem;}
.mobile-menu{background:linear-gradient(180deg,#097d75,#004b45); color:#fff;}.mobile-menu .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.12)}
@media (max-width:1199.98px){.page-content{padding:20px}.app-topbar{padding:0 18px}.topbar-pill{display:none}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:767.98px){.app-topbar{height:auto; min-height:64px; padding:12px 16px; align-items:flex-start}.topbar-actions{gap:8px}.notification-bell,.user-chip .avatar{display:none}.dashboard-heading h1{font-size:1.35rem}.quick-grid{grid-template-columns:1fr}.stat-card{padding:16px}.stat-icon{width:52px;height:52px;font-size:1.45rem}.event-feature{flex-direction:column}.paddle-illustration{display:none}.app-footer{flex-direction:column}.heading-actions .btn{width:100%;}.heading-actions{width:100%;}.dashboard-heading{align-items:stretch;}}

/* ========== Registration page redesign ========== */
.registration-page{
    min-height:100vh;
    background:
        radial-gradient(circle at top left, rgba(0,150,136,.16), transparent 22%),
        radial-gradient(circle at top right, rgba(38,166,154,.18), transparent 28%),
        linear-gradient(180deg, #edf9f6 0%, #f7fcfb 42%, #eef8f7 100%);
}

.reg-page-wrap{
    position:relative;
    overflow:hidden;
}

.reg-page-wrap::before,
.reg-page-wrap::after{
    content:"";
    position:fixed;
    border-radius:50%;
    filter:blur(24px);
    z-index:0;
    pointer-events:none;
}

.reg-page-wrap::before{
    width:280px;
    height:280px;
    top:-80px;
    right:-70px;
    background:rgba(0,150,136,.14);
}

.reg-page-wrap::after{
    width:220px;
    height:220px;
    bottom:30px;
    left:-80px;
    background:rgba(38,166,154,.12);
}

.reg-page-wrap .container{
    position:relative;
    z-index:1;
}

.reg-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}

.reg-brand{
    display:flex;
    align-items:center;
    gap:.9rem;
    color:var(--kk-text);
}

.reg-brand strong{
    display:block;
    font-size:1.55rem;
    line-height:1.1;
    color:#0a5d55;
}

.reg-brand small{
    display:block;
    color:#55737d;
    font-size:.94rem;
}

.reg-brand-mark{
    width:3.45rem;
    height:3.45rem;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2,1fr);
    gap:4px;
    padding:4px;
    border-radius:1.1rem;
    background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.55));
    box-shadow:0 10px 25px rgba(0,105,92,.15);
}

.reg-brand-mark span:nth-child(1){background:#00a89d;border-radius:1rem 0 1rem 0;}
.reg-brand-mark span:nth-child(2){background:#7bc77a;border-radius:0 1rem 0 1rem;}
.reg-brand-mark span:nth-child(3){background:#1ab7a6;border-radius:0 1rem 0 1rem;}
.reg-brand-mark span:nth-child(4){background:#bfd730;border-radius:1rem 0 1rem 0;}

.reg-top-actions{
    display:flex;
    gap:.65rem;
    flex-wrap:wrap;
}

.reg-top-btn{
    border-radius:999px;
    padding:.6rem 1rem;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.reg-hero{
    position:relative;
    padding:2rem;
    border-radius:2rem;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at right top, rgba(255,255,255,.18), transparent 25%),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.10), transparent 30%),
        linear-gradient(135deg, #0a867b 0%, #0f978f 30%, #0a6f67 70%, #0c5954 100%);
    box-shadow:0 20px 60px rgba(8,101,92,.22);
}

.reg-hero::before{
    content:"";
    position:absolute;
    inset:auto -80px -120px auto;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}

.reg-pill{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.55rem 1rem;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    font-size:.92rem;
    font-weight:600;
    backdrop-filter:blur(8px);
}

.reg-title{
    font-size:clamp(2rem, 4vw, 3.2rem);
    line-height:1.08;
    margin:0;
    font-weight:800;
}

.reg-subtitle{
    color:rgba(255,255,255,.88);
    max-width:780px;
    font-size:1.04rem;
}

.reg-feature-grid{
    display:grid;
    gap:.9rem;
}

.reg-feature-item{
    display:flex;
    gap:.9rem;
    align-items:flex-start;
    padding:.85rem 1rem;
    border-radius:1rem;
    background:rgba(255,255,255,.11);
    backdrop-filter:blur(8px);
}

.reg-feature-item i{
    font-size:1.1rem;
    width:2.35rem;
    height:2.35rem;
    border-radius:.8rem;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.14);
}

.reg-feature-item strong,
.reg-mini-stat strong{
    display:block;
}

.reg-feature-item small,
.reg-mini-stat small{
    display:block;
    color:rgba(255,255,255,.82);
}

.reg-hero-side{
    display:grid;
    gap:1rem;
}

.reg-mini-stat{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1rem 1.1rem;
    border-radius:1.25rem;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
}

.reg-mini-stat .icon{
    width:3rem;
    height:3rem;
    border-radius:1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.18);
    font-size:1.2rem;
}

.reg-alert{
    border:none;
    border-radius:1.25rem;
}

.reg-steps{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:1rem;
}

.reg-step-card{
    display:flex;
    gap:1rem;
    align-items:flex-start;
    padding:1rem 1.15rem;
    border-radius:1.35rem;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(0,150,136,.12);
    box-shadow:0 12px 30px rgba(0,0,0,.05);
}

.reg-step-card .step-no{
    width:2.3rem;
    height:2.3rem;
    border-radius:.9rem;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    font-weight:800;
    color:#fff;
    background:linear-gradient(135deg, var(--kk-main), var(--kk-dark));
}

.reg-step-card strong{
    display:block;
    color:#124340;
}

.reg-step-card small{
    display:block;
    color:#5f777f;
}

.reg-form-shell{
    display:block;
}

.reg-section{
    background:rgba(255,255,255,.86);
    border:1px solid rgba(0,150,136,.10);
    border-radius:1.8rem;
    box-shadow:0 16px 45px rgba(0,0,0,.06);
    overflow:hidden;
    backdrop-filter:blur(10px);
}

.reg-section-head{
    padding:1.4rem 1.5rem;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
    background:linear-gradient(180deg, rgba(0,150,136,.08), rgba(0,150,136,.02));
    border-bottom:1px solid rgba(0,150,136,.10);
}

.reg-section-head h2{
    margin:.2rem 0 .3rem;
    font-size:1.55rem;
    color:#113b39;
}

.reg-section-head p{
    margin:0;
    color:#60777d;
}

.reg-section-step{
    display:inline-flex;
    padding:.35rem .75rem;
    border-radius:999px;
    background:var(--kk-soft);
    color:var(--kk-dark);
    font-weight:700;
    font-size:.85rem;
}

.reg-section-icon{
    width:3rem;
    height:3rem;
    border-radius:1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, rgba(0,150,136,.15), rgba(0,105,92,.18));
    color:var(--kk-dark);
    font-size:1.25rem;
    flex:0 0 auto;
}

.reg-section-body{
    padding:1.5rem;
}

.reg-info-card{
    padding:1rem 1.1rem;
    border-radius:1.15rem;
    border:1px dashed rgba(0,150,136,.26);
    background:linear-gradient(180deg, rgba(0,150,136,.05), rgba(0,150,136,.02));
}

.reg-info-chip{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    border-radius:999px;
    padding:.45rem .8rem;
    background:#fff;
    color:#0a5f57;
    border:1px solid rgba(0,150,136,.12);
}

.reg-counter-badge{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.65rem .95rem;
    border-radius:999px;
    background:rgba(0,150,136,.08);
    color:#0a5f57;
    font-weight:700;
}

.player-card{
    padding:1.2rem;
    border-radius:1.45rem;
    border:1px solid rgba(0,150,136,.12);
    background:linear-gradient(180deg, #fff, #fbfefe);
    box-shadow:0 12px 30px rgba(0,0,0,.04);
}

.player-card + .player-card{
    margin-top:1rem;
}

.player-card-head{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    align-items:center;
    margin-bottom:1rem;
    padding-bottom:.95rem;
    border-bottom:1px solid rgba(0,150,136,.10);
}

.player-badge{
    display:inline-block;
    margin-bottom:.25rem;
    color:#0a7468;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
}

.player-card-head h5{
    color:#123a38;
    font-weight:800;
}

.reg-tip-box{
    display:flex;
    align-items:flex-start;
    gap:.8rem;
    padding:1rem 1.1rem;
    border-radius:1.15rem;
    background:#effaf7;
    border:1px solid rgba(0,150,136,.10);
    color:#285d59;
}

.reg-tip-box i{
    color:var(--kk-main);
    font-size:1.05rem;
    margin-top:.1rem;
}

.mapping-card{
    padding:1.1rem;
    border-radius:1.35rem;
    border:1px solid rgba(0,150,136,.12);
    background:linear-gradient(180deg, #fff, #fbfefe);
    box-shadow:0 12px 28px rgba(0,0,0,.04);
}

.mapping-card-head{
    display:flex;
    align-items:center;
    gap:.65rem;
    font-size:1.03rem;
    font-weight:800;
    color:#133e3a;
    margin-bottom:.5rem;
}

.mapping-list{
    display:grid;
    gap:.65rem;
}

.mapping-option{
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:.7rem .8rem;
    border-radius:1rem;
    background:#f5fbfa;
    border:1px solid rgba(0,150,136,.08);
    color:#224a49;
}

.mapping-empty{
    padding:.8rem .9rem;
    border-radius:1rem;
    background:#f7fbfb;
    color:#647d81;
    font-size:.94rem;
}

.double-row{
    padding:.8rem;
    border-radius:1rem;
    border:1px solid rgba(0,150,136,.10);
    background:#f7fbfb;
}

.reg-submit-bar{
    position:sticky;
    bottom:1rem;
    z-index:5;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding:1rem 1.2rem;
    border-radius:1.25rem;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,150,136,.14);
    box-shadow:0 18px 50px rgba(0,0,0,.10);
    backdrop-filter:blur(14px);
}

.registration-page .form-text{
    color:#658086;
}

.registration-page .btn-outline-secondary{
    border-color:rgba(17,59,57,.22);
    color:#194946;
}

.registration-page .btn-outline-secondary:hover{
    background:#194946;
    border-color:#194946;
    color:#fff;
}

@media (max-width: 991.98px){
    .reg-steps{grid-template-columns:1fr;}
    .reg-hero{padding:1.5rem;}
}

@media (max-width: 767.98px){
    .reg-brand strong{font-size:1.25rem;}
    .reg-title{font-size:2rem;}
    .reg-section-head,
    .reg-section-body,
    .player-card,
    .reg-submit-bar{padding:1rem;}
    .player-card-head,
    .reg-submit-bar,
    .reg-topbar{flex-direction:column;align-items:stretch;}
    .reg-top-actions{justify-content:flex-start;}
}