@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ========================================
THEME VARIABLES (CINEMATIC EPIC - LIGHT & DARK)
======================================== 
*/
:root {
/* Light Mode - Epic Bright Glass */
--bg-color: #f8fafc;
--orb-color: rgba(99, 102, 241, 0.2);
--card-bg: rgba(255, 255, 255, 0.6);
--card-border: rgba(99, 102, 241, 0.15);
--card-shadow: 0 10px 40px -10px rgba(99, 102, 241, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
--accent-primary: #4f46e5;
--accent-secondary: #0ea5e9;
--title-gradient: linear-gradient(to right, #4f46e5, #0ea5e9, #4f46e5);
--text-main: #0f172a;
--text-muted: #64748b;
--input-bg: rgba(255, 255, 255, 0.5);
--input-border: rgba(99, 102, 241, 0.2);
--input-focus: rgba(255, 255, 255, 0.9);
--btn-start-bg: linear-gradient(135deg, #1e293b, #0f172a);
--btn-start-text: #ffffff;
--item-bg: rgba(255, 255, 255, 0.5);
--link-bg: rgba(14, 165, 233, 0.1);
--copy-bg: rgba(255, 255, 255, 0.5);
--copy-hover: rgba(255, 255, 255, 0.9);
--status-bg: rgba(255, 255, 255, 0.5);
--overlay-bg: rgba(79, 70, 229, 0.1);
--overlay-hover: rgba(79, 70, 229, 0.2);
--stop-bg: rgba(239, 68, 68, 0.1);
--stop-hover: rgba(239, 68, 68, 0.2);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--rahasia: #d5d5d523;
}
[data-theme="dark"] {
/* Dark Mode - Pitch Black Cinematic */
--bg-color: #000000;
--orb-color: rgba(99, 102, 241, 0.25);
--card-bg: rgba(15, 15, 20, 0.4);
--card-border: rgba(99, 102, 241, 0.3);
--card-shadow: 0 0 30px rgba(79, 70, 229, 0.1), inset 0 0 20px rgba(79, 70, 229, 0.05);
--accent-primary: #818cf8;
--accent-secondary: #38bdf8;
--title-gradient: linear-gradient(to right, #ffffff, #818cf8, #ffffff);
--text-main: #f8fafc;
--text-muted: #a1a1aa;
--input-bg: rgba(0, 0, 0, 0.5);
--input-border: rgba(99, 102, 241, 0.2);
--input-focus: rgba(15, 15, 20, 0.8);
--btn-start-bg: linear-gradient(135deg, #f8fafc, #cbd5e1);
--btn-start-text: #000000;
--item-bg: rgba(15, 15, 20, 0.5);
--link-bg: rgba(56, 189, 248, 0.1);
--copy-bg: rgba(255, 255, 255, 0.05);
--copy-hover: rgba(255, 255, 255, 0.15);
--status-bg: rgba(0, 0, 0, 0.4);
--overlay-bg: rgba(99, 102, 241, 0.15);
--overlay-hover: rgba(99, 102, 241, 0.3);
--stop-bg: rgba(239, 68, 68, 0.15);
--stop-hover: rgba(239, 68, 68, 0.3);
--rahasia: #4647491c;
}
/* ========================================
BASE LAYOUT & PERSISTENT ORB
======================================== 
*/
body {
background-color: var(--bg-color);
font-family: 'Plus Jakarta Sans', sans-serif;
color: var(--text-main);
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: background-color 0.5s ease, color 0.5s ease;
position: relative;
  user-select: none;
  -webkit-user-select: none;
}
/* Epic Glowing Orb behind everything */
body::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 70vw; height: 70vw;
background: radial-gradient(circle, var(--orb-color) 0%, rgba(0,0,0,0) 65%);
transform: translate(-50%, -50%);
animation: pulseGlow 4s ease-in-out infinite alternate;
z-index: 0;
pointer-events: none;
}
/* ========================================
SPLASH SCREEN (CINEMATIC EPIC)
======================================== 
*/
.splash-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--bg-color); 
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden;
perspective: 1000px;
}
/* Cinematic Top/Bottom Black Bars */
.cinematic-bar {
position: absolute;
left: 0;
width: 100%;
height: 12vh;
background: #000;
z-index: 10;
transition: transform 1.2s cubic-bezier(0.8, 0, 0.2, 1);
}
.cinematic-bar.top { top: 0; }
.cinematic-bar.bottom { bottom: 0; }
.splash-screen.hidden .cinematic-bar.top { transform: translateY(-100%); }
.splash-screen.hidden .cinematic-bar.bottom { transform: translateY(100%); }
.splash-screen.hidden {
animation: cinematicExit 1.2s cubic-bezier(0.8, 0, 0.2, 1) forwards;
pointer-events: none;
}
.splash-content {
text-align: center;
z-index: 5;
}
.splash-title {
font-size: 48px;
font-weight: 800;
margin: 0 0 10px 0;
text-transform: uppercase;
background: var(--title-gradient);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 30px var(--orb-color));
animation: cinematicText 3s cubic-bezier(0.2, 1, 0.3, 1) forwards, shine 4s linear infinite;
}
.splash-subtitle {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
margin: 0 0 50px 0;
animation: cinematicSubtitle 3s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}
.loading-container {
width: 320px;
height: 2px;
background: rgba(128, 128, 128, 0.2);
margin: 0 auto;
position: relative;
overflow: visible;
}
.loading-bar {
height: 100%;
width: 0%;
background: var(--accent-primary);
box-shadow: 0 0 15px var(--accent-primary), 0 0 5px var(--accent-secondary);
position: relative;
animation: loadingFill 3s cubic-bezier(0.65, 0, 0.05, 1) forwards;
}
/* Glowing head of the loading bar */
.loading-bar::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: #ffffff;
box-shadow: 0 0 20px 4px rgba(255, 255, 255, 0.8), 0 0 10px 2px var(--accent-secondary);
border-radius: 50%;
}
@keyframes cinematicText {
0% { opacity: 0; transform: scale(1.15) translateY(20px); filter: blur(12px); letter-spacing: -4px; }
100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); letter-spacing: 4px; }
}
@keyframes cinematicSubtitle {
0% { opacity: 0; letter-spacing: 2px; transform: translateY(-10px); }
100% { opacity: 0.6; letter-spacing: 12px; transform: translateY(0); }
}
@keyframes shine {
to { background-position: 200% center; }
}
@keyframes pulseGlow {
0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes loadingFill {
0% { width: 0%; }
40% { width: 30%; }
75% { width: 85%; }
100% { width: 100%; }
}
@keyframes cinematicExit {
0% { opacity: 1; transform: scale(1); filter: blur(0); }
60% { opacity: 1; background: transparent; }
100% { opacity: 0; transform: scale(1.15); filter: blur(10px); visibility: hidden; }
}
/* ========================================
MAIN WRAPPER & GLASS CARDS
======================================== 
*/
.wrapper {
display: flex;
gap: 15px;
width: 98%;
max-width: 950px;
z-index: 10;
}
.card {
flex: 1;
background: var(--card-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 28px;
border-radius: 20px;
border: 1px solid var(--card-border);
box-shadow: var(--card-shadow);
position: relative;
transition: all 0.4s ease;
overflow: hidden;
}
.wrapper .card:first-child{
flex:1;
}

.wrapper .card:last-child{
flex:1.3;
height:580px;
display:flex;
flex-direction:column;
}
.card:hover {
border-color: var(--accent-primary);
box-shadow: 0 0 40px rgba(99, 102, 241, 0.2), inset 0 0 20px rgba(99, 102, 241, 0.05);
}
/* HEADER & TITLES */
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.title {
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent-primary);
text-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}
.subtitle {
font-size: 22px;
font-weight: 800;
margin-bottom: 24px;
letter-spacing: -0.5px;
/* Cinematic text gradient applied to dashboard titles too */
background: var(--title-gradient);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 4s linear infinite;
}
/* TOGGLE THEME BUTTON */
.theme-toggle-btn {
background: var(--input-bg);
border: 1px solid var(--card-border);
color: var(--text-main);
font-size: 14px;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
backdrop-filter: blur(10px);
}
.theme-toggle-btn:hover {
background: var(--input-focus);
transform: translateY(-2px);
box-shadow: 0 0 15px var(--orb-color);
border-color: var(--accent-primary);
}
/* INPUTS */
.label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
margin-bottom: 8px;
display: block;
}
.input-group {
position: relative;
margin-bottom: 20px;
}
input {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
background: var(--input-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--input-border);
border-radius: 10px;
color: var(--text-main);
font-size: 13px;
font-weight: 600;
font-family: inherit;
transition: var(--transition);
}
input::placeholder {
color: var(--text-muted);
opacity: 0.6;
}
input:focus {
outline: none;
background: var(--input-focus);
border-color: var(--accent-primary);
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2), 0 0 20px rgba(99, 102, 241, 0.2);
}
input[readonly] {
background: rgba(128, 128, 128, 0.05);
color: var(--text-muted);
border: 1px dashed var(--input-border);
cursor: default;
}
/* BUTTONS */
.flex {
  display: flex;
  gap: 20px;
  justify-content:center;
  align-items:center;
}
button {
font-family: inherit;
font-size: 12px;
font-weight: 700;
border: none;
border-radius: 10px;
padding: 10px 16px;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0.3px;
}
button:hover {
transform: translateY(-2px);
}
button:active {
transform: translateY(0);
}
.copy {
background: var(--copy-bg);
color: var(--text-main);
border: 1px solid var(--input-border);
backdrop-filter: blur(10px);
}
.copy:hover {
background: var(--copy-hover);
border-color: var(--accent-primary);
box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}
.overlay {
background: var(--overlay-bg);
color: var(--accent-primary);
border: 1px solid var(--input-border);
flex: 1;
}
.overlay:hover {
background: var(--overlay-hover);
border-color: var(--accent-primary);
box-shadow: 0 0 20px var(--orb-color);
}
.start {
width: 100%;
background: var(--btn-start-bg);
color: var(--btn-start-text);
padding: 14px;
margin-top: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.start:hover {
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
filter: brightness(1.2);
}
.stop {
background: var(--stop-bg);
color: var(--accent-red);
padding: 14px;
margin-top: 10px;
flex: 1;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.stop:hover {
background: var(--stop-hover);
border-color: var(--accent-red);
box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}
/* STATUS BAR */
.status {
margin-top: 24px;
padding: 12px 16px;
background: var(--status-bg);
backdrop-filter: blur(10px);
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: var(--text-main);
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--input-border);
transition: all 0.3s ease;
}
/* OVERLAY LIST (Right Card) */
.overlay-container{
width:100%;
overflow-y:auto;
overflow-x:hidden;

display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;

align-content:start;
}
.overlay-container::-webkit-scrollbar {
width:0px;
}

.overlay-item{
height:100px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
gap:8px;

padding:10px;

background:var(--item-bg);
backdrop-filter:blur(10px);
border-radius:14px;
border:1px solid var(--input-border);

transition:var(--transition);
}
.overlay-item:hover {
border-color: var(--accent-primary);
background: var(--overlay-bg);
transform: translateY(-2px);
box-shadow: 0 4px 15px var(--orb-color);
}
.overlay-item span {
font-size: 13px;
font-weight: 600;
padding: 6px 12px;

color: var(--text-main);
}
.overlay-buttons{
display:flex;
justify-content:center;
gap:6px;
}
.link {
background: var(--link-bg);
color: var(--accent-secondary);
padding: 6px 12px;
font-size: 11px;
border-radius: 8px;
}
.link:hover {
background: var(--accent-secondary);
color: #fff;
box-shadow: 0 0 10px var(--accent-secondary);
}
.copy-small {
background: var(--copy-bg);
color: var(--text-muted);
border: 1px solid var(--input-border);
padding: 6px 12px;
font-size: 11px;
border-radius: 8px;
}
.copy-small:hover {
color: var(--text-main);
background: var(--copy-hover);
border-color: var(--text-main);
}
.creator-box{
border:1px dashed var(--accent-primary);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
gap:15px;
}
.creator-box span{
max-width:120px; 
line-height:1.2;
}
.creator-btn{
background:var(--accent-primary);
color:#fff;
padding:6px 14px;
font-size:11px;
border-radius:8px;
border:none;
cursor:pointer;
transition:var(--transition);
}
.creator-btn:hover{
transform:translateY(-2px);
box-shadow:0 0 10px var(--accent-primary);
}
.footer {
margin-top: 25px;
text-align: center;
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
border-top: 1px solid var(--input-border);
padding-top: 20px;
}
.footer a {
color: var(--text-main);
text-decoration: none;
font-weight: 700;
border-bottom: 2px solid transparent;
transition: var(--transition);
}
.footer a:hover {
color: var(--accent-primary);
border-bottom-color: var(--accent-primary);
text-shadow: 0 0 10px var(--orb-color);
}
/* Animations & Responsiveness */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
/* Menunda animasi masuk card agar berjalan bertepatan dengan hilangnya splash screen */
.card{
opacity:0;
animation:fadeInUp .8s cubic-bezier(.16,1,.3,1) forwards;
animation-delay:3.2s;
will-change:transform,opacity;
}
.card:nth-child(2) { 
animation-delay: 3.4s; 
}
/*Iframe Theme style*/
.theme-editor{
width:1000px;
height:650px;
background:#0d121f;
border-radius:14px;
border:1px solid rgba(255,255,255,.05);
display:flex;
flex-direction:column;
box-shadow:0 40px 80px rgba(0,0,0,.7);
overflow:hidden;
}
.theme-frame{
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
display:none;
align-items:center;
justify-content:center;
padding:60px;
z-index:9999;
}
.theme-header{
height:50px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 18px;
background:#111827;
border-bottom:1px solid rgba(255,255,255,.05);
font-size:13px;
font-weight:600;
}
.theme-header button{
background:#1e2330;
border:1px solid rgba(255,255,255,.1);
color:white;
border-radius:6px;
padding:4px 10px;
cursor:pointer;
}
.theme-header button:hover{
border-color:#3b82f6;
}
#themeIframe{
width:100%;
height:100%;
border:none;
transform: scale(95%);
}
@keyframes editorIn{
from{
transform:scale(.9);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}
/* ==============================
TOAST NOTIFICATION
============================== */
.toast{
position:fixed;
bottom:25px;
right:25px;
display:flex;
align-items:center;
gap:14px;
padding:14px 18px;
background:rgba(15,15,20,.85);
backdrop-filter:blur(20px);
border:1px solid rgba(99,102,241,.35);
border-radius:14px;
box-shadow:
0 10px 40px rgba(0,0,0,.5),
0 0 20px rgba(99,102,241,.3);
color:white;
transform:translateY(40px);
opacity:0;
pointer-events:none;
transition:.35s cubic-bezier(.2,.8,.2,1);
z-index:9999;
}
.toast.show{
transform:translateY(0);
opacity:1;
}
.toast-icon{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
background:linear-gradient(135deg,#4f46e5,#0ea5e9);
font-weight:800;
font-size:16px;
box-shadow:0 0 10px rgba(99,102,241,.6);
}
.toast-title{
font-size:13px;
font-weight:700;
}
.toast-sub{
font-size:11px;
opacity:.7;
}
.support-dev{
margin-top:20px;
text-align:center;
}
.support-dev a{
display:block;
padding:12px 16px;
border-radius:12px;
text-decoration:none;
font-weight:600;
font-size:14px;
color:#e8b337;
background:rgba(4, 4, 5, 0.6);
border:1px solid rgba(120,140,255,0.35);
box-shadow:
0 0 6px rgba(120,140,255,0.35),
0 0 14px rgba(120,140,255,0.25),
inset 0 0 8px rgba(120,140,255,0.15);
transition:all .25s ease;
}
.support-dev a:hover{
color:#ffffff;
border-color:#7aa2ff;
box-shadow:
0 0 8px rgba(120,140,255,0.6),
0 0 20px rgba(120,140,255,0.6),
0 0 40px rgba(120,140,255,0.4),
inset 0 0 10px rgba(120,140,255,0.25);
transform:translateY(-2px) scale(1.02);
}
/* ==============================
LIVE BUTTON
============================== */
.live-button{
display:flex;
align-items:center;
gap:8px;
padding:6px 12px;
border-radius:20px;
background:rgba(255,0,0,.08);
border:1px solid rgba(255,0,0,.4);
cursor:pointer;
font-size:11px;
font-weight:700;
letter-spacing:.5px;
color:#ff4d4d;
transition:.25s;
}
.live-button:hover{
background:rgba(255,0,0,.15);
transform:translateY(-1px);
}
/* titik merah live */
.live-indicator{
width:8px;
height:8px;
border-radius:50%;
background:#ff2b2b;
box-shadow:
0 0 6px #ff2b2b,
0 0 12px #ff2b2b;
animation:liveBlink 1s infinite;
}
/* animasi kelap kelip */
@keyframes liveBlink{
0%{
opacity:1;
transform:scale(1);
}
50%{
opacity:.3;
transform:scale(.7);
}
100%{
opacity:1;
transform:scale(1);
}
}
.live-text{
color:#ff4d4d;
}
/* ==============================
LIVE MONITOR FRAME
============================== */
.live-frame{
position:fixed;
inset:0;
background:rgba(0,0,0,.65);
display:none;
align-items:center;
justify-content:center;
padding:60px;
z-index:9999;
}
.live-editor{
width:1200px;
height:500px;
background:#0d121f;
border-radius:14px;
border:1px solid rgba(255,255,255,.05);
display:flex;
flex-direction:column;
box-shadow:0 40px 100px rgba(0,0,0,.8);
overflow:hidden;
animation:editorIn .35s ease;
}
.live-header{
height:50px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 18px;
background:#111827;
border-bottom:1px solid rgba(255,255,255,.05);
font-size:13px;
font-weight:600;
color:white;
}
.live-header button{
background:#1e2330;
border:1px solid rgba(255,255,255,.1);
color:white;
border-radius:6px;
padding:4px 10px;
cursor:pointer;
}
.live-header button:hover{
border-color:#ef4444;
}
#liveIframe{
width:100%;
height:100%;
border:none;
background:black;
}
/* PREMIUM TAB STYLING - DASHBOARD THEME */
.tabs-nav {
display: flex;
margin-bottom: 20px;
border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}
.tab-btn {
flex: 1;
background: transparent;
border: none;
color: inherit;
opacity: 0.5;
cursor: pointer;
font-weight: 600;
font-size: 10px;
padding: 12px 0;
transition: all 0.3s ease;
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
}
.tab-btn:hover {
opacity: 0.8;
background: rgba(128, 128, 128, 0.05);
}
.tab-btn.active {
opacity: 1;
}
.tab-pane{
overflow-y:auto;
}
.tabs-container{
height:450px;
position:relative;
}

.tab-pane{
position:absolute;
inset:0;
overflow-y:auto;

}
.extra-grid{
height:430px;
overflow-y:auto;

display:flex;
flex-direction:column;
gap:16px;

padding:6px;
}
.extra-grid::-webkit-scrollbar {
width:0px;
}


.extra-box{
padding:18px;
border-radius:14px;
margin:2px 4px;
background:var(--item-bg);
border:1px solid var(--input-border);
backdrop-filter:blur(10px);
display:flex;
flex-direction:column;
gap:10px;
transition:var(--transition);
}

.extra-box:hover{
border-color:var(--accent-primary);
background:var(--overlay-bg);
box-shadow:0 4px 15px var(--orb-color);
}
.extra-title{
font-size:13px;
font-weight:700;
letter-spacing:.5px;
}
.extra-info{
font-size:12px;
color:var(--text-muted);
line-height:1.6;
}

/*=========
Banner Dashboard
/*=========*/
.image-banner{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.65);
z-index:9999;
cursor: pointer;
}
.banner-box{
position:relative;
animation:bannerIn .35s ease;
}
.banner-box img{
max-width:520px;
border-radius:12px;
box-shadow:0 20px 60px rgba(0,0,0,.6);
}

