:root{
  --bg:#0b0f14; --bg-elev:#0e141b; --card:#111923; --muted:#9aa6b2; --text:#e6eef7;
  --brand:#7aa2f7; --accent:#7dcfff; --ok:#9ece6a; --warn:#e0af68; --bad:#f7768e;
  --border:#1f2a36; --shadow:0 8px 24px rgba(0,0,0,.35); --radius:16px;
}

/* Light theme */
:root[data-theme="light"]{
  --bg:#f6f8fb; --bg-elev:#fff; --card:#fff; --muted:#5d6b7b; --text:#0b1624;
  --brand:#2b6cf6; --accent:#4ea1ff; --ok:#3ba14a; --warn:#c27b20; --bad:#d23a52;
  --border:#d9e3ee; --shadow:0 8px 24px rgba(0,0,0,.08);
}

/* Show correct icon per theme */
.only-dark{display:inline}
.only-light{display:none}
:root[data-theme="light"] .only-dark{display:none}
:root[data-theme="light"] .only-light{display:inline}

/* --- Modern polish tokens (UPDATE) --- */
:root{
  --radius:14px;
  --s-1:6px; --s-2:10px; --s-3:14px; --s-4:18px; --s-5:24px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.12);
  --shadow-md:0 8px 24px rgba(0,0,0,.22);
  --shadow-lg:0 14px 40px rgba(0,0,0,.28);
}

