@import url('challenge-art.css?v=20260831-1');

.sta-back-button{position:fixed;left:18px;bottom:18px;z-index:9990;display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff44;border-radius:999px;padding:11px 17px;background:#071b3f;color:#fff;font-weight:800;box-shadow:0 10px 28px #071b3f55}.sta-back-button:hover{background:#0b4267;color:#fff}.student-profile-photo{width:150px;height:150px;display:block;margin:0 auto;object-fit:cover;border-radius:50%;border:5px solid #fff;box-shadow:0 12px 32px rgba(19,32,74,.24)}@media(max-width:575.98px){.sta-back-button{left:12px;bottom:12px;padding:10px 13px}.sta-back-button span{font-size:.82rem}.student-profile-photo{width:120px;height:120px}}

:root {
    --sta-navy: #17224d;
    --sta-blue: #153b73;
    --sta-orange: #ff8534;
    --sta-green: #79c52d;
    --sta-surface: rgba(255, 255, 255, .96);
    --sta-border: rgba(23, 34, 77, .12);
    --sta-shadow: 0 18px 45px rgba(18, 31, 66, .13);
}

html { min-height: 100%; }

body {
    min-height: 100vh;
    color: #17213a;
    background:
        linear-gradient(135deg, rgba(246, 249, 255, .95), rgba(239, 246, 255, .91)),
        url('../img/carousel-1.jpg') center / cover fixed no-repeat !important;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 88% 12%, rgba(255, 133, 52, .12), transparent 30%);
    z-index: -1;
}

.card,
.content-card,
.dashboard-card,
.profile-card,
.table-responsive {
    border: 1px solid var(--sta-border) !important;
    border-radius: 18px !important;
    background: var(--sta-surface);
    box-shadow: var(--sta-shadow);
}

.card-header {
    border-radius: 18px 18px 0 0 !important;
}

.form-control,
.form-select {
    min-height: 46px;
    border-radius: 10px;
    border-color: #cfd8e8;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sta-orange);
    box-shadow: 0 0 0 .2rem rgba(255, 133, 52, .16);
}

.btn {
    border-radius: 10px;
    font-weight: 600;
}

.btn-primary,
.bg-primary {
    background-color: var(--sta-blue) !important;
    border-color: var(--sta-blue) !important;
}

.alert {
    border: 0;
    border-left: 5px solid currentColor;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(18, 31, 66, .08);
}

.table { margin-bottom: 0; }
.table thead th {
    background: #edf3fb;
    color: var(--sta-navy);
    border-bottom-width: 1px;
    white-space: nowrap;
}