#closeBanner{
position:absolute;
top:-10px;
right:-10px;
width:30px;
height:30px;
border-radius:50%;
border:none;
background:#000;
color:#fff;
cursor:pointer;
font-size:14px;

}

@keyframes bannerIn{
from{
 transform:scale(.9);
 opacity:0;
}

to{
 transform:scale(1);
 opacity:1;
}

}


/* ENGINE 2 LIMITED FEATURES */

.engine2-warning{

 border:1px solid rgba(239,68,68,0.6);
 background:rgba(239,68,68,0.12);
 box-shadow:0 0 12px rgba(239,68,68,0.4);

}

.engine2-warning span{

 color:#ef4444;

}

.info-grid{
 display:grid;
 grid-template-columns:60px 1fr;
 gap:6px 7px;
 font-size:10px;
}

#kv-app-status{
 margin-left:6px;
 font-weight:600;
}

.info-grid div:nth-child(odd){
 color:var(--text-muted);
 font-weight:600;
}

.update-ok{
 color:#22c55e;
 font-weight:600;
}
.update-available{
 color:#f59e0b;
 font-weight:600;
}
.update-error{
 color:#ef4444;
 font-weight:600;
}

.tooltip-wrap{
 position:relative;
 display:inline-block;
}

.tooltip{
 position:absolute;
 bottom:120%;
 left:50%;
 transform:translateX(-50%);

 background:#111;
 color:#fff;

 font-size:12px;
 padding:8px 10px;

 border-radius:6px;
 white-space:nowrap;

 opacity:0;
 pointer-events:none;

 transition:0.2s;
}

