/* Positioning (launcher + panel) */
.ksas-panel-launcher.ksas-pos-right-bottom{ right:18px; bottom:18px; left:auto; top:auto; }
.ksas-panel-launcher.ksas-pos-left-bottom{ left:18px; bottom:18px; right:auto; top:auto; }
.ksas-panel-launcher.ksas-pos-right-top{ right:18px; top:18px; left:auto; bottom:auto; }
.ksas-panel-launcher.ksas-pos-left-top{ left:18px; top:18px; right:auto; bottom:auto; }

.ksas-panel.ksas-pos-right-bottom{ right:18px; bottom:76px; left:auto; top:auto; }
.ksas-panel.ksas-pos-left-bottom{ left:18px; bottom:76px; right:auto; top:auto; }
.ksas-panel.ksas-pos-right-top{ right:18px; top:76px; left:auto; bottom:auto; }
.ksas-panel.ksas-pos-left-top{ left:18px; top:76px; right:auto; bottom:auto; }

/* KSAS Frontend Panel (MVP) */
:root{
  --ksas-panel-z: 2147483000;
  --ksas-panel-backdrop-z: 2147482980;
  --ksas-panel-dialog-z: 2147483000;
--ksas-font-scale: 1;
  --ksas-line-height: normal;

  /* Panel theme tokens (Apple-clean, readable) */
  --ksas-surface: #ffffff;
  --ksas-surface-2: #f5f5f7;
  --ksas-text: rgba(17,17,17,.92);
  --ksas-muted: rgba(60,60,67,.78);
  --ksas-border: rgba(60,60,67,.18);
  --ksas-shadow: 0 18px 60px rgba(0,0,0,.18);
  /* default: Krauss.Solutions orange (can be overridden by backend branding) */
  --ksas-accent: #f97316;
  /* modern browsers */
  --ksas-focus: color-mix(in srgb, var(--ksas-accent) 55%, transparent);
  --ksas-hover: rgba(0,0,0,.06);
  --ksas-section-bg: rgba(0,0,0,.035);

  /* Frontend panel header (match backend) */
  --ksas-header-bg: #343942;
  --ksas-header-text: #ffffff;
}

.ksas-theme-dark{
  --ksas-surface: #1c1c1e;
  --ksas-surface-2: #2c2c2e;
  --ksas-text: rgba(235,235,245,.92);
  --ksas-muted: rgba(235,235,245,.72);
  --ksas-border: rgba(235,235,245,.18);
  --ksas-shadow: 0 18px 60px rgba(0,0,0,.55);
  --ksas-focus: color-mix(in srgb, var(--ksas-accent) 65%, transparent);
  --ksas-hover: rgba(255,255,255,.08);
  --ksas-section-bg: rgba(255,255,255,.06);
}


.ksas-theme-light{
  /* explicit light */
}
html.ksas-fontscale{
  font-size: calc(100% * var(--ksas-font-scale));
}
body.ksas-lineheight{
  line-height: var(--ksas-line-height);
}

/* Pro modules (safe defaults) */
html.ksas-dyslexia-font body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

html.ksas-focus-highlight :focus{
  outline: 3px solid var(--ksas-focus) !important;
  outline-offset: 2px;
}

