/* Retained only design tokens used by JS (log colors). Layout moved to Tailwind utilities. */
:root{
  --bg:#0f1221;
  --body-bg:#0b0f1d;
  --muted:#8b93a7;
  --txt:#e9ecf1;
  --brand:#7dd3fc;
  --brand-2:#60a5fa;
  --ok:#22c55e;
  --warn:#eab308;
  --err:#ef4444;
}


*{box-sizing:border-box}


html,body{height:100%}


body{font-family:sans-serif;background:linear-gradient(180deg,var(--body-bg),var(--bg) 35%);color:var(--txt)}


.container{
    max-width: 1200px;
    margin-inline: auto;
    padding:14px;
    justify-content:space-between;
}


.brand{
    display: flex;
    align-items: center;
    gap: 10px; 
    font-weight: 700;
}


.brand .logo{
     inline-size: 36px;
    block-size: 36px;
    border-radius: 10px;

  /* one-shot shorthand prevents other background props from overriding */
  background: url("https://programming-ocean.com/code-editors/newlogo.png")
              center / cover no-repeat;
}


.title{
    font-size: clamp(18px, 2vw, 22px)
}

/* card/panel layout removed ? now expressed via Tailwind classes */


h2, h3{
    margin:0 0 12px
}


.muted{
    color:var(--muted);
     font-size:13px
}


.footer{opacity:.7;
   font-size:12px;
    text-align:center;
     padding:12px}


/* .badge removed */


/* .kbd removed (use inline code or Tailwind classes) */


label{font-size:13px;color:var(--muted)}

/* ================= Scrollbar Styling (Output & Editors) ================= */
/* Firefox */
#output{scrollbar-width:thin;scrollbar-color:var(--brand-2) transparent;}
/* WebKit browsers */
#output::-webkit-scrollbar{width:10px;background:transparent;}
#output::-webkit-scrollbar-track{background:transparent;}
#output::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--brand),var(--brand-2));
    border-radius:8px;
    border:2px solid #0a0e1a; /* matches panel bg to create inset look */
}
#output::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,#81e6d9,#3b82f6);
}

/* Optional: Ace editor scrollbars (vertical & horizontal) */
.ace_scrollbar{background:transparent;}
.ace_scrollbar::-webkit-scrollbar{width:10px;height:10px;}
.ace_scrollbar::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--brand),var(--brand-2));
    border-radius:8px;
}
.ace_scrollbar::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#81e6d9,#3b82f6);}

/* ================= Themed form controls ================= */
/* Font size selector (in header nav) */
#fontSizeSelect{
    background: rgba(255,255,255,.08);
    color: var(--txt);
    border: 1px solid rgba(255,255,255,.2);
}
#fontSizeSelect:focus{
    outline: none;
    box-shadow: 0 0 0 2px rgba(34,211,238,.5);
}
#fontSizeSelect option{
    background: #0b0f1d; /* match editor dark bg */
    color: var(--txt);
}