.sidebar {
    background: linear-gradient(180deg, #17224d, #0f193b) !important;
    box-shadow: 10px 0 35px rgba(8, 18, 48, .16);
}

.sidebar .nav-link { border-radius: 10px; margin: 2px 10px; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { background: rgba(255, 133, 52, .2) !important; color: #fff !important; }

.lms-page-header {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    color: #fff;
    border-radius: 18px;
    background:
        linear-gradient(110deg, rgba(23, 34, 77, .96), rgba(21, 59, 115, .88)),
        url('../img/carousel-2.jpg') center / cover;
    box-shadow: var(--sta-shadow);
}

.lms-error-page {
    display: grid;
    place-items: center;
    padding: 24px;
}

.lms-error-card {
    width: min(620px, 100%);
    padding: clamp(28px, 6vw, 56px);
    text-align: center;
    border-radius: 24px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 28px 70px rgba(11, 25, 61, .24);
}

.lms-error-card img { width: min(220px, 70%); margin-bottom: 24px; }
.lms-error-code { color: var(--sta-orange); font-size: .9rem; font-weight: 800; letter-spacing: .14em; }
.lms-error-card h1 { color: var(--sta-navy); font-size: clamp(1.6rem, 4vw, 2.35rem); }
.lms-error-card p { color: #5e687f; margin: 18px auto 28px; }
.lms-error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 767.98px) {
    body { background-attachment: scroll; }
    .card, .content-card, .dashboard-card, .profile-card, .table-responsive { border-radius: 14px !important; }
    .lms-page-header { padding: 1rem; border-radius: 14px; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Phase 2 public talent profile: contain Bootstrap row rounding on narrow devices. */
html:has(.talent-hero),body:has(.talent-hero){max-width:100%;overflow-x:hidden}

/* Phase 3 public challenges, campaigns, sharing and lightweight loading polish */
:root{--sta-navy:#071b3f;--sta-cyan:#18b8c9;--sta-teal:#0b7285;--sta-green:#52b848;--sta-gold:#f7bf42}
html.sta-loading body:before{content:"Learn. Grow. Succeed.";position:fixed;z-index:9999;left:50%;top:18px;transform:translateX(-50%);padding:10px 18px 10px 52px;border-radius:999px;background:#fff url('../assets/images/icon.png') 12px center/30px 30px no-repeat;color:var(--sta-navy);font-weight:800;box-shadow:0 12px 35px #071b3f33;pointer-events:none;animation:sta-pulse .75s ease-in-out infinite alternate}@keyframes sta-pulse{to{transform:translateX(-50%) scale(1.025);opacity:.82}}
.sta-install-guide{position:fixed!important;z-index:9998!important;right:18px;bottom:18px;width:min(430px,calc(100vw - 36px))!important;max-width:430px!important;display:grid!important;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:14px;background:linear-gradient(135deg,#071b3f,#0b4267)!important;color:#fff!important;border:1px solid #ffffff38;border-radius:20px!important;padding:16px!important;box-shadow:0 22px 65px #071b3f66;overflow:visible!important}.sta-install-guide img{display:block!important;width:58px!important;height:58px!important;max-width:58px!important;max-height:58px!important;object-fit:contain!important;border-radius:14px;background:#fff;padding:6px}.sta-install-guide div{display:grid;min-width:0}.sta-install-guide strong{color:#fff!important;font-size:1rem;line-height:1.2}.sta-install-guide span{font-size:.79rem;color:#dce9f4;line-height:1.35;margin-top:3px}.sta-install-button{border:0;border-radius:11px;background:var(--sta-green);color:#071b3f;font-weight:800;padding:10px 13px;white-space:nowrap}.sta-install-close{position:absolute;right:-7px;top:-10px;width:30px;height:30px;border:0;border-radius:50%;background:#fff;color:#071b3f;font-size:20px;line-height:1;box-shadow:0 4px 12px #0003}.challenge-card-share{margin-top:10px;text-align:center}
.public-mini-nav{min-height:78px;padding:12px clamp(18px,5vw,70px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff;box-shadow:0 5px 24px #071b3f14;position:relative;z-index:5}.public-mini-nav img{width:min(220px,45vw);max-height:58px;object-fit:contain}.public-mini-nav nav{display:flex;gap:24px;align-items:center}.public-mini-nav a{color:var(--sta-navy);font-weight:700;text-decoration:none}.public-mini-nav a.active{color:var(--sta-teal)}
.challenge-public{margin:0;background:#f5f8fc;color:var(--sta-navy);overflow-x:hidden}.challenge-hero{position:relative;isolation:isolate;min-height:430px;padding:70px max(6vw,24px);display:flex;align-items:center;justify-content:space-between;gap:40px;background-image:linear-gradient(115deg,rgba(7,27,63,.96),rgba(10,49,89,.83)),url('../img/carousel-1.jpg');background-size:cover;background-position:center;color:#fff}.challenge-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 85% 20%,#1ec7d53d,transparent 32%)}.challenge-hero>div:first-child{max-width:760px}.challenge-hero h1{font-size:clamp(2.4rem,6vw,5rem);line-height:1.02;margin:.35em 0;color:#fff!important;text-shadow:0 3px 18px #0008}.challenge-hero p{font-size:clamp(1rem,2vw,1.3rem);max-width:680px;color:#fff!important;text-shadow:0 2px 9px #0008}.eyebrow{display:inline-block;color:var(--sta-cyan);font-weight:800;letter-spacing:.12em;font-size:.78rem}.challenge-orbit{width:220px;aspect-ratio:1;border:2px solid #ffffff77;border-radius:50%;display:grid;place-items:center;font-size:5rem;font-weight:900;color:var(--sta-gold);box-shadow:0 0 0 28px #18b8c922,0 0 0 55px #52b84818;background:#071b3f55;flex:none}.challenge-filters{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}.challenge-filters a{white-space:nowrap;text-decoration:none;padding:9px 14px;border-radius:999px;background:#fff;color:var(--sta-navy);border:1px solid #dce5ed}.challenge-filters a.active{background:var(--sta-navy);color:#fff}.challenge-card,.challenge-intro,.question-card,.result-panel,.share-panel,.lead-capture,.course-recommendation,.professional-empty{background:#fff;border:1px solid #e1e8ef;border-radius:20px;padding:28px;box-shadow:0 14px 38px #071b3f0e}.challenge-card{height:100%;display:flex;flex-direction:column}.challenge-card>span{color:var(--sta-teal);font-weight:800}.challenge-card h2{font-size:1.4rem;margin:.7rem 0}.challenge-card p{color:#5d6a78;flex:1}.challenge-meta{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #e8edf2;padding:15px 0}.challenge-intro{max-width:850px;margin:auto;padding:clamp(28px,6vw,65px)}.challenge-intro h1{font-size:clamp(2rem,5vw,4rem)}.challenge-test-header{background:var(--sta-navy);color:#fff;padding:14px max(4vw,18px);display:flex;align-items:center;gap:24px;position:sticky;top:0;z-index:4}.challenge-test-header img{width:170px;background:#fff;border-radius:10px;padding:6px}.challenge-test-header strong{flex:1}.question-card{border:0;margin-bottom:20px}.question-card legend{font-size:1.15rem;font-weight:800;display:flex;gap:12px}.question-card legend span{background:var(--sta-teal);color:#fff;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}.answer-option{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid #dfe7ee;border-radius:12px;margin:9px 0;cursor:pointer}.answer-option:hover{border-color:var(--sta-cyan);background:#edfbfd}.result-shell{background:linear-gradient(135deg,var(--sta-navy),#0b5770);color:#fff;border-radius:28px;padding:clamp(28px,6vw,64px);display:flex;align-items:center;gap:clamp(25px,7vw,80px)}.result-shell h1,.result-shell p{color:#fff!important}.result-score{width:190px;aspect-ratio:1;border-radius:50%;border:10px solid var(--sta-gold);display:grid;place-items:center;align-content:center;flex:none}.result-score span{font-size:3.5rem;font-weight:900}.result-score small{font-size:.65rem}.result-panel{height:100%}.share-panel,.lead-capture{margin-top:28px}.share-actions{display:flex;flex-wrap:wrap;gap:10px}.share-actions a,.share-actions button{border:1px solid #cfdce6;background:#fff;color:var(--sta-navy);padding:10px 15px;border-radius:10px;text-decoration:none;font-weight:700}.course-recommendation{height:100%;display:flex;flex-direction:column}.course-recommendation h3{font-size:1.1rem}.course-recommendation p{flex:1}.course-recommendation a{margin-top:10px;color:var(--sta-teal);font-weight:800}.sta-video-campaign{margin:0;min-height:380px;background:linear-gradient(110deg,var(--sta-navy) 0 48%,#eaf8fa 48%);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(20px,5vw,80px);padding:clamp(30px,5vw,72px);color:#fff}.sta-video-copy span{color:var(--sta-cyan);font-weight:800;text-transform:uppercase;letter-spacing:.1em}.sta-video-copy h2{font-size:clamp(2rem,4vw,4rem);line-height:1.02;margin:12px 0}.sta-video-frame{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 20px 60px #071b3f44;background:#06132b;aspect-ratio:16/9}.sta-video-frame video{width:100%;height:100%;object-fit:cover}.sta-video-controls{position:absolute;right:12px;bottom:12px;display:flex;gap:7px}.sta-video-controls button{border:0;background:#071b3fdd;color:#fff;border-radius:8px;padding:7px 11px}.skeleton{background:linear-gradient(90deg,#e8eef3 25%,#f8fafb 50%,#e8eef3 75%);background-size:200% 100%;animation:skeleton 1.2s infinite;border-radius:10px;color:transparent!important}@keyframes skeleton{to{background-position:-200% 0}}
@media(max-width:767px){.public-mini-nav{min-height:auto;padding:11px 16px;align-items:center;gap:12px}.public-mini-nav img{width:min(160px,42vw);max-height:48px}.public-mini-nav nav{gap:8px;flex-wrap:wrap;justify-content:flex-end;font-size:.76rem}.public-mini-nav nav a{padding:5px 0}.challenge-hero{min-height:390px;padding:54px 22px;background-position:58% center}.challenge-hero h1{font-size:clamp(2.25rem,12vw,3.6rem)}.challenge-hero p{font-size:1.03rem}.challenge-orbit{display:none}.challenge-public .container{max-width:100%;padding-left:16px;padding-right:16px}.challenge-card,.challenge-intro,.question-card,.result-panel,.share-panel,.lead-capture,.course-recommendation,.professional-empty{padding:21px;border-radius:16px}.challenge-meta{flex-direction:column}.result-shell{display:block;border-radius:20px}.result-score{width:145px;margin-bottom:25px}.result-score span{font-size:2.6rem}.share-actions>*{flex:1 1 calc(50% - 10px);text-align:center}.sta-video-campaign{grid-template-columns:1fr;background:linear-gradient(160deg,var(--sta-navy) 0 55%,#eaf8fa 55%);padding-bottom:55px}.challenge-test-header img{width:105px}.challenge-test-header{gap:10px;padding:11px 14px}.challenge-test-header strong{font-size:.9rem}.question-card{padding:18px}.answer-option{align-items:flex-start}.sta-install-guide{left:12px!important;right:12px!important;bottom:12px;width:auto!important;max-width:none!important;grid-template-columns:50px minmax(0,1fr);gap:11px;padding:14px!important;border-radius:17px!important}.sta-install-guide img{width:50px!important;height:50px!important;max-width:50px!important}.sta-install-button{grid-column:1/-1;width:100%;padding:10px}.sta-install-close{right:4px;top:-12px}}@media(max-width:420px){.public-mini-nav{align-items:flex-start}.public-mini-nav nav{max-width:50%;justify-content:flex-end}.challenge-hero{min-height:410px}.share-actions>*{flex-basis:100%}.sta-install-guide strong{font-size:.92rem}.sta-install-guide span{font-size:.74rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.sta-video-frame video{display:none}}