.ksas-panel-launcher{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: var(--ksas-panel-z);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  background: var(--ksas-surface, #ffffff);
  backdrop-filter: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  color: var(--ksas-text);
  font: inherit;
  cursor: pointer;
}
.ksas-panel-launcher:focus{
  outline: 3px solid var(--ksas-focus);
  outline-offset: 2px;
}
.ksas-panel-launcher .ksas-ico{
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--ksas-accent);
  display:flex; align-items:center; justify-content:center;
  color: #fff;
  font-weight: 700;
}
/* Harden icon visibility against theme-wide SVG rules */
.ksas-panel-launcher .ksas-ico svg{ display:block; width:18px; height:18px; }
.ksas-panel-launcher .ksas-ico svg path{ fill: currentColor !important; }
.ksas-panel-backdrop{
  pointer-events: auto;
  position: fixed;
  inset: 0;
  z-index: var(--ksas-panel-backdrop-z);
  background: rgba(0,0,0,.35);
  backdrop-filter: none;
  display: none;
}
.ksas-panel{
  pointer-events: auto;
  position: fixed;
  right: 18px;
  bottom: 76px;
  z-index: var(--ksas-panel-dialog-z);
  width: min(420px, calc(100vw - 36px));
  max-height: min(78vh, 760px);
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  background: var(--ksas-surface, #ffffff);
  backdrop-filter: none;
  box-shadow: var(--ksas-shadow);
  display: none;
  flex-direction: column;

  /* Match backend toggle sizing (BeTheme/Muffin var used by admin styles) */
  --mfn-button-padding: 10px 20px 14px 20px;
}
.ksas-panel[data-open="1"]{ display:flex; }
.ksas-panel-backdrop[data-open="1"]{ display:block; }

.ksas-panel-head{
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  background: var(--ksas-header-bg);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ksas-panel-head-inner{
  display:flex;
  align-items:center;
  min-height: 40px;
}
.ksas-panel-head-logo{
  max-width: 250px;
  width: 100%;
  height: auto;
  display:block;
}
.ksas-panel-close{
  border: 0;
  background: transparent;
  width: 38px; height: 38px;
  border-radius: 16px;
  cursor:pointer;
  color: var(--ksas-header-text);
  font-size: 18px;
  line-height: 1;
}
.ksas-panel-close:hover{ background: rgba(255,255,255,.10); }
.ksas-panel-close:focus{ outline: 3px solid var(--ksas-focus); outline-offset: 2px; }

.ksas-panel-body{
  padding: 12px 14px 24px;
  overflow: auto;
  flex: 1;
}
.ksas-panel-section{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: var(--ksas-section-bg);
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
}

.ksas-profile[hidden]{
  display:none !important;
}

.ksas-profile{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  border-radius: 16px;
  background: var(--ksas-surface-2);
  margin-bottom: 12px;
}
.ksas-profile-top{ margin-top: 0; }
.ksas-profile-label{
  font-size: 13px;
  color: var(--ksas-muted);
}
.ksas-profile-select{
  flex:1;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  border-radius: 16px;
  padding: 10px 12px;
  background: var(--ksas-surface, #ffffff);
  color: var(--ksas-text);
  font: inherit;
}
.ksas-profile-select:focus{
  outline: 3px solid var(--ksas-focus);
  outline-offset: 2px;
}

.ksas-tts-btn{
  width: 100%;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  border-radius: 16px;
  background: var(--ksas-surface, #ffffff);
  padding: 10px 12px;
  cursor: pointer;
  color: var(--ksas-text);
  font: inherit;
}
.ksas-tts-btn:hover{ background: var(--ksas-hover); }
.ksas-tts-btn:focus{ outline: 3px solid var(--ksas-focus); outline-offset: 2px; }
.ksas-panel-section h3{
  margin: 0 0 10px;
  font-size: 13px;
  opacity: 1;
  font-weight: 700;
  color: #343942;
}

/* Language + statement row above text adjustments */
.ksas-top-controls{
  margin: 0 0 10px;
}
.ksas-top-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ksas-top-tile{ min-width: 0; }

/* Make the statement link look/behave like other primary action buttons */
.ksas-panel .ksas-statement-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ksas-text-top{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  border-radius: 14px;
  background: var(--ksas-section-bg);
}
.ksas-text-top-col{ min-width:0; }
.ksas-text-top-title{
  font-size: 12px;
  font-weight: 700;
  color: var(--ksas-text);
  margin: 0 0 8px;
}
.ksas-statement-link{
  display: inline-block;
  padding: 10px 12px;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  border-radius: 999px;
  background: var(--ksas-surface, #ffffff);
  color: var(--ksas-text);
  text-decoration: none;
  font-weight: 600;
}
.ksas-statement-link:hover{ background: var(--ksas-hover); }
.ksas-statement-link:focus{ outline: 3px solid var(--ksas-focus); outline-offset: 2px; }

.ksas-lang-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 160px;
  overflow: auto;
  padding-right: 2px;
}
.ksas-lang-btn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  border-radius: 999px;
  background: var(--ksas-surface, #ffffff);
  color: var(--ksas-text);
  font: inherit;
  cursor: pointer;
}
.ksas-lang-btn:hover{ background: var(--ksas-hover); }
.ksas-lang-btn:focus{ outline: 3px solid var(--ksas-focus); outline-offset: 2px; }
.ksas-lang-btn.is-active{
  border-color: var(--ksas-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ksas-accent) 25%, transparent);
}
.ksas-lang-flag{
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ksas-surface-2);
  flex: 0 0 auto;
}
.ksas-lang-name{
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 420px){
  .ksas-top-grid{ grid-template-columns: 1fr; }
  .ksas-text-top{ grid-template-columns: 1fr; }
  .ksas-lang-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ksas-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ksas-grid > *{ min-width: 0; }
@media (max-width: 420px){
  .ksas-grid{ grid-template-columns: 1fr; }
}


/* Tile layout (match backend module cards) */
.ksas-titlewrap{ display:flex; flex-direction:column; gap:4px; }
.ksas-title{ font-weight: 700; font-size: 14px; line-height: 1.2; }
.ksas-desc{ font-size: 12px; line-height: 1.3; color: var(--ksas-muted); }
.ksas-tile{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--ksas-surface, #ffffff);
  padding: 12px;
  min-height: 74px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.ksas-tile .ksas-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.ksas-tile .ksas-label{
  font-size: 13px;
  line-height: 1.2;
}
.ksas-stepper{
  display:flex;
  align-items:center;
  gap: 8px;
}
.ksas-stepper button{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  background: rgba(255,255,255,.95);
  cursor:pointer;
}
.ksas-stepper button:hover{ background: rgba(0,0,0,.04); }

/* Toggle / Schieberegler (match backend Frontend-Panel) */
.ksas-toggle{
  width: 46px;
  height: 24px;
  border-radius: 999px;
  border: 0;
  background: rgba(52,57,66,.22);
  position: relative;
  cursor: pointer;
  transition: background .18s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.ksas-toggle::after{
  content:"";
  position:absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
  transition: transform .18s ease;
}
.ksas-toggle[aria-checked="true"]{
  background: var(--ksas-accent);
}
.ksas-toggle[aria-checked="true"]::after{
  transform: translateX(22px);
}
.ksas-toggle:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--ksas-accent) 35%, transparent);
  outline-offset: 2px;
}
/* Hover states: better contrast + backend-like orange focus */
.ksas-stepper button:hover,
.ksas-tts-btn:hover,
.ksas-reset:hover,
.ksas-profile-select:hover{
  border-color: var(--ksas-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ksas-accent) 20%, transparent);
  color: var(--ksas-accent);
}

.ksas-panel-footer{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.ksas-powered-by{
  font-size: 12px;
  line-height: 1.2;
  color: var(--ksas-muted);
  text-align: center;
}
.ksas-powered-by a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(127,127,127,.35);
}
.ksas-powered-by a:hover{ border-bottom-color: currentColor; }
.ksas-reset{
  /* Match "Vorlesen" button sizing/contrast (line-height, spacing, border) */
  width: 100%;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  border-radius: 16px;
  background: var(--ksas-surface, #ffffff);
  padding: 10px 12px;
  font: inherit;
  color: var(--ksas-text);
  cursor: pointer;
}

.ksas-tts-btn{
  width:100%;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  border-radius: 16px;
  background: var(--ksas-surface, #ffffff);
  padding: 10px 12px;
  font: inherit;
  color: var(--ksas-text);
  cursor:pointer;
}
.ksas-tts-btn:hover{ background: var(--ksas-surface-2); }
.ksas-tts-btn:focus{ outline: 3px solid var(--ksas-focus); outline-offset: 2px; }
.ksas-reset:hover{ background: var(--ksas-surface-2); }

/* Ensure all toggles look identical even when focused/active */
.ksas-toggle:focus{ outline: none; }

/* Effects */
html.ksas-contrast-light{ filter: brightness(1.05) contrast(1.1); }
html.ksas-contrast-dark{ filter: invert(1) hue-rotate(180deg); }
html.ksas-contrast-dark img, html.ksas-contrast-dark video, html.ksas-contrast-dark iframe{ filter: invert(1) hue-rotate(180deg); }
html.ksas-contrast-high{ filter: contrast(1.5) saturate(1.2); }

html.ksas-highlight-links a{
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  background: rgba(255,230,0,.18) !important;
}

html.ksas-big-cursor, html.ksas-big-cursor *{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M6 6 L6 40 L16 30 L22 44 L28 42 L22 28 L36 28 Z' fill='%230b0b0b'/%3E%3C/svg%3E") 6 6, auto !important;
}

html.ksas-stop-animations *{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html.ksas-hide-images img,
html.ksas-hide-images svg,
html.ksas-hide-images video,
html.ksas-hide-images picture{
  visibility: hidden !important;
}

/* Apple-clean tiles */
.ksas-row-head{
  justify-content: space-between;
  gap: 10px;
}
.ksas-tile-ico{ display:none !important; }
.ksas-tile-ico{
  background: color-mix(in srgb, var(--ksas-accent) 12%, var(--ksas-surface));
  border: 1px solid color-mix(in srgb, var(--ksas-accent) 22%, var(--ksas-border));
  color: var(--ksas-accent);
}

.ksas-theme-dark .ksas-tile{
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 1px 2px rgba(0,0,0,.40);
}
.ksas-theme-dark .ksas-stepper button,
.ksas-theme-dark .ksas-action-btn,
.ksas-theme-dark .ksas-profile-select{
  background: rgba(28,28,30,.92);
}
.ksas-theme-dark .ksas-toggle{ border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.18); }
.ksas-panel .ksas-muted{
  color: var(--ksas-muted);
}
.ksas-panel *:focus-visible{
  outline: 3px solid var(--ksas-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .ksas-panel *, .ksas-panel-launcher{ transition: none !important; animation: none !important; }
}
html.ksas-stop-animations .ksas-panel *, html.ksas-stop-animations .ksas-panel-launcher{
  transition: none !important;
  animation: none !important;
}

/* 2C: Spacing (readability) */
html.ksas-spacing-medium{
  letter-spacing: 0.02em !important;
  word-spacing: 0.08em !important;
}
html.ksas-spacing-large{
  letter-spacing: 0.04em !important;
  word-spacing: 0.14em !important;
}
html.ksas-spacing-medium body,
html.ksas-spacing-large body{
  line-height: 1.8 !important;
}

/* 2C: Bionic Reading */
html.ksas-bionic-reading .ksas-bionic-word b{
  font-weight: 800;
}

/* 2C: Reading Ruler (Line + Dimming) */
#ksas-reading-ruler{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000;
}
#ksas-reading-ruler .ksas-ruler-dim{
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(0.4px);
}
#ksas-reading-ruler .ksas-ruler-dim-top{ top: 0; height: 40%; }
#ksas-reading-ruler .ksas-ruler-dim-bottom{ bottom: 0; top: 60%; }
#ksas-reading-ruler .ksas-ruler-line{
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}

@media (prefers-color-scheme: light){
  #ksas-reading-ruler .ksas-ruler-line{
    background: rgba(0,0,0,.75);
    box-shadow: 0 0 0 1px rgba(255,255,255,.35);
  }
}


