/* =========================================================
   iLab 1.9 – Redesigned Header (Logo Top + Menu Below)
   ========================================================= */

/* ---------- Root Colors ---------- */
:root{
  --bg:#0b0c10; --bg2:#111218; --panel:#ffffff; --ink:#0f172a; --ink-2:#475569;
  --brand:#6d28d9; --muted:#64748b; --chip:#e2e8f0; --accent:#7c3aed;
  --border:#e5e7eb;
}
body.theme-dark{
  --bg:#0b0c10; --bg2:#111218; --panel:#0f172a; --ink:#e5e7eb; --ink-2:#c7d2fe;
  --brand:#a78bfa; --muted:#94a3b8; --chip:#1f2937; --accent:#a78bfa;
  --border:#1f2937;
}

/* ---------- Base Reset ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg2);
  color:var(--ink);
}

/* =========================================================
   Header / App Bar (2-Row Layout)
   ========================================================= */
.appbar{
  display:flex;
  flex-direction:column;        /* 2 rows: title + menu */
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  background:var(--panel);
  position:sticky;
  top:0;
  z-index:50;
  gap:8px;                      /* Title और Menu के बीच gap */
}

/* ---------- Title + Version ---------- */
.appbar .title{
  font-size:24px;
  font-weight:700;
  color:var(--ink); /* Professional dark text */
}

/* Gradient Style (Optional – Modern Look) */
/*
.appbar .title{
  font-size:24px;
  font-weight:700;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
*/

.appbar .version-badge{
  background:var(--brand);
  color:#fff;
  font-size:12px;
  font-weight:600;
  padding:2px 8px;
  border-radius:12px;
  margin-left:6px;
}










/* ---------- Branding ---------- */
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.brand .title{
  font-weight:800;
  font-size:1.8rem;             /* Title बड़ा */
  color:var(--brand);
  letter-spacing:0.5px;
}
.brand .tag{
  /* Use the same brand colour on both the title and tag so they appear as a unified mark.
     Previously the tag used a blue‑purple gradient which clashed with the purple brand colour.
     For consistency we set its background to the brand variable and keep the text white. */
  background: var(--brand);
  color: #fff;
  padding:4px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

/* ---------- Navigation Menu ---------- */
.nav{
  display:flex;
  gap:16px;                     /* menu items में gap */
  justify-content:center;
  flex-wrap:wrap;
}
.nav a, .chip{
  padding:10px 18px;            /* बड़ा padding */
  border-radius:999px;
  background:var(--chip);
  color:inherit;
  text-decoration:none;
  border:1px solid var(--border);
  font-size:16px;               /* menu font बड़ा */
  font-weight:600;
  transition:all 0.3s ease;
}
.nav a:hover, .chip:hover{
  background:var(--accent);
  color:#fff;
  transform:translateY(-1px);
}
.chip.muted{opacity:.85}

/* ---------- Theme Toggle Button ---------- */
.theme-toggle{
  padding:8px 14px;
  border-radius:999px;
  background:var(--chip);
  color:inherit;
  border:1px solid var(--border);
  font-size:14px;
  cursor:pointer;
  transition:all 0.3s ease;
}
.theme-toggle:hover{
  background:var(--accent);
  color:#fff;
}

/* =========================================================
   Rest of Layout (unchanged from earlier)
   ========================================================= */
.shell{
  display:grid;
  grid-template-columns:520px 1fr;
  gap:16px;
  padding:16px
}
@media (min-width:1280px){
  .shell{grid-template-columns:600px 1fr;}
}
@media (min-width:1536px){
  .shell{grid-template-columns:680px 1fr;}
}

.card{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px}
.controls h2,.preview h2{margin:0 0 12px 0; font-size:18px}
.controls{overflow-y:auto; max-height:calc(100vh - 140px);}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.field input[type=number], .field input[type=text], .field select, .field input[type=file]{
  height:44px; padding:8px 10px; border-radius:12px; border:1px solid var(--border); background:transparent; color:var(--ink);
}
.file input[type=file]{height:auto; width:100%}
.hint{font-size:12px; color:var(--muted)}
.subhead{font-weight:600; margin-bottom:6px}
.grid.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stack{display:flex; flex-direction:column; gap:10px}
.hide{display:none !important}
.small{font-size:12px}
.center{text-align:center}
.muted{color:var(--muted)}
.divider{height:1px; background:var(--border); margin:12px 0}

.segmented{display:flex; background:var(--chip); border-radius:12px; padding:4px; gap:4px; margin:10px 0}
.seg{flex:1; height:36px; border:none; background:transparent; border-radius:10px; cursor:pointer}
.seg.active{background:var(--panel); border:1px solid var(--border)}

.checkbox{display:flex; gap:10px; align-items:center; margin:8px 0}
.checkbox input{width:18px; height:18px}
.checkbox.inline{margin:0; gap:4px}

.file-row{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.file-row input[type=file]{flex:1}
.file-row .hint{flex:0 0 auto}
.file-row .checkbox{margin:0; align-items:center}

.number{display:flex; align-items:center}
.number input{width:100%}

.preview{align-self:start}
.previewWrap{
  width:100%;
  background:linear-gradient(180deg,#f8fafc,#f1f5f9);
  border-radius:14px; border:1px dashed var(--border);
  overflow:hidden; position:relative;
  max-height:62vh;
}
#canvas{width:100%; height:100%; display:block}

.stickybar{
  display:flex; gap:8px; align-items:center; position:sticky; bottom:0; background:var(--panel);
  padding-top:8px;
}
.btn{height:44px; border-radius:12px; border:1px solid var(--border); background:transparent; padding:0 12px; cursor:pointer; color:var(--ink); font-weight:600}
.btn.primary{background:linear-gradient(90deg,#8b5cf6,#06b6d4); color:white; border:0}
.btn:disabled{opacity:.5; cursor:not-allowed}

dialog{max-width:560px; width:90vw; border-radius:16px; border:1px solid var(--border); padding:16px; background:var(--panel); color:var(--ink)}

@media (max-width: 920px){
  .shell{grid-template-columns:1fr; padding-bottom:86px}
  .stickybar{position:fixed; left:0; right:0; bottom:0; padding:10px 16px; border-top:1px solid var(--border)}
  .appbar{position:sticky}
}

@media (min-width:1200px){
  body.with-rail { padding-right:360px; }
  #rightRail { position:fixed; right:12px; top:88px; width:336px; z-index:5; }
}
@media (max-width:1199px){ #rightRail{ display:none; } }
#adFooter { margin:12px auto; max-width:980px; }

.field label{ font-size:15px; font-weight:600; }
.field input[type="text"],
.field input[type="email"]{ height:44px; padding:10px 12px; font-size:15px; }
.field textarea{
  width:100%; min-height:140px; resize:vertical;
  padding:12px; font-size:15px; line-height:1.4;
  border-radius:12px; border:1px solid var(--border); background:transparent; color:var(--ink);
}

.theme-toggle {
  display: none !important;
}