/* Elements that previously used hardcoded dark colors */
:root[data-theme="light"] .btn{background:#f4f7fc;color:var(--text);border-color:var(--border)}
:root[data-theme="light"] .btn[aria-pressed="true"]{background:#eaf0ff;outline-color:var(--brand)}
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{background:#f7faff;border-color:var(--border);color:var(--text)}
:root[data-theme="light"] .dyn-item{background:#f7faff;border-color:var(--border)}
:root[data-theme="light"] .pill{background:#eef3fa;border-color:var(--border);color:var(--text)}
:root[data-theme="light"] .dup-row .remove{background:#eef3fa;color:var(--muted);border-color:var(--border)}
:root[data-theme="light"] .badge{background:#f4f7fc;color:var(--text)}
:root[data-theme="light"] .popover{background:#fff;border-color:var(--border);color:var(--text)}
:root[data-theme="light"] .mail-client{background:linear-gradient(180deg,#f7fbff,#f1f5fb)}
:root[data-theme="light"] .mail-topbar{background:#eef4fb}
:root[data-theme="light"] .avatar{background:#e8eff9;color:var(--brand)}
:root[data-theme="light"] #commentsDialog .dlg-head{background:#f2f6fb}
:root[data-theme="light"] #commentsDialog .dlg-actions{background:#f4f7fb}
/* Calendar/Month popovers in light theme */
:root[data-theme="light"] .icon-btn{
  background:#f7faff; color:var(--text); border-color:var(--border);
}
:root[data-theme="light"] .cal-cell{
  background:#f7faff; color:var(--text); border-color:var(--border);
}
:root[data-theme="light"] .cal-cell:hover{
  background:#eaf0ff;
}
:root[data-theme="light"] .cal-cell.sel{
  outline-color:var(--brand);
  background:#eaf0ff;
}
:root[data-theme="light"] .month-cell{
  background:#f7faff; color:var(--text); border-color:var(--border);
}
:root[data-theme="light"] .month-cell:hover{
  background:#eaf0ff;
}
:root[data-theme="light"] .month-cell.sel{
  outline-color:var(--brand);
  background:#eaf0ff;
}
:root[data-theme="light"] .year-input{
  background:#f7faff; border-color:var(--border); color:var(--text);
}
:root[data-theme="light"] .pop-head{
  background:#f2f6fb; /* matches other light bars */
}
/* primary vs ghost */
.btn{ background:transparent; }
.btn.primary{ background:var(--brand); color:#0a1628; border-color:transparent; }
.btn.ghost{ background:transparent; }
.btn.ghost:hover{ background: color-mix(in oklab, var(--border) 20%, transparent); }
.btn.icon{ padding:8px 10px; }

  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
  *{box-sizing:border-box}
  .app{display:flex;flex-direction:column;height:100%}

  /* Header & Tabs */
  header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--bg-elev),transparent)}
  header h1{font-size:16px;margin:0;font-weight:650;letter-spacing:.2px}
  .tag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);padding:4px 10px;border-radius:999px;font-size:12px;color:var(--muted);line-height:1}
  .tabs{display:flex;gap:8px;margin-left:auto}
  .tab-btn{appearance:none;border:1px solid var(--border);background:var(--card);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer;transition:.2s;line-height:1}
  .tab-btn[aria-selected="true"]{outline:2px solid var(--brand)}

  /* Page scaffold */
  .page{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px;min-height:0}
  .pane{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-height:0;display:flex;flex-direction:column}
  .pane h2{margin:0;padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;letter-spacing:.3px;color:var(--muted)}
  .pane .content{padding:12px 16px;min-height:0}
/* calmer headers */
.pane h2,
.sec-h{
  text-transform:none;
  letter-spacing:.02em;
  font-weight:600;
  font-size:12.5px;
  color: var(--muted);
  padding: var(--s-3) var(--s-4);
  border-bottom:1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.pane .content,.sec-c{ padding: var(--s-4); }

  /* Controls */
  .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .btn{appearance:none;border:1px solid var(--border);background:transparent;color:var(--text);padding:10px 12px;border-radius:10px;cursor:pointer;transition:.2s;line-height:1}
  .btn:hover{border-color:var(--accent)}
  .btn[aria-pressed="true"]{outline:2px solid var(--brand);background:#0f1822}
  .btn.primary{background:var(--brand);border-color:transparent;color:#0a1628}
  .btn.danger{color:var(--bad)}
  .btn.success{color:var(--ok)}
  .btn.icon{display:inline-flex;align-items:center;gap:8px}
  .btn svg{width:16px;height:16px}
  input,select,textarea{width:100%;background:#0b1218;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:10px;outline:none}
  label{font-size:12px;color:var(--muted)}
	input,select,textarea{
	  width:100%;
	  background:#0b1218;
	  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
	  color:var(--text);
	  padding:9px 12px;
	  border-radius:10px;
	  outline:none;
	}

  /* Compose layout */
  .inputs-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .inputs-grid .col-2{grid-column:span 2}
  .inputs-grid .col-3{grid-column:span 3}
  .inputs-grid .col-6{grid-column:span 6}
  @media (max-width:1200px){.inputs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.inputs-grid .col-2{grid-column:span 3}}
  @media (max-width:720px){.inputs-grid{grid-template-columns:repeat(1,minmax(0,1fr))}.inputs-grid > *{grid-column:span 1!important}}

  .dyn-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:8px}
  .dyn-item{grid-column:span 6;background:#0b1218;border:1px solid var(--border);border-radius:12px;padding:10px 12px}
  .dyn-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
  .dyn-actions{display:flex;gap:6px}
  .chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  .pill{background:#0c1620;border:1px solid var(--border);padding:4px 8px;border-radius:999px;display:inline-flex;gap:6px;align-items:center;color:var(--text)}
  .pill .txt{white-space:nowrap}
  .pill button{border:none;background:none;color:var(--muted);cursor:pointer}
  .dup-row{display:flex;gap:6px;align-items:center;margin-top:6px}
  .dup-row .remove{border:1px solid var(--border);background:#0e141b;color:var(--muted);padding:6px 8px;border-radius:8px;cursor:pointer}
  .dup-row .remove:hover{color:#fff;border-color:var(--accent)}

  /* Email Preview */
  .mail-client{margin-top:16px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,#0c151f,#0a1118);box-shadow:var(--shadow);overflow:hidden}
  .mail-topbar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);background:#0e1620}
  .mail-dot{width:10px;height:10px;border-radius:50%}
  .mail-dot.red{background:#f7768e}.mail-dot.yellow{background:#e0af68}.mail-dot.green{background:#9ece6a}
  .mail-header{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
  .avatar{width:40px;aspect-ratio:1/1;border-radius:50%;background:#132131;display:inline-grid;place-items:center;font-weight:700;color:#7aa2f7;overflow:hidden;flex:0 0 auto}
  .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .mail-subject{font-size:16px;font-weight:600;margin:2px 0 6px}
  .mail-body{padding:16px 20px;white-space:pre-wrap;line-height:1.6}
  .mail-field{display:flex;gap:6px;align-items:center;margin:2px 0}
  .mail-label{color:var(--muted);min-width:56px}
  #mailClient{ max-width: 820px; margin-inline:auto; }
	.mail-header{ border-bottom:1px solid color-mix(in oklab, var(--border) 70%, transparent); }
	.mail-body{ line-height:1.65; }
	.mail-subject{ font-size:18px; font-weight:700; margin-bottom:6px; }


  /* Editor drawer */
  .editor-drawer[hidden]{display:none!important}

  /* Templates UI */
  .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#0b1218;color:var(--text)}
  .pill.small{font-size:12px;padding:2px 6px;color:var(--text);background:#0c1620;border-color:var(--border)}

  /* Popover pickers (dark-themed) */
  .popover{position:fixed;background:#0b1218;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:8px;z-index:50;min-width:260px;color:var(--text)}
  .pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px}
  .pop-head .nav{display:flex;gap:4px}
  .icon-btn{border:1px solid var(--border);background:#0e141b;color:var(--text);border-radius:8px;padding:6px 8px;cursor:pointer}
  .icon-btn:hover{border-color:var(--accent)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:6px}
  .cal-cell{padding:8px 0;text-align:center;border-radius:8px;cursor:pointer;border:1px solid var(--border);background:#0b1218;color:var(--text)}
  .cal-cell:hover{background:#0f1822}
  .cal-cell.sel{outline:2px solid var(--brand);background:#0f1822}
  .wday{font-size:12px;color:var(--muted);text-align:center}
  .month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px}
  .month-cell{padding:10px 8px;text-align:center;border-radius:8px;cursor:pointer;border:1px solid var(--border);background:#0b1218;color:var(--text)}
  .month-cell:hover{background:#0f1822}
  .month-cell.sel{outline:2px solid var(--brand);background:#0f1822}
  .year-row{display:flex;gap:6px;align-items:center;justify-content:center;padding:6px}
  .year-input{width:90px;text-align:center;background:#0b1218;border:1px solid var(--border);color:var(--text);padding:6px;border-radius:8px}
  .popover .actions{display:flex;justify-content:flex-end;gap:8px;padding:6px}
  .hint{font-size:11px;color:var(--muted);margin-top:4px}
  .readonly{opacity:.85}
  /* ----- Themed dialog (comments) ----- */
dialog {
  padding: 0;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  max-width: 720px;
  width: min(720px, calc(100% - 32px));
}

dialog::backdrop {
  background: rgba(3, 9, 15, .6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

#commentsDialog form { display: flex; flex-direction: column; }

#commentsDialog .dlg-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #0e1620; /* matches top bars */
}

#commentsDialog .dlg-title {
  margin: 0; font-size: 14px; letter-spacing: .2px; color: var(--muted);
}

#commentsDialog .dlg-body {
  padding: 16px;
  max-height: 55vh; overflow: auto;
  white-space: pre-wrap;
  background: var(--card);
}

#commentsDialog .dlg-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #0b1218;
}

/* Stronger hover affordance in light theme */
:root[data-theme="light"] .btn:hover{
  border-color: var(--accent);
  background: #eaf0ff;              /* subtle tint to match pressed tone */
}

/* (optional) match icon-only small buttons like calendar pickers */
:root[data-theme="light"] .icon-btn:hover{
  border-color: var(--accent);
  background: #f2f7ff;
}
/* --- Modern polish tokens --- */
:root{
  --radius:14px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.12);
  --shadow-md:0 8px 24px rgba(0,0,0,.22);
  --shadow-lg:0 14px 40px rgba(0,0,0,.28);
}

/* Frosted sticky header */
header{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 var(--border);
}

/* Subtle lift */
.pane{ transition: box-shadow .18s ease, border-color .18s ease }
.pane:hover{ box-shadow: var(--shadow-md) }

/* lighter borders + hover lift */
.pane,.sec{
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.pane:hover,.sec:hover{ box-shadow: var(--shadow-md) }


/* Buttons feel snappy */
.btn{ transition: border-color .15s ease, background .15s ease, transform .05s ease }
.btn:active{ transform: translateY(1px) }

/* --- Compose split view --- */
:root { --hdr: 0px; } /* we'll set this from JS */

.compose-split{
  display:grid;
  grid-template-columns: minmax(420px, var(--left, 56%)) 10px minmax(420px, 1fr);
  gap:16px;
  height: calc(100dvh - var(--hdr) - 32px); /* 32 = .page padding top+bottom */
  min-height:0;
}


.splitter:hover{ border-color: var(--accent); }

/* --- Section cards (left) --- */
.sec{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); min-height:0; }
.sec + .sec{ margin-top:12px; }
.sec-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.22px; text-transform:uppercase }
.sec-c{ padding:12px 16px; }

/* Tighter type scale */
.pane h2{ font-size:12px; letter-spacing:.22px; text-transform:uppercase; font-weight:650 }
.mail-subject{ font-size:18px; font-weight:700 }

/* --- Chip input (editor) --- */
.chip-input{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:42px; padding:6px 8px;
  background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; }
.chip-input .editor{ min-width:160px; outline:none; border:none; background:transparent; color:var(--text); padding:6px; }
.chip-input .editor:empty::before{ content:attr(data-ph); color:var(--muted) }

/* Shared chips */
.rchip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px;
  border:1px solid var(--border); background:var(--card); font-size:12px; line-height:1; }
.rchip .x{ border:none; background:none; cursor:pointer; color:var(--muted); font-size:14px; line-height:1 }
.rchip.more{ border-style:dashed; cursor:pointer }
.rchip.small{ font-size:11px; padding:3px 6px }
.rchip{ gap:8px; }
.rchip::before{
  content:""; width:6px; height:6px; border-radius:50%; background: var(--brand);
}
.rchip[data-bad="1"]{ border-color: var(--bad); color: var(--bad); }


/* Preview recipient rows */
.recipients{ display:flex; flex-wrap:wrap; gap:6px; }

/* header stays natural height; content fills the rest */
.pane .content{
  flex: 1;
  min-height: 0;                /* ← critical so inner scrollers can size correctly */
  display: flex;
  flex-direction: column;
}

/* 3) Make the mail preview adapt to the container (both width and height) */
#mailClient{
  flex: 1;                       /* fill the pane */
  width: 100%;
  max-width: none;               /* was 820px; remove the hard cap */
  display: flex;
  flex-direction: column;
}

/* body becomes the inner scroller so the header stays pinned */
.mail-body{
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* (optional) tiny polish so inner HTML can’t overflow horizontally */
#vBody, #vBody *{
  max-width: 100%;
  box-sizing: border-box;
}
/* --- Splitter: crisp line, bigger hit area, no fade/ghost --- */
.splitter{
  position: relative;
  width: 12px;                 /* fat hit area */
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 5;
  background: transparent;
  border: 0;                   /* kill any default border */
}
/* the vertical line itself */
.splitter::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:50%;
  width:1px;
  background: var(--border);   /* solid, no gradient */
  transform: translateX(-50%);
}
/* a simple central grip (optional) */
.splitter::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:4px; height:36px;
  transform: translate(-50%,-50%);
  border-radius:2px;
  background: var(--border);
  opacity:.9;
}
/* remove the old decorative dots */
.splitter[data-kill]::before, .splitter[data-kill]::after { /* just for clarity */ }
/* ^ you don't need this line; it's only to show we're replacing the old ::before code */

/* --- Give cards room so shadows never get cut --- */
.split-col{
  min-width: 0;
  overflow: auto;
  /* increase gutters so box-shadows (up to ~40px blur) have space */
  padding-inline: 16px;
  padding-block: 16px 56px;    /* bottom room for the shadow */
  scroll-padding-bottom: 56px;  /* nicer last-item snap */
}

/* (optional) a touch wider column for the handle */
.compose-split{
  grid-template-columns: minmax(420px, var(--left, 56%)) 12px minmax(420px, 1fr);
}

/* keep the preview pane stretching cleanly */
.pane .content{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#mailClient{ flex:1; min-height:0; display:flex; flex-direction:column; }
.mail-body{ flex:1; min-height:0; overflow:auto; }

/* === Pretty dropdown (dark + light) ===================================== */
.nselect{position:relative;display:block}
.nselect select{position:absolute!important;inset:auto auto 0 0;width:1px;height:1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden} /* keep form value & a11y */

/* trigger */
.nselect-trigger{
  display:flex;align-items:center;gap:8px;justify-content:space-between;
  width:100%; height:40px; padding:0 12px;
  background:var(--bg-elev); color:var(--text);
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius:10px; cursor:pointer; line-height:1; text-align:left;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.nselect-trigger:hover{ border-color: var(--accent) }
.nselect-trigger:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}
.nselect .label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nselect .chev{flex:0 0 auto;transition:transform .15s}
.nselect[data-open="1"]{ z-index: 41; position: relative; }

/* menu (uses your tokens) */
.nselect-menu{
  position:absolute;
  min-width:220px; max-width:min(92vw, 560px);
  max-height:320px; overflow:auto; padding:6px;
  background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg);
}

/* optional search */
.nselect-search{position:sticky;top:0;padding:6px;background:inherit}
.nselect-search input{
  width:100%; padding:8px 10px; border-radius:8px;
  background:var(--bg-elev); border:1px solid var(--border); color:var(--text);
}

/* options */
.nselect-option{
  display:flex; align-items:center; gap:8px;
  width:100%; padding:8px 10px; border-radius:8px;
  cursor:pointer; user-select:none;
}
.nselect-option:hover,
.nselect-option[data-active="1"]{
  background: color-mix(in oklab, var(--border) 22%, transparent);
}
/* NEW: small accent dot on the right */
.nselect-option[aria-selected="true"]::after{
  content:"";
  width:8px; height:8px; border-radius:50%;
  margin-left:auto; flex:0 0 8px;
  background:var(--accent);
  /* optional soft halo so it reads in both themes */
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent);
}

.nselect-option[aria-disabled="true"]{ opacity:.5; cursor:not-allowed }

/* light theme hover tone (a bit brighter) */
:root[data-theme="light"] .nselect-option[data-active="1"]{
  background: color-mix(in oklab, var(--brand) 12%, transparent);
}

/* === Themed scrollbars (global) ======================================= */
:root{
  --scroll-size: 10px;
  --scroll-radius: 999px;
  --scroll-track: color-mix(in oklab, var(--border) 18%, transparent);
  --scroll-thumb: color-mix(in oklab, var(--brand) 30%, var(--bg-elev));
  --scroll-thumb-hover: color-mix(in oklab, var(--accent) 42%, var(--bg-elev));
}

/* subtle tweaks for light so it doesn't feel heavy */
:root[data-theme="light"]{
  --scroll-track: color-mix(in oklab, var(--border) 28%, transparent);
  --scroll-thumb: color-mix(in oklab, var(--brand) 26%, var(--bg-elev));
  --scroll-thumb-hover: color-mix(in oklab, var(--accent) 36%, var(--bg-elev));
}

/* Firefox */
:root,
.split-col, .mail-body, .table-wrap, .nselect-menu, .dlg-body, .popover{
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

/* WebKit (Chrome/Edge/Safari/Opera) */
*::-webkit-scrollbar{
  width: var(--scroll-size);
  height: var(--scroll-size);
}
*::-webkit-scrollbar-track{
  background: var(--scroll-track);
  border-radius: var(--scroll-radius);
}
*::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb);
  border-radius: var(--scroll-radius);
  border: 2px solid transparent;     /* keeps a nice gap from the track */
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background: var(--scroll-thumb-hover);
}
*::-webkit-scrollbar-corner{ background: transparent; }

/* Softer hover shadows */
:root{ --shadow-md-soft: 0 8px 24px rgba(0,0,0,.16); }
:root[data-theme="light"]{ --shadow-md-soft: 0 8px 24px rgba(0,0,0,.12); }

/* override the existing hover rules */
.pane:hover{ box-shadow: var(--shadow-md-soft) !important; }
.pane:hover, .sec:hover{ box-shadow: var(--shadow-md-soft) !important; }
/* Keep open dropdowns above their neighbors */
.nselect[data-open="1"]{
  z-index: 41;
  position: relative;
}


/* The menu itself floats above other controls, but below .popover (50) */
.nselect-menu{
  z-index: 40;
}
/* stop text being cut in the language dropdown */
.nselect-trigger{
  height: 40px;           /* keep your size */
  line-height: 1.2;       /* was 1 — allows descenders */
  padding: 0 12px 1px;    /* tiny bottom padding avoids edge cases */
}
.nselect .label{
  display: block;         /* own line box = more reliable metrics */
  line-height: 1.2;
}