/* Branding logo */
.ksas-panel-brand{
  display:flex;
  justify-content:center;
  padding: 10px 16px 0;
}
.ksas-panel-logo{
  width:250px;
  max-width:100%;
  height:auto;
}

/* Action button (for valueText actions like TTS start/stop) */
.ksas-action-btn{
  width:100%;
  border:1px solid var(--ksas-border);
  border-radius:16px;
  background: var(--ksas-surface, #ffffff);
  padding:10px 12px;
  cursor:pointer;
  color: var(--ksas-text);
}
.ksas-action-btn:hover{
  background: var(--ksas-hover);
}
.ksas-theme-dark .ksas-action-btn{
  background: rgba(28,28,30,.92);
}
.ksas-theme-dark .ksas-action-btn:hover{
  background: rgba(255,255,255,.06);
}



/* === Widget: unify primary buttons (match Vorlesen) === */
.ksas-panel .ksas-tts-btn,
.ksas-panel .ksas-action-btn,
.ksas-panel .ksas-reset,
.ksas-panel .ksas-panel-close{
  font: inherit;
  line-height: 1.2;
  padding: 10px 12px;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  border-radius: 16px;
  background: var(--ksas-surface, #ffffff);
  color: var(--ksas-text);
}

.ksas-panel .ksas-tts-btn:hover,
.ksas-panel .ksas-action-btn:hover,
.ksas-panel .ksas-reset:hover,
.ksas-panel .ksas-panel-close:hover{
  background: color-mix(in srgb, var(--ksas-accent) 12%, var(--ksas-surface));
  border-color: color-mix(in srgb, var(--ksas-accent) 22%, var(--ksas-border));
  color: var(--ksas-accent);
}

.ksas-panel .ksas-tts-btn:focus-visible,
.ksas-panel .ksas-action-btn:focus-visible,
.ksas-panel .ksas-reset:focus-visible,
.ksas-panel .ksas-panel-close:focus-visible{
  outline: 3px solid var(--ksas-focus);
  outline-offset: 2px;
}

/* =====================
   New Modules (frontend)
   ===================== */

/* Text alignment */
html.ksas-align-left body{ text-align:left; }
html.ksas-align-center body{ text-align:center; }
html.ksas-align-right body{ text-align:right; }
html.ksas-align-justify body{ text-align:justify; }

/* Grayscale */
html.ksas-grayscale{ filter: grayscale(1); }

/* Invert colors */
html.ksas-invert-colors{ filter: invert(1) hue-rotate(180deg); }

/* Text magnifier bubble */
#ksas-text-magnifier{
  position: fixed;
  z-index: 999999;
  max-width: 300px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  color: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  font-size: 18px;
  line-height: 1.35;
  pointer-events: none;
}

@media (prefers-color-scheme: dark){
  #ksas-text-magnifier{
    background: rgba(28,28,30,.96);
    border-color: rgba(255,255,255,.14);
    color: #fff;
  }
}