.tooltip-wrap:hover .tooltip{
 opacity:1;
 transform:translate(-50%,-4px);
}

.tooltip::after{
 content:"";
 position:absolute;
 top:100%;
 left:50%;
 transform:translateX(-50%);

 border-width:6px;
 border-style:solid;
 border-color:#111 transparent transparent transparent;
}

.blur-session{
 filter: blur(6px);
 transition: 0.2s;
}

.blur-session:hover{
 filter: blur(0);
}


/* ENGINE STATUS COLORS */
.engine-connecting{
 background:linear-gradient(135deg,#facc15,#eab308) !important;
 color:#000 !important;
 box-shadow:
 0 0 10px rgba(250,204,21,.6),
 0 0 20px rgba(250,204,21,.4);
}

.engine-connected{
 background:linear-gradient(135deg,#22c55e,#16a34a) !important;
 color:white !important;
 box-shadow:
 0 0 10px rgba(34,197,94,.6),
 0 0 20px rgba(34,197,94,.4);
}

.engine-offline{
 background:linear-gradient(135deg,#ef4444,#b91c1c) !important;
 color:white !important;
}

.engine-error{
 background:linear-gradient(135deg,#ef4444,#b91c1c) !important;
 color:white !important;
 animation:engineBlink 1s infinite;
}

/* blinking animation */
@keyframes engineBlink{
 0%{opacity:1}
 50%{opacity:.3}
 100%{opacity:1}
}