/* Reading mask (spotlight) */
#ksas-reading-mask{
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  background: rgba(0,0,0,.55);
  --ksas-mask-x: 50vw;
  --ksas-mask-y: 50vh;
  -webkit-mask-image: radial-gradient(circle 140px at var(--ksas-mask-x) var(--ksas-mask-y), transparent 0 120px, black 160px);
  mask-image: radial-gradient(circle 140px at var(--ksas-mask-x) var(--ksas-mask-y), transparent 0 120px, black 160px);
}

/* Keyboard navigation */
html.ksas-keyboard-nav :focus-visible{
  outline: 3px solid var(--ksas-accent) !important;
  outline-offset: 2px !important;
}

.ksas-skip-link{
  position: absolute;
  left: 12px;
  top: 12px;
  transform: translateY(-200%);
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.2);
  color: #111;
  z-index: 999999;
}
.ksas-skip-link:focus{ transform: translateY(0); }

/* Page structure dialog */
.ksas-structure-dialog{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ksas-structure-card{
  width: min(520px, 96vw);
  max-height: min(640px, 90vh);
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
}
.ksas-structure-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.ksas-structure-title{ font-weight: 650; }
.ksas-structure-close{
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
}
.ksas-structure-list{
  padding: 10px;
  overflow: auto;
}
.ksas-structure-item{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 8px 0;
  cursor: pointer;
}
.ksas-structure-item:hover{ background: rgba(0,0,0,.04); }

/* Tile select */
.ksas-panel .ksas-select{
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  background: var(--ksas-surface, #ffffff);
  padding: 8px 10px;
  color: var(--ksas-text);
}

/* Searchable language dropdown */
.ksas-lang-dd{ position: relative; width: 100%; }
.ksas-lang-trigger{ text-align: left; display: inline-flex; align-items: center; gap: 8px; }
.ksas-lang-pop{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 99999;
  background: var(--ksas-surface, #ffffff);
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  padding: 10px;
}
.ksas-lang-search{
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid var(--ksas-border, rgba(0,0,0,.12));
  background: var(--ksas-surface, #ffffff);
  padding: 8px 10px;
  color: var(--ksas-text);
  outline: none;
}
.ksas-lang-search:focus{ box-shadow: 0 0 0 3px rgba(249,115,22,.18); }
.ksas-lang-list{ max-height: 260px; overflow: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ksas-lang-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--ksas-text);
  border-radius: 10px;
  padding: 10px 10px;
  cursor: pointer;
}
.ksas-lang-item:hover{ background: rgba(0,0,0,.06); }
.ksas-lang-item:focus{ outline: none; box-shadow: 0 0 0 3px rgba(249,115,22,.18); }



/* Language flags */
.ksas-flag{width:18px;height:18px;display:inline-block;vertical-align:middle;border-radius:4px;object-fit:cover;margin-right:8px;}
.ksas-lang-item{display:inline-flex;align-items:center;gap:0;}
#ksas-admin-lang-trigger, #ksas-lang-trigger{display:inline-flex;align-items:center;}


/* --- KSAS UI tweaks (0.0.11.63) --- */
/* Remove outer container frame for Language + Statement top area */
.ksas-panel .ksas-text-top{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Remove tile framing for Language + Statement tiles (keep inner controls only) */
.ksas-panel #ksas-lang-tile,
.ksas-panel #ksas-statement-tile{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Align font-size stepper visually with other dropdown buttons */
.ksas-panel .ksas-stepper{
  align-self: flex-start;
}

/* Move toggles slightly left to align across tiles (fix keyboard navigation row) */
.ksas-panel .ksas-toggle{
  margin-right: 4px;
}


/* --- KSAS alignment fixes (0.0.11.64) --- */
/* Make the first row in tiles use a fixed 'action' column so toggles align consistently */
.ksas-panel .ksas-tile > .ksas-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

/* Stepper tiles: lift +/- buttons to match dropdown button baseline */
.ksas-panel .ksas-tile-stepper .ksas-row:last-child{
  align-items: flex-start;
}
.ksas-panel .ksas-tile-stepper .ksas-stepper{
  margin-top: -6px;
}
.ksas-panel .ksas-tile-stepper .ksas-label{
  margin-top: -2px;
}