@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&family=Lexend:wght@400;700&family=Atkinson+Hyperlegible:wght@400;700&family=Nunito:wght@400;700&family=Fredoka:wght@400;700&family=Space+Grotesk:wght@400;700&family=Merriweather:wght@400;700&family=Cinzel:wght@400;700&family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:wght@400;700&family=Uncial+Antiqua&family=MedievalSharp&family=Grenze+Gotisch:wght@400;700&family=UnifrakturMaguntia&family=Pirata+One&family=Metamorphous&family=Caveat:wght@400;700&family=Patrick+Hand&family=Kalam:wght@400;700&display=swap");
:root {
  --ink: #151126;
  --muted: #746e85;
  --line: #e8e5ef;
  --panel: rgba(255, 255, 255, 0.88);
  --soft: #f7f6fa;
  --purple: #8429ec;
  --purple-dark: #5e18c8;
  --cyan: #0cc9dd;
  --pink: #e944c3;
  --shadow: 0 22px 60px rgba(45, 27, 77, 0.1);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--ink);
  background: #f4f2f8;
  overflow-x: hidden;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  color: inherit;
}
svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ambient {
  position: fixed;
  border-radius: 999px;
  filter: blur(10px);
  pointer-events: none;
  opacity: 0.25;
}
.ambient-one {
  width: 420px;
  height: 420px;
  background: #d9a7ff;
  top: -260px;
  left: -80px;
}
.ambient-two {
  width: 360px;
  height: 360px;
  background: #7aeaf0;
  right: -220px;
  top: 180px;
}
.topbar {
  height: 76px;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(220, 216, 229, 0.8);
  backdrop-filter: blur(18px);
  position: relative;
  z-index: 5;
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--ink);
}
.brand img {
  width: 168px;
  height: 46px;
  object-fit: contain;
}
.brand-divider {
  width: 1px;
  height: 24px;
  background: var(--line);
}
.product-name {
  font-size: 14px;
  font-weight: 700;
}
.product-name em {
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 9px;
  letter-spacing: 0.08em;
  font-style: normal;
  color: #6e1cce;
  background: #f0e4ff;
}
.header-actions,
.save-state {
  display: flex;
  align-items: center;
  gap: 10px;
}
.save-state {
  color: var(--muted);
  font-size: 12px;
}
.save-state i,
.live-badge i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: #22bf8b;
  box-shadow: 0 0 0 3px rgba(34, 191, 139, 0.12);
}
.icon-button,
.small-icon {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.icon-button {
  width: 38px;
  height: 38px;
}
.small-icon {
  width: 32px;
  height: 32px;
  font-size: 22px;
  color: var(--purple);
}
.app-shell {
  max-width: 1840px;
  margin: auto;
  padding: 24px 28px 36px;
  position: relative;
}
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(224, 220, 232, 0.9);
  border-radius: 14px;
  margin-bottom: 18px;
}
.tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.tab svg {
  width: 18px;
}
.tab.active {
  background: #fff;
  color: var(--purple-dark);
  box-shadow: 0 5px 18px rgba(42, 25, 67, 0.08);
}
.workspace {
  display: none;
  grid-template-columns: 240px minmax(480px, 0.92fr) minmax(480px, 1.08fr);
  min-height: calc(100vh - 150px);
  border: 1px solid rgba(225, 221, 232, 0.95);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(16px);
}
.workspace.active {
  display: grid;
}
.library-panel,
.editor-panel,
.preview-panel,
.mindmap-settings,
.map-preview-panel {
  padding: 26px;
}
.library-panel {
  background: #faf9fc;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.editor-panel {
  border-right: 1px solid var(--line);
}
.preview-panel,
.map-preview-panel {
  background: linear-gradient(155deg, #fbfafd, #f5f3f8);
}
.panel-heading,
.section-title-row,
.section-title-row > div,
.name-row,
.editor-actions,
.preview-meta,
.generated-code > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-heading {
  margin-bottom: 24px;
}
.eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #9a93a8;
  margin-bottom: 5px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2 {
  margin-bottom: 0;
  letter-spacing: -0.025em;
}
h1 {
  font-size: 20px;
}
h2 {
  font-size: 16px;
}
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #686175;
  margin-bottom: 8px;
}
.select-wrap {
  position: relative;
}
.select-wrap select {
  width: 100%;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 10px 35px 10px 11px;
  font-size: 12px;
}
.select-wrap svg {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 17px;
  pointer-events: none;
}
.search-wrap {
  margin-top: 13px;
  position: relative;
}
.search-wrap svg {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 16px;
  color: #9b94a7;
}
.search-wrap input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px 9px 34px;
  background: #fff;
  font-size: 12px;
  outline: none;
}
.saved-list {
  margin-top: 14px;
  display: grid;
  gap: 7px;
  max-height: 440px;
  overflow: auto;
}
.saved-item {
  padding: 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  background: transparent;
  text-align: left;
}
.saved-item:hover {
  background: #f3eff9;
}
.saved-item.active {
  background: #f0e6ff;
  border-color: #ddc4ff;
}
.saved-item strong {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-item span {
  color: #91899d;
  font-size: 10px;
}
.library-empty {
  flex: 1;
  display: grid;
  place-content: center;
  text-align: center;
  color: #9a93a7;
}
.library-empty span {
  font-size: 28px;
  color: #c5bdcf;
}
.library-empty p {
  margin: 8px 0 3px;
  font-size: 12px;
  font-weight: 700;
}
.library-empty small {
  font-size: 10px;
}
.library-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
}
.secondary-button,
.primary-button {
  border-radius: 10px;
  min-height: 40px;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.secondary-button {
  border: 1px solid var(--line);
  background: #fff;
}
.secondary-button:hover {
  border-color: #cfc3df;
  background: #fbf8ff;
}
.secondary-button svg,
.primary-button svg {
  width: 16px;
}
.primary-button {
  border: 0;
  color: #fff;
  background: linear-gradient(110deg, #711ddb, #a628ed);
  box-shadow: 0 10px 24px rgba(122, 28, 218, 0.22);
}
.primary-button:hover {
  filter: brightness(1.07);
}
.step-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-right: 11px;
  border: 1px solid #ded7e8;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800;
  color: var(--purple);
  background: #fff;
}
.type-badge,
.live-badge {
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 800;
  border-radius: 7px;
}
.type-badge {
  color: #6e1acb;
  background: #f0e3ff;
}
.live-badge {
  color: #487466;
  background: #e9f8f3;
  display: flex;
  gap: 7px;
  align-items: center;
}
.name-row {
  margin: 24px 0 10px;
}
.title-input {
  width: 75%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  outline: none;
}
.project-name-box {
  width: 78%;
}
.project-name-box label {
  display: block;
  margin-bottom: 4px;
  color: #9a93a8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
}
.project-name-box .title-input {
  width: 100%;
  font-size: 14px;
}
.text-button {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}
.danger {
  color: #c73d62;
}
.code-shell {
  border: 1px solid #302943;
  border-radius: 13px;
  overflow: hidden;
  background: #181522;
  box-shadow: 0 12px 28px rgba(20, 15, 32, 0.15);
}
.color-palette-card {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}
.palette-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.palette-heading small {
  color: #958e9e;
  font-size: 9px;
}
.palette-heading > span {
  color: #7c7388;
  font-size: 9px;
  font-weight: 750;
}
.detected-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
  min-height: 32px;
  align-items: center;
}
.palette-empty {
  color: #aaa3b2;
  font-size: 9px;
}
.color-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font:
    8px Consolas,
    monospace;
  cursor: pointer;
}
.color-chip input {
  width: 23px;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
.color-chip input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.color-chip input::-webkit-color-swatch {
  border: 0;
  border-radius: 5px;
}
.code-toolbar {
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  background: #232031;
  border-bottom: 1px solid #342f44;
}
.code-toolbar > span {
  display: flex;
  gap: 5px;
}
.code-toolbar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
  background: #514a60;
}
.code-toolbar i:first-child {
  background: #e35d78;
}
.code-toolbar i:nth-child(2) {
  background: #e4bb51;
}
.code-toolbar i:last-child {
  background: #51c798;
}
.code-toolbar strong {
  color: #878091;
  font-size: 8px;
  letter-spacing: 0.18em;
}
.code-toolbar button {
  border: 0;
  background: none;
  color: #9c95a6;
  font-size: 9px;
  cursor: pointer;
}
.code-body {
  height: 280px;
  min-height: 280px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  overflow: hidden;
}
.line-numbers {
  height: 280px;
  overflow: hidden;
  color: #565062;
  border-right: 1px solid #2b2736;
  padding: 13px 10px;
  text-align: right;
  font:
    11px/1.65 "SFMono-Regular",
    Consolas,
    monospace;
  white-space: pre-line;
  user-select: none;
}
.code-body textarea {
  width: 100%;
  height: 280px;
  min-height: 0;
  resize: none;
  overflow: auto;
  white-space: pre;
  border: 0;
  outline: 0;
  padding: 13px;
  background: transparent;
  color: #d8d4df;
  font:
    11px/1.65 "SFMono-Regular",
    Consolas,
    monospace;
}
.code-body textarea::placeholder {
  color: #5f5968;
}
.controls-card {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.75);
}
.toggle-row {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eeebf1;
}
.toggle-row > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.toggle-row strong,
.toggle-row small {
  display: block;
}
.toggle-row strong {
  font-size: 11px;
  margin-bottom: 3px;
}
.toggle-row small {
  font-size: 9px;
  color: #9891a2;
}
.control-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--purple);
  background: #fff;
}
.switch input,
.percent-choice input {
  position: absolute;
  opacity: 0;
}
.switch span {
  width: 37px;
  height: 21px;
  border-radius: 99px;
  display: block;
  background: #d9d5df;
  position: relative;
  transition: 0.2s;
  cursor: pointer;
}
.switch span:after {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px #aaa;
}
.switch input:checked + span {
  background: var(--purple);
}
.switch input:checked + span:after {
  transform: translateX(16px);
}
.dimension-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding-top: 14px;
}
.dimension-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 700;
}
.percent-choice span {
  display: block;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: #8a8394;
  font-size: 8px;
  cursor: pointer;
}
.percent-choice input:checked + span {
  color: #fff;
  background: var(--purple);
  border-color: var(--purple);
}
.slider-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
input[type="range"] {
  min-width: 0;
  flex: 1;
  accent-color: var(--purple);
  height: 4px;
}
input[type="range"]:disabled {
  opacity: 0.25;
}
.number-input {
  width: 72px;
  height: 29px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}
.number-input input {
  width: 48px;
  border: 0;
  outline: 0;
  padding-left: 8px;
  font-size: 9px;
  font-weight: 700;
}
.number-input span {
  font-size: 8px;
  color: #9b94a4;
}
.number-input.disabled {
  opacity: 0.3;
  pointer-events: none;
}
.editor-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.roomy {
  min-width: 112px;
}
.preview-title {
  margin-bottom: 24px;
}
.preview-stage {
  height: 590px;
  min-height: 0;
  padding: 44px 32px 32px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: #eeecf2;
  background-image:
    linear-gradient(#d9d5df 1px, transparent 1px),
    linear-gradient(90deg, #d9d5df 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid #ded9e4;
  border-radius: 15px;
  position: relative;
  overflow: auto;
}
.preview-stage:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9),
    rgba(245, 243, 248, 0.32)
  );
  pointer-events: none;
}
.node-label {
  position: absolute;
  top: 14px;
  left: 16px;
  color: #a29bab;
  font-size: 8px;
  letter-spacing: 0.14em;
  font-weight: 800;
  z-index: 1;
}
.preview-frame-wrap {
  width: 720px;
  height: 440px;
  min-width: 0;
  max-width: none;
  flex: 0 0 auto;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 15px 45px rgba(43, 29, 65, 0.18);
  z-index: 1;
  transition: 0.2s;
}
.preview-frame-wrap.transparent {
  background: transparent;
  box-shadow: none;
}
.preview-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.studio-cover-settings {
  padding: 13px 0 3px;
  border-bottom: 1px solid var(--line);
}
.studio-cover-settings[hidden] {
  display: none;
}
.studio-cover-settings .cover-theme-row {
  margin-top: 10px;
  padding-bottom: 10px;
}
.studio-cover-preview {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  overflow: hidden;
  padding: clamp(14px, 4vw, 28px) 18px 14px;
}
.studio-cover-preview[hidden] {
  display: none;
}
.studio-cover-preview.theme-light {
  color: #211735;
  background: radial-gradient(circle at 44% 35%, #fff, #f4ecff 50%, #e8f9fb);
}
.studio-cover-preview.theme-dark {
  color: #fff;
  background: radial-gradient(circle at 45% 35%, #3b246a, #171027 48%, #0d0916);
}
.studio-cover-preview .studio-cover-logo {
  width: min(290px, 58%);
  height: auto;
}
.studio-cover-preview.theme-dark .studio-cover-logo {
  filter: brightness(0) invert(1);
}
.studio-cover-main > span {
  margin-top: 16px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  opacity: 0.6;
}
.studio-cover-preview h3 {
  margin: 8px 18px 22px;
  font-size: clamp(22px, 3vw, 34px);
}
.studio-cover-preview button {
  min-width: 240px;
  padding: 13px 18px;
  border: 1px solid #ffffff55;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, #7920de, #df3abe);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.studio-cover-main {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 12px;
}
.studio-cover-preview small,
.studio-cover-powered {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  margin-top: auto;
  opacity: 0.48;
  font-size: 8px;
  line-height: 1.2;
}
.float-fullscreen {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  background: rgba(20, 16, 33, 0.78);
  backdrop-filter: blur(8px);
  border-radius: 9px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
  z-index: 4;
  font-size: 16px;
}
.empty-preview {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  color: #8b8396;
}
.empty-preview.hidden {
  display: none;
}
.empty-glyph {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  border: 1px solid #d7d1df;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--purple);
  font:
    15px Consolas,
    monospace;
}
.empty-preview strong {
  font-size: 13px;
  color: #686071;
}
.empty-preview span {
  max-width: 220px;
  margin-top: 5px;
  font-size: 10px;
}
.preview-meta {
  color: #8b8495;
  font-size: 9px;
  padding: 10px 4px 0;
}
.preview-meta span:last-child {
  display: flex;
  align-items: center;
  gap: 7px;
}
.preview-meta i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #26bc8a;
}
.compatibility-note {
  margin-top: 18px;
  padding: 13px;
  display: flex;
  gap: 11px;
  border: 1px solid #e0d7ec;
  border-radius: 11px;
  background: #faf7ff;
}
.compatibility-note > span {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #7821dc;
  background: #eadaff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}
.compatibility-note p {
  margin: 0;
  color: #8e8698;
  font-size: 9px;
  line-height: 1.5;
}
.compatibility-note strong {
  display: block;
  color: #5f566a;
  font-size: 10px;
}
.mindmap-workspace {
  grid-template-columns: minmax(460px, 0.8fr) minmax(600px, 1.2fr);
}
.mindmap-settings {
  border-right: 1px solid var(--line);
}
.lead {
  max-width: 620px;
  margin: 18px 0 26px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.url-input {
  height: 45px;
  display: flex;
  align-items: center;
  border: 1px solid #ddd7e6;
  border-radius: 10px;
  background: #fff;
}
.url-input svg {
  width: 18px;
  margin: 0 11px;
  color: var(--purple);
}
.url-input input {
  flex: 1;
  border: 0;
  outline: 0;
  padding-right: 12px;
  font-size: 12px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 17px;
}
.standard-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 11px;
  outline: 0;
  font-size: 11px;
}
.standard-input:focus,
.url-input:focus-within {
  border-color: #a969eb;
  box-shadow: 0 0 0 3px rgba(132, 41, 236, 0.08);
}
.map-controls {
  display: grid;
  gap: 15px;
  margin-top: 20px;
}
.cover-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.cover-theme-row small {
  color: #968f9f;
  font-size: 9px;
}
.theme-segment {
  display: flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f4f1f7;
}
.theme-segment input {
  position: absolute;
  opacity: 0;
}
.theme-segment span {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  color: #81798c;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}
.theme-segment input:checked + span {
  color: #6818c4;
  background: #fff;
  box-shadow: 0 3px 10px rgba(35, 20, 55, 0.1);
}
.generated-code {
  margin-top: 18px;
  padding: 14px;
  border-radius: 12px;
  background: #1a1724;
}
.generated-code .eyebrow {
  color: #9f96aa;
  margin: 0;
}
.portable-badge {
  color: #80d9be;
  background: #18372f;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 750;
}
.generated-code textarea {
  width: 100%;
  height: 110px;
  resize: vertical;
  margin-top: 8px;
  border: 0;
  outline: 0;
  color: #cfcad8;
  background: transparent;
  font:
    9px/1.6 Consolas,
    monospace;
}
.copy-map-button {
  width: 100%;
  min-height: 58px;
  margin-top: 12px;
  justify-content: flex-start;
  padding: 10px 18px;
  text-align: left;
}
.copy-map-button svg {
  width: 22px;
  margin-right: 4px;
}
.copy-map-button strong,
.copy-map-button small {
  display: block;
}
.copy-map-button strong {
  font-size: 12px;
}
.copy-map-button small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 8px;
  font-weight: 500;
}
.download-map-button {
  width: auto;
  min-height: 31px;
  margin: 9px 0 0 auto;
  padding: 6px 10px;
  font-size: 9px;
}
.map-demo-stage {
  min-height: 610px;
  display: grid;
  place-items: center;
  padding: 30px;
  border-radius: 16px;
  background-color: #eeecf2;
  background-image: radial-gradient(#d1ccd8 1px, transparent 1px);
  background-size: 18px 18px;
  overflow: auto;
}
.map-component {
  width: 100%;
  max-width: 900px;
  height: 560px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #130d25;
  box-shadow: 0 30px 70px rgba(45, 24, 70, 0.25);
}
.map-cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transition: 0.25s;
}
.map-cover.theme-dark {
  color: #fff;
  background: radial-gradient(
    circle at 45% 35%,
    #392467 0,
    #171027 42%,
    #0e0a18 100%
  );
}
.map-cover.theme-light {
  color: #211735;
  background: radial-gradient(
    circle at 44% 35%,
    #fff 0,
    #f4ecff 46%,
    #e8f9fb 100%
  );
}
.map-cover:after {
  content: "";
  position: absolute;
  width: 120%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 35px 35px;
  transform: perspective(500px) rotateX(60deg) translateY(45%);
}
.cover-glow {
  width: 280px;
  height: 280px;
  position: absolute;
  border-radius: 50%;
  background: conic-gradient(
    from 40deg,
    var(--cyan),
    var(--purple),
    var(--pink),
    var(--cyan)
  );
  filter: blur(70px);
  opacity: 0.28;
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe {
  50% {
    transform: scale(1.18) rotate(20deg);
    opacity: 0.38;
  }
}
.map-cover img {
  width: min(280px, 55%);
  height: 92px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 9px 20px rgba(0, 0, 0, 0.12));
}
.map-cover.theme-dark img {
  filter: brightness(0) invert(1) drop-shadow(0 9px 20px rgba(0, 0, 0, 0.22));
}
.cover-kicker {
  margin-top: 18px;
  position: relative;
  z-index: 2;
  color: #a9a0ba;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.map-cover.theme-light .cover-kicker {
  color: #756c82;
}
.map-cover h3 {
  margin: 8px 0 24px;
  position: relative;
  z-index: 2;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -0.03em;
}
.map-cover button {
  min-width: 240px;
  padding: 13px 18px;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(
    100deg,
    rgba(128, 37, 228, 0.9),
    rgba(226, 57, 192, 0.88)
  );
  box-shadow: 0 12px 35px rgba(154, 35, 215, 0.35);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}
.map-cover button b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.17);
}
.map-cover small {
  position: absolute;
  bottom: 22px;
  z-index: 2;
  color: #756d80;
  font-size: 8px;
}
.map-component > iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.map-load-note {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 30px;
  text-align: center;
  color: #332a3d;
  background: rgba(255, 255, 255, 0.94);
}
.map-load-note[hidden] {
  display: none;
}
.map-load-note span {
  font-size: 13px;
  font-weight: 750;
}
.map-load-note small {
  max-width: 390px;
  color: #837b8c;
  font-size: 9px;
  line-height: 1.5;
}
.map-load-note a {
  margin-top: 6px;
  color: #711ddb;
  font-size: 9px;
  font-weight: 750;
  text-decoration: none;
}
.map-fullscreen {
  display: block;
}
.flow-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 20px;
  color: #8f879a;
  font-size: 9px;
}
.flow-note div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.flow-note span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #d8d2df;
  border-radius: 50%;
  color: var(--purple);
  background: #fff;
  font-size: 8px;
}
.tool-workspace {
  grid-template-columns: minmax(430px, 0.78fr) minmax(620px, 1.22fr);
}
.tool-settings,
.tool-preview {
  padding: 26px;
}
.tool-settings {
  border-right: 1px solid var(--line);
}
.tool-preview {
  background: linear-gradient(155deg, #fbfafd, #f5f3f8);
}
.privacy-badge {
  padding: 6px 9px;
  color: #27745d;
  background: #e5f8f1;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 800;
}
.image-dropzone {
  min-height: 150px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px dashed #cfc5dc;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #faf7ff);
  cursor: pointer;
  transition: 0.2s;
}
.image-dropzone:hover,
.image-dropzone.dragging {
  border-color: #8a35df;
  background: #f8f0ff;
  transform: translateY(-1px);
}
.image-dropzone input {
  display: none;
}
.upload-glyph {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 12px;
  color: #7920de;
  background: #eee0ff;
  font-size: 21px;
}
.image-dropzone strong {
  font-size: 12px;
}
.image-dropzone small {
  margin: 5px 0 12px;
  color: #9890a2;
  font-size: 9px;
}
.image-dropzone b {
  padding: 7px 12px;
  border-radius: 7px;
  color: #fff;
  background: #7920de;
  font-size: 9px;
}
.bg-tools-card,
.designer-card {
  margin-top: 16px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.76);
}
.tool-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mode-button {
  min-height: 58px;
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.mode-button > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #7920de;
  background: #f0e4ff;
}
.mode-button strong,
.mode-button small {
  display: block;
}
.mode-button strong {
  font-size: 10px;
}
.mode-button small {
  margin-top: 3px;
  color: #938b9e;
  font-size: 8px;
}
.mode-button.active {
  border-color: #a968eb;
  background: #f9f3ff;
  box-shadow: 0 0 0 3px rgba(132, 41, 236, 0.06);
}
.wand-actions {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}
.wand-actions label {
  flex: 1;
}
.wand-actions input {
  position: absolute;
  opacity: 0;
}
.wand-actions span {
  display: block;
  padding: 7px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #81798d;
  font-size: 8px;
  cursor: pointer;
}
.wand-actions input:checked + span {
  color: #6f1ccc;
  border-color: #b982ef;
  background: #f2e8ff;
}
.range-setting {
  margin-top: 14px;
}
.range-setting > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  color: #625a6d;
  font-size: 9px;
  font-weight: 700;
}
.range-setting output {
  color: #7920de;
}
.range-setting input {
  width: 100%;
  accent-color: #8429ec;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  color: #756d80;
  font-size: 9px;
}
.check-row input {
  accent-color: #8429ec;
}
.tool-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 15px;
}
.image-comparison {
  min-height: 570px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  position: relative;
  overflow: hidden;
  border: 1px solid #ddd7e4;
  border-radius: 15px;
  background: #ddd7e4;
}
.image-pane {
  min-width: 0;
  padding: 38px 16px 16px;
  position: relative;
  display: grid;
  place-items: center;
  background: #f6f4f8;
}
.image-pane > span {
  position: absolute;
  top: 15px;
  left: 16px;
  color: #8d8597;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
}
.checker {
  width: 100%;
  height: 100%;
  min-height: 460px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: auto;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e4e2e7 25%, transparent 25%),
    linear-gradient(-45deg, #e4e2e7 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e4e2e7 75%),
    linear-gradient(-45deg, transparent 75%, #e4e2e7 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
}
.checker canvas {
  display: block;
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}
.comparison-empty {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  place-content: center;
  text-align: center;
  background: radial-gradient(circle, #fff, #f4f1f7);
  color: #8e8698;
}
.image-comparison.empty .comparison-empty {
  display: grid;
}
.comparison-empty span {
  font-size: 34px;
  color: #b69bcf;
}
.comparison-empty strong {
  margin-top: 10px;
  font-size: 13px;
  color: #62596d;
}
.comparison-empty small {
  margin-top: 5px;
  font-size: 9px;
}
.wand-cursor {
  display: none;
  position: absolute;
  z-index: 4;
  pointer-events: none;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #6f1bd7;
  box-shadow: 0 3px 12px #35125555;
}
.result-pane.wand-active .wand-cursor {
  display: grid;
}
.result-pane.wand-active canvas {
  cursor: crosshair;
}
.button-form-scroll {
  margin-top: 20px;
}
.form-grid.three {
  grid-template-columns: 1.2fr 0.9fr 0.8fr;
}
.icon-label {
  margin-top: 16px;
}
.icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.icon-option {
  height: 37px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 17px;
  cursor: pointer;
}
.icon-option:hover {
  border-color: #ad75e9;
}
.icon-option.active {
  color: #6d1bc9;
  border-color: #8f3ee0;
  background: #f2e7ff;
  box-shadow: 0 0 0 2px #ead9fa;
}
.custom-icon-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
}
.custom-icon-row > span {
  flex: 1;
  color: #9991a3;
  font-size: 8px;
}
.compact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.color-control-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 9px;
}
.color-control-grid label {
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #746c7f;
  background: #fff;
  font-size: 8px;
}
.color-control-grid input {
  width: 100%;
  height: 26px;
  margin-top: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.toggle-row.slim {
  min-height: 46px;
}
.compact-code textarea {
  height: 95px;
}
.button-demo-stage {
  min-height: 610px;
  padding: 30px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid #ded9e4;
  border-radius: 16px;
  background-color: #eeecf2;
  background-image: radial-gradient(#cec8d6 1px, transparent 1px);
  background-size: 19px 19px;
}
.button-demo-align {
  width: 100%;
  display: flex;
  justify-content: center;
}
.button-demo-align > button {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  background: linear-gradient(110deg, #7920de, #df3abe);
  font-weight: 750;
  cursor: pointer;
  transition:
    transform 0.22s,
    box-shadow 0.22s;
}
.button-demo-align > button span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.button-demo-align > button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.button-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #0e0a15;
}
.button-overlay[hidden] {
  display: none;
}
.button-overlay iframe,
.button-overlay > img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #111;
}
.button-target-gallery {
  width: 100%;
  height: 100%;
  padding: clamp(24px, 5vw, 70px);
  display: grid;
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
  justify-items: center;
  background: #111;
}
.button-target-gallery[hidden] { display: none; }
.button-target-gallery.gallery-count-1 { grid-template-columns: minmax(0, 1fr); }
.button-target-gallery.gallery-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.button-target-gallery.gallery-count-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.button-target-gallery.gallery-count-3 img:nth-child(3) { grid-column: 1 / -1; max-width: 48%; }
.button-target-gallery.gallery-count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.button-target-gallery img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(0,0,0,.32);
}
.button-target-gallery.gallery-count-1 img { max-height: 82vh; }
.button-overlay > button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid #ffffff55;
  border-radius: 11px;
  color: #fff;
  background: #171222e8;
  font-size: 20px;
  cursor: pointer;
}
.button-preview-panel:fullscreen .button-demo-stage,
.button-demo-stage:fullscreen {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}
.button-workspace {
  grid-template-columns: minmax(540px, 0.92fr) minmax(580px, 1.08fr);
}
.project-name-input {
  margin-bottom: 15px;
  font-weight: 750;
}
.project-name-input + .field-label {
  margin-top: 2px;
}
.button-workspace {
  grid-template-columns: 220px minmax(500px, 0.9fr) minmax(560px, 1.1fr);
}
.button-library {
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  background: #faf9fc;
  border-right: 1px solid var(--line);
}
.button-library .saved-list {
  max-height: 620px;
}
.button-save-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 13px;
}
.button-save-row .danger {
  margin-right: auto;
}
.tool-mode-row {
  grid-template-columns: repeat(3, 1fr);
}
.wand-confirm {
  margin-top: 9px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #ddbdf7;
  border-radius: 8px;
  background: #f7efff;
}
.wand-confirm[hidden],
.brush-actions[hidden] {
  display: none;
}
.wand-confirm span {
  flex: 1;
  color: #6e1cc9;
  font-size: 8px;
  font-weight: 750;
}
.wand-confirm button {
  padding: 6px 8px;
  border: 1px solid #d7c4e7;
  border-radius: 6px;
  background: #fff;
  color: #6e6378;
  font-size: 8px;
  cursor: pointer;
}
.wand-confirm button:last-child {
  border-color: #7920de;
  color: #fff;
  background: #7920de;
}
.zoom-toolbar {
  position: absolute;
  z-index: 8;
  top: 8px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border: 1px solid #ddd6e5;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}
.zoom-toolbar button {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #e1dbe7;
  border-radius: 5px;
  background: #fff;
  color: #7020cc;
  cursor: pointer;
}
.zoom-toolbar input {
  width: 90px;
}
.zoom-toolbar output {
  width: 34px;
  color: #776f81;
  font-size: 8px;
}
.result-pane {
  padding-top: 46px;
}
.result-pane .checker {
  place-items: start;
}
.result-pane #resultCanvasWrap {
  position: relative;
  flex: 0 0 auto;
  margin: auto;
}
.result-pane #resultCanvas,
.result-pane #selectionCanvas {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.result-pane #selectionCanvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.result-pane #selectionCanvas.blink {
  animation: selectionBlink 0.55s ease-in-out infinite alternate;
}
@keyframes selectionBlink {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 0.85;
  }
}
.brush-cursor {
  display: none;
  position: absolute;
  z-index: 7;
  pointer-events: none;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px #6f1bd7,
    0 2px 8px #0004;
}
.result-pane.brush-active .brush-cursor {
  display: block;
}
.result-pane.brush-active #resultCanvas {
  cursor: none;
}
.flashcard-workspace {
  grid-template-columns: 220px minmax(540px, 0.95fr) minmax(580px, 1.05fr);
}
.flashcard-list-panel {
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  background: #faf9fc;
  border-right: 1px solid var(--line);
}
.flashcard-list {
  display: grid;
  gap: 7px;
  max-height: 650px;
  overflow: auto;
}
.flashcard-list-item {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.flashcard-list-item.active {
  border-color: #d8b8f6;
  background: #f1e7ff;
}
.flashcard-list-item b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #7420d0;
  background: #fff;
  font-size: 8px;
}
.flashcard-list-item div {
  min-width: 0;
  flex: 1;
}
.flashcard-list-item strong,
.flashcard-list-item small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flashcard-list-item strong {
  font-size: 10px;
}
.flashcard-list-item small {
  margin-top: 3px;
  color: #968e9f;
  font-size: 8px;
}
.flashcard-list-item button {
  border: 0;
  background: none;
  color: #bf4162;
  cursor: pointer;
}
.full-card-action {
  margin-top: auto;
}
.flashcard-settings {
  padding: 26px;
  border-right: 1px solid var(--line);
}
.flashcard-scroll {
  margin-top: 20px;
}
.field-label small {
  font-weight: 500;
  color: #a49dab;
}
.face-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.face-editor {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.face-editor > div:first-child {
  height: 38px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  color: #7f768a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.face-editor textarea {
  width: 100%;
  height: 120px;
  padding: 12px;
  border: 0;
  resize: vertical;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 11px;
  line-height: 1.5;
}
.mini-upload {
  padding: 5px 7px;
  border: 1px solid #d9c8eb;
  border-radius: 6px;
  color: #7220cc;
  background: #f7f0ff;
  font-size: 8px;
  letter-spacing: 0;
  cursor: pointer;
}
.image-file-state {
  height: 30px !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 0 !important;
  color: #9a92a3 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.image-file-state button {
  border: 0;
  background: none;
  color: #bf4162;
  font-size: 8px;
  cursor: pointer;
}
.flash-design-card {
  margin-top: 13px;
}
.format-buttons {
  display: flex;
  gap: 5px;
}
.format-buttons input {
  position: absolute;
  opacity: 0;
}
.format-buttons span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}
.format-buttons input:checked + span {
  color: #fff;
  border-color: #7920de;
  background: #7920de;
}
.flashcard-preview-panel {
  padding: 26px;
  background: linear-gradient(155deg, #fbfafd, #f5f3f8);
}
.flashcard-demo-stage {
  min-height: 650px;
  padding: 45px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
  border: 1px solid #ddd8e4;
  border-radius: 16px;
  background: #efedf3;
  background-image: radial-gradient(#d0cad8 1px, transparent 1px);
  background-size: 20px 20px;
}
.flash-topic-preview {
  min-height: 25px;
  margin-bottom: 14px;
  color: #5f5669;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.flash-scene {
  perspective: 1400px;
  flex: 0 0 auto;
}
.flash-card-preview {
  width: 520px;
  height: 330px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.2, 0.75, 0.25, 1);
  cursor: pointer;
}
.flash-card-preview.flipped {
  transform: rotateY(180deg);
}
.flash-face {
  position: absolute;
  inset: 0;
  padding: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 2px solid #b77bea;
  border-radius: 24px;
  color: #211735;
  background: linear-gradient(135deg, #fff, #efe5ff);
  box-shadow: 0 24px 55px rgba(61, 35, 83, 0.18);
  font:
    22px/1.45 Arial,
    sans-serif;
  text-align: center;
}
.flash-back {
  transform: rotateY(180deg);
}
.flash-face.with-image {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 24px;
  text-align: left;
}
.flash-face.with-image.image-right {
  grid-template-columns: 1fr 42%;
}
.flash-face.with-image.image-top {
  grid-template-columns: 1fr;
  grid-template-rows: 45% 1fr;
  text-align: center;
}
.flash-face.with-image.image-cover {
  display: flex;
}
.flash-face img.flash-content-image {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  border-radius: 14px;
}
.flash-face.image-right img {
  grid-column: 2;
}
.flash-face.image-right .flash-text {
  grid-column: 1;
  grid-row: 1;
}
.flash-face.image-cover img {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.28;
}
.flash-text {
  position: relative;
  z-index: 2;
  white-space: pre-wrap;
}
.flash-mini-logo {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: 12px;
  width: 95px;
  height: 28px;
  object-fit: contain;
}
.flash-hint {
  margin-top: 18px;
  color: #8b8395;
  font-size: 9px;
}
.flash-navigation {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 13px;
}
.flash-navigation button {
  width: 34px;
  height: 34px;
  border: 1px solid #d8d1e0;
  border-radius: 50%;
  color: #7420d0;
  background: #fff;
  cursor: pointer;
}
.flash-navigation span {
  min-width: 52px;
  text-align: center;
  color: #756d80;
  font-size: 9px;
  font-weight: 750;
}
.flash-deck-list {
  max-height: 170px;
}
.flash-deck-empty {
  min-height: 105px;
  flex: 0;
}
.flash-deck-empty span {
  font-size: 20px;
}
.library-divider {
  height: 1px;
  margin: 17px 0;
  background: var(--line);
}
.card-heading {
  margin-bottom: 12px;
}
.flashcard-list {
  max-height: 330px;
}
.activity-options {
  width: 100%;
  height: 74px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
  outline: 0;
  font-size: 10px;
  line-height: 1.5;
}
.activity-editor .field-label {
  margin-top: 10px;
}
.voice-settings {
  margin: 10px 0;
}
.voice-settings[hidden] {
  display: none;
}
.voice-note {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #81798c;
  background: #faf8fd;
  font-size: 8px;
  line-height: 1.5;
}
.flash-deck-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  overflow: auto;
}
.flash-deck-item {
  position: relative;
  border: 1px solid #e1dce8;
  border-radius: 13px;
  background: #fff;
  transition: 0.2s;
  overflow: hidden;
}
.flash-deck-item:hover {
  transform: translateY(-1px);
  border-color: #c89deb;
  box-shadow: 0 9px 22px #5d327112;
}
.flash-deck-item.active {
  border-color: #9b4be2;
  background: linear-gradient(135deg, #f7efff, #f1fbfc);
  box-shadow: 0 0 0 2px #ead9fa;
}
.deck-open {
  width: 100%;
  min-width: 0;
  padding: 10px 31px 10px 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.deck-glyph {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #7920de, #d13abf);
  font-size: 8px;
  font-weight: 850;
}
.deck-copy {
  min-width: 0;
  flex: 1;
}
.deck-copy strong,
.deck-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deck-copy strong {
  font-size: 9px;
}
.deck-copy small {
  margin-top: 4px;
  color: #958c9f;
  font-size: 7px;
}
.deck-arrow {
  color: #8b3bd5;
  font-size: 17px;
}
.deck-delete {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 7px;
  color: #b75a75;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: 0.2s;
}
.flash-deck-item:hover .deck-delete {
  opacity: 1;
}
.deck-delete:hover {
  background: #fff0f4;
}
.deck-save-dock {
  padding: 10px;
  border: 1px solid #ddd2e8;
  border-radius: 13px;
  background: linear-gradient(135deg, #fff, #f8f3fd);
}
.deck-save-dock > span {
  margin: 0 0 8px 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #81778d;
  font-size: 7px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.deck-save-dock > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #30bd8b;
  box-shadow: 0 0 0 3px #30bd8b20;
}
.deck-save-dock .primary-button {
  width: 100%;
  justify-content: center;
  padding: 9px 11px;
  font-size: 8px;
}
.blank-builder {
  margin-top: 11px;
  padding: 12px;
  border: 1px solid #d8b8f3;
  border-radius: 12px;
  background: linear-gradient(135deg, #fbf6ff, #f3fcfd);
}
.blank-builder[hidden],
#flashMcqFields[hidden],
#correctAnswerField[hidden],
.setup-design-settings[hidden] {
  display: none;
}
.blank-builder > div strong,
.blank-builder > div small {
  display: block;
}
.blank-builder > div strong {
  color: #5e287f;
  font-size: 9px;
}
.blank-builder > div small {
  margin-top: 4px;
  color: #8b8195;
  font-size: 8px;
  line-height: 1.5;
}
.blank-builder button {
  margin-top: 10px;
}
.blank-builder p {
  margin: 9px 0 0;
  padding: 7px 9px;
  border-radius: 8px;
  color: #5e287f;
  background: #fff;
  font-size: 8px;
}
.setup-design-settings {
  margin: 10px 0;
  padding: 14px;
  border: 1px solid #d9c3ed;
  border-radius: 14px;
  background: linear-gradient(145deg, #fbf7ff, #f1fbfc);
}
.setup-design-heading {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.setup-design-heading strong,
.setup-design-heading small {
  display: block;
}
.setup-design-heading strong {
  color: #5b286f;
  font-size: 10px;
}
.setup-design-heading small {
  margin-top: 3px;
  color: #91869b;
  font-size: 8px;
}
.setup-design-heading > span {
  padding: 5px 7px;
  border-radius: 99px;
  color: #087d85;
  background: #dff8fa;
  font-size: 6px;
  font-weight: 850;
  letter-spacing: 0.08em;
}
.setup-colors {
  margin-top: 10px;
}
.runtime-demo {
  min-height: 650px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background-color: #eeecf2;
  background-image: radial-gradient(#d0cad8 1px, transparent 1px);
  background-size: 20px 20px;
}
.runtime-demo iframe {
  display: block;
  width: 100%;
  min-width: 100%;
  flex: 1 0 100%;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 18px 45px #33244216;
}
body.dark .flash-deck-item,
body.dark .deck-save-dock,
body.dark .blank-builder,
body.dark .setup-design-settings {
  border-color: #44364f;
  background: #27212e;
}
body.dark .deck-copy small,
body.dark .blank-builder > div small,
body.dark .setup-design-heading small {
  color: #aea5b6;
}
.tabs-designer {
  margin-bottom: 12px;
}
.tab-count-settings {
  margin-top: 10px;
}
.tab-count-settings[hidden],
#flashActivitySettings[hidden],
.logo-settings[hidden],
.sound-picker[hidden],
.mode-conflict-note[hidden] {
  display: none;
}
.face-editor > div:first-child {
  gap: 7px;
}
.face-tab-nav {
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid #dcc6ee;
  border-radius: 999px;
  background: linear-gradient(135deg, #f9f4ff, #effcfd);
}
.face-tab-nav[hidden] {
  display: none !important;
}
.face-tab-nav button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #7920de, #20bdca);
  box-shadow: 0 5px 12px #6820a92c;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}
.face-tab-nav button:hover {
  transform: scale(1.08);
}
.face-tab-nav b {
  min-width: 34px;
  color: #6f357f;
  font-size: 7px;
  text-align: center;
}
.face-tab-title {
  width: 100%;
  height: 32px;
  padding: 0 11px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: #6f2ca5;
  background: #faf7fd;
  font-size: 8px;
  font-weight: 750;
  outline: 0;
}
.face-tab-title[hidden] {
  display: none;
}
.standard-color {
  width: 100%;
  height: 39px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.logo-settings {
  margin: 9px 0;
}
.sound-picker {
  margin: 10px 0;
  padding: 11px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  border: 1px solid #d9c6ea;
  border-radius: 12px;
  background: #fbf7ff;
}
.sound-picker > div > div {
  display: flex;
  gap: 5px;
}
.sound-picker select {
  min-width: 0;
  flex: 1;
}
.sound-picker button {
  width: 38px;
  flex: 0 0 auto;
  border: 1px solid #cda7eb;
  border-radius: 8px;
  color: #7621cd;
  background: #fff;
  cursor: pointer;
}
.sound-picker button:hover {
  color: #fff;
  background: #7621cd;
}
.mode-conflict-note {
  margin: 8px 0;
  padding: 9px;
  border: 1px solid #ebcfa1;
  border-radius: 9px;
  color: #8b611e;
  background: #fff8e9;
  font-size: 8px;
  line-height: 1.5;
}
.anki-row:has(input:disabled),
.toggle-row:has(input:disabled) {
  opacity: 0.55;
}
.deck-save-dock > span i.dirty {
  background: #e29a36;
  box-shadow: 0 0 0 3px #e29a3620;
}
.activity-editor .toggle-row {
  margin-bottom: 9px;
}
.tab-style-colors {
  margin-top: 12px;
}
body.dark .sound-picker,
body.dark .face-tab-title {
  border-color: #44364f;
  background: #27212e;
  color: #eee;
}
body.dark .mode-conflict-note {
  border-color: #67583b;
  background: #322a1d;
  color: #e7c17e;
}
.button-source-card {
  margin: 12px 0 16px;
  padding: 13px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 10px;
  border: 1px solid #dccce9;
  border-radius: 14px;
  background: linear-gradient(135deg, #fcf9ff, #f2fbfc);
}
.button-source-card > span {
  padding-bottom: 12px;
  color: #9a8ba5;
  font-size: 7px;
  font-weight: 850;
}
.button-source-card > small {
  grid-column: 1/-1;
  color: #92889c;
  font-size: 7px;
  line-height: 1.5;
}
.button-source-card input:disabled,
.button-source-card select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.image-trigger-workspace {
  grid-template-columns: minmax(520px, 0.88fr) minmax(620px, 1.12fr);
}
.trigger-settings {
  padding: 26px;
  border-right: 1px solid var(--line);
}
.trigger-scroll {
  margin-top: 18px;
}
.trigger-source-card {
  margin-top: 12px;
}
.trigger-source-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 12px;
  align-items: center;
}
.modern-upload {
  min-height: 92px;
  padding: 12px;
  display: grid;
  place-items: center;
  border: 1px dashed #bd93df;
  border-radius: 13px;
  color: #7420ce;
  background: linear-gradient(135deg, #faf4ff, #effcfd);
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}
.modern-upload:hover {
  transform: translateY(-2px);
  border-color: #7420ce;
  box-shadow: 0 12px 24px #64249918;
}
.modern-upload > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #7920de, #1abac7);
  font-size: 16px;
}
.modern-upload strong {
  margin-top: 6px;
  font-size: 9px;
}
.modern-upload small {
  color: #92889d;
  font-size: 7px;
}
.trigger-source-grid .text-button {
  margin-top: 7px;
}
.trigger-demo-stage {
  min-height: 650px;
  padding: 18px;
  display: grid;
  place-items: center;
  overflow: auto;
  border: 1px solid #ddd8e4;
  border-radius: 16px;
  background-color: #eeecf2;
  background-image: radial-gradient(#d0cad8 1px, transparent 1px);
  background-size: 20px 20px;
}
.trigger-demo-stage iframe {
  width: 100%;
  min-height: 520px;
  border: 0;
  background: transparent;
}
.trigger-preview-panel {
  padding: 26px;
  background: linear-gradient(155deg, #fbfafd, #f5f3f8);
}
body.dark .button-source-card,
body.dark .modern-upload {
  border-color: #4a3a56;
  background: #27212e;
}
body.dark .trigger-preview-panel {
  background: #211d29;
}
@media (max-width: 1280px) {
  .image-trigger-workspace {
    grid-template-columns: 1fr;
  }
  .trigger-preview-panel {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 820px) {
  .trigger-source-grid,
  .button-source-card {
    grid-template-columns: 1fr;
  }
  .button-source-card > span {
    padding: 0;
    text-align: center;
  }
}
.button-demo-align > button:hover {
  transform: scale(var(--hover-scale, 1.08)) translateY(-2px);
  filter: brightness(1.08);
}
.button-demo-align > button:active {
  transform: scale(0.98);
}
#designedButtonIcon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  transform: translateY(-1px);
  padding: 0;
}
#designedButtonIcon img {
  display: block;
}
.button-demo-align > button.shine-preview:after {
  content: "";
  position: absolute;
  inset: -20% auto -20% -35%;
  width: 32%;
  background: rgba(255, 255, 255, 0.36);
  transform: translateX(-170%) rotate(20deg);
  transition: transform 0.45s ease;
  will-change: transform;
  pointer-events: none;
}
.button-demo-align > button.shine-preview:hover:after {
  transform: translateX(520%) rotate(20deg);
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 25px;
  transform: translate(-50%, 20px);
  opacity: 0;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 9px;
  color: #fff;
  background: #21182f;
  box-shadow: 0 12px 30px rgba(20, 10, 30, 0.25);
  font-size: 11px;
  pointer-events: none;
  transition: 0.25s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
body.dark {
  --ink: #f4f1f8;
  --muted: #a9a3b4;
  --line: #393443;
  --panel: rgba(28, 25, 35, 0.95);
  --soft: #201d27;
  background: #16131d;
}
body.dark .topbar,
body.dark .tabs,
body.dark .library-panel,
body.dark .preview-panel,
body.dark .map-preview-panel {
  background: rgba(27, 24, 34, 0.92);
}
body.dark .brand img {
  filter: brightness(0) invert(1) drop-shadow(0 9px 20px rgba(0, 0, 0, 0.2));
}
body.dark .icon-button,
body.dark .small-icon,
body.dark .tab.active,
body.dark .secondary-button,
body.dark input,
body.dark select,
body.dark .controls-card,
body.dark .control-icon,
body.dark .number-input {
  background: #24202c;
  color: var(--ink);
}
body.dark .color-palette-card,
body.dark .bg-tools-card,
body.dark .designer-card,
body.dark .mode-button,
body.dark .icon-option,
body.dark .color-control-grid label,
body.dark .tool-preview {
  background: #211d29;
  color: var(--ink);
}
body.dark .flashcard-list-panel,
body.dark .flashcard-preview-panel,
body.dark .face-editor {
  background: #211d29;
  color: var(--ink);
}
body.dark .title-input {
  background: transparent;
}
@media (max-width: 1280px) {
  .workspace {
    grid-template-columns: 210px minmax(430px, 1fr);
  }
  .preview-panel {
    grid-column: 1/-1;
    border-top: 1px solid var(--line);
  }
  .library-panel {
    grid-row: span 1;
  }
  .mindmap-workspace {
    grid-template-columns: 1fr;
  }
  .map-preview-panel {
    grid-column: auto;
  }
  .map-demo-stage {
    min-height: 540px;
  }
  .map-component {
    height: 480px;
  }
}
@media (max-width: 1280px) {
  .tool-workspace,
  .button-workspace {
    grid-template-columns: 1fr;
  }
  .tool-settings {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .image-comparison,
  .button-demo-stage {
    min-height: 500px;
  }
}
@media (max-width: 820px) {
  .topbar {
    padding: 0 16px;
  }
  .brand img {
    width: 125px;
  }
  .brand-divider,
  .product-name,
  .save-state {
    display: none;
  }
  .app-shell {
    padding: 14px 10px 24px;
  }
  .workspace.active {
    display: block;
  }
  .library-panel,
  .editor-panel,
  .mindmap-settings {
    border: 0;
    border-bottom: 1px solid var(--line);
  }
  .library-panel {
    min-height: 360px;
  }
  .dimension-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }
  .preview-stage,
  .map-demo-stage {
    padding: 18px;
  }
  .map-component {
    height: 430px;
  }
  .flow-note {
    flex-wrap: wrap;
  }
  .tab {
    padding: 10px 12px;
    font-size: 11px;
  }
}
@media (max-width: 820px) {
  .tool-settings,
  .tool-preview {
    padding: 18px;
  }
  .image-comparison {
    grid-template-columns: 1fr;
    min-height: 800px;
  }
  .compact-grid,
  .form-grid.three {
    grid-template-columns: 1fr;
  }
  .icon-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .color-control-grid {
    grid-template-columns: 1fr 1fr;
  }
  .button-demo-stage {
    min-height: 430px;
  }
}
@media (max-width: 1280px) {
  .button-workspace {
    grid-template-columns: 210px minmax(480px, 1fr);
  }
  .button-preview-panel {
    grid-column: 1/-1;
  }
}
@media (max-width: 820px) {
  .button-workspace {
    display: block !important;
  }
  .button-library {
    min-height: 250px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 1400px) {
  .flashcard-workspace {
    grid-template-columns: 200px minmax(500px, 1fr);
  }
  .flashcard-preview-panel {
    grid-column: 1/-1;
  }
}
@media (max-width: 820px) {
  .flashcard-workspace {
    display: block !important;
  }
  .flashcard-list-panel {
    min-height: 260px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .flashcard-settings,
  .flashcard-preview-panel {
    padding: 18px;
  }
  .face-editor-grid {
    grid-template-columns: 1fr;
  }
  .flashcard-demo-stage {
    min-height: 500px;
  }
  .flash-card-preview {
    max-width: 100%;
  }
}

/* Aybüke update: trigger library + sticky flashcard demo */
.trigger-project-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trigger-project-row .project-name-input {
  flex: 1;
}
.trigger-save-dock {
  margin: 10px 0 12px;
}
.trigger-save-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.trigger-save-actions .secondary-button {
  min-height: 36px;
}
.trigger-deck-list {
  max-height: 150px;
  margin-bottom: 10px;
}
.trigger-empty {
  min-height: 92px;
  margin-bottom: 12px;
}
.flashcard-workspace {
  overflow: visible;
  align-items: start;
}
.flashcard-preview-panel {
  position: sticky;
  top: 18px;
  align-self: start;
  max-height: calc(100vh - 36px);
  overflow: auto;
  border-left: 1px solid var(--line);
}
.trigger-save-dock > span i.dirty {
  background: #e29a36;
  box-shadow: 0 0 0 3px #e29a3620;
}
@media (max-width: 1400px) {
  .flashcard-preview-panel {
    position: relative;
    top: auto;
    max-height: none;
    border-left: 0;
  }
}

/* Aybüke update: darker-mode sliders are more visible */
body.dark input[type="range"] {
  accent-color: #28d7e6;
}
body.dark input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #28d7e6, #9b4dff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.dark input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #28d7e6;
  box-shadow:
    0 0 0 4px rgba(40, 215, 230, 0.22),
    0 6px 16px rgba(0, 0, 0, 0.38);
}
body.dark input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #28d7e6, #9b4dff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.dark input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #28d7e6;
  box-shadow:
    0 0 0 4px rgba(40, 215, 230, 0.22),
    0 6px 16px rgba(0, 0, 0, 0.38);
}
body.dark .range-setting output {
  color: #31e5f2;
}


/* Drag/drop states */
.tab-settings-stack { display: grid; gap: 14px; margin-top: 12px; }
.tab-style-settings { padding-top: 12px; border-top: 1px dashed var(--line); }
.button-image-source-card {
  margin: 14px 0;
  padding: 14px;
  border: 1px dashed #d8cbe8;
  border-radius: 14px;
  background: rgba(255,255,255,.68);
}
.full-drop-upload { min-height: 96px; cursor: pointer; }
.modern-upload.drag-over, .button-image-source-card.drag-over, .button-image-source-card.has-file {
  border-color: var(--purple)!important;
  background: #f5ecff!important;
  box-shadow: 0 0 0 4px rgba(132,41,236,.10);
}
body.dark .tab-style-settings { border-top-color:#3a3345; }
body.dark .button-image-source-card { background:#181420; border-color:#3d354c; }
body.dark .modern-upload.drag-over, body.dark .button-image-source-card.drag-over, body.dark .button-image-source-card.has-file {
  background:#2a1d3f!important;
  border-color:#9b4dff!important;
}


/* Final layout fixes: keep Flashcard demo in right sticky column and readable selects */
.flashcard-workspace.active {
  display: grid !important;
  grid-template-columns: 220px minmax(470px, 0.95fr) minmax(500px, 1.05fr) !important;
  align-items: start !important;
  overflow: visible !important;
}
.flashcard-settings,
.flashcard-scroll,
.flash-design-card {
  overflow: visible !important;
}
.flashcard-preview-panel {
  grid-column: auto !important;
  position: sticky !important;
  top: 18px !important;
  align-self: start !important;
  max-height: calc(100vh - 36px) !important;
  overflow: auto !important;
  border-left: 1px solid var(--line) !important;
}
.flash-design-card select.standard-input {
  min-width: 100%;
  min-height: 42px;
  white-space: normal;
}
.flash-design-card .form-grid.three {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  overflow: visible;
}
@media (max-width: 1220px) {
  .flashcard-workspace.active { display: block !important; }
  .flashcard-preview-panel { position: relative !important; top: auto !important; max-height: none !important; border-left: 0 !important; }
}

/* Manual number input for range-based pixel controls */
.range-setting input[type="range"] {
  min-width: 0;
}
.range-number-box {
  width: 78px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.range-number-box input {
  width: 52px !important;
  min-width: 0 !important;
  height: 100%;
  padding: 0 0 0 8px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}
.range-number-box span {
  flex: 1;
  color: #948c9e;
  font-size: 8px;
  font-weight: 700;
}
body.dark .range-number-box {
  border-color: #3a3248;
  background: #221d31;
}
body.dark .range-number-box input {
  color: #fff;
}
body.dark .range-number-box span {
  color: #bdb6cb;
}


/* Final correction: keep Flashcard and Fullscreen Button demos in the right sticky column on desktop/tablet widths */
.flashcard-workspace.active {
  display: grid !important;
  grid-template-columns: 220px minmax(430px, 0.92fr) minmax(480px, 1.08fr) !important;
  align-items: start !important;
  overflow: visible !important;
}
.flashcard-preview-panel {
  grid-column: 3 !important;
  position: sticky !important;
  top: 18px !important;
  align-self: start !important;
  max-height: calc(100vh - 36px) !important;
  overflow: auto !important;
  border-left: 1px solid var(--line) !important;
}
.flashcard-settings { grid-column: 2 !important; min-width: 0 !important; }
.flashcard-list-panel { grid-column: 1 !important; min-width: 0 !important; }

.button-workspace.active {
  display: grid !important;
  grid-template-columns: 220px minmax(430px, 0.92fr) minmax(480px, 1.08fr) !important;
  align-items: start !important;
  overflow: visible !important;
}
.button-settings { grid-column: 2 !important; min-width: 0 !important; }
.button-library { grid-column: 1 !important; min-width: 0 !important; }
.button-preview-panel {
  grid-column: 3 !important;
  position: sticky !important;
  top: 18px !important;
  align-self: start !important;
  max-height: calc(100vh - 36px) !important;
  overflow: auto !important;
  border-left: 1px solid var(--line) !important;
}

/* Prevent Flashcard select dropdown controls from overflowing to the right */
.flash-design-card .form-grid,
.flash-design-card .form-grid.three {
  min-width: 0 !important;
  overflow: visible !important;
}
.flash-design-card .form-grid.three {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
}
.flash-design-card .form-grid > div,
.flash-design-card .form-grid.three > div {
  min-width: 0 !important;
}
.flash-design-card select.standard-input,
.flash-design-card input.standard-input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Fullscreen button gallery: fit 1-4 images safely into the available screen */
.button-target-gallery {
  --gallery-gap: clamp(14px, 2.2vw, 32px);
  --gallery-pad: clamp(20px, 4vw, 54px);
  padding: var(--gallery-pad) !important;
  gap: var(--gallery-gap) !important;
  align-content: center !important;
  justify-content: center !important;
  grid-auto-flow: row !important;
}
.button-target-gallery.gallery-count-1 {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
.button-target-gallery.gallery-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
.button-target-gallery.gallery-count-3,
.button-target-gallery.gallery-count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}
.button-target-gallery.gallery-count-3 img:nth-child(3) {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  max-width: min(46vw, 48%) !important;
}
.button-target-gallery img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
.button-target-gallery.gallery-count-1 img { max-height: calc(100vh - 2 * var(--gallery-pad)) !important; }
.button-target-gallery.gallery-count-2 img { max-height: calc(100vh - 2 * var(--gallery-pad)) !important; }
.button-target-gallery.gallery-count-3 img,
.button-target-gallery.gallery-count-4 img { max-height: calc((100vh - 2 * var(--gallery-pad) - var(--gallery-gap)) / 2) !important; }

@media (max-width: 980px) {
  .flashcard-workspace.active,
  .button-workspace.active { display: block !important; }
  .flashcard-list-panel,
  .flashcard-settings,
  .flashcard-preview-panel,
  .button-library,
  .button-settings,
  .button-preview-panel { grid-column: auto !important; }
  .flashcard-preview-panel,
  .button-preview-panel { position: relative !important; top: auto !important; max-height: none !important; border-left: 0 !important; }
}


/* Aybüke final layout correction: Flashcard and Image Trigger previews stay in the right sticky column */
@media (min-width: 900px) {
  .flashcard-workspace.active {
    display: grid !important;
    grid-template-columns: minmax(180px, 220px) minmax(340px, 1fr) minmax(380px, 44%) !important;
    grid-template-areas: "flashList flashSettings flashPreview" !important;
    align-items: start !important;
    overflow: visible !important;
  }
  .flashcard-list-panel {
    grid-area: flashList !important;
    grid-column: auto !important;
    min-width: 0 !important;
  }
  .flashcard-settings {
    grid-area: flashSettings !important;
    grid-column: auto !important;
    min-width: 0 !important;
    align-self: start !important;
  }
  .flashcard-preview-panel {
    grid-area: flashPreview !important;
    grid-column: auto !important;
    position: sticky !important;
    top: 18px !important;
    align-self: start !important;
    max-height: calc(100vh - 36px) !important;
    overflow: auto !important;
    border-left: 1px solid var(--line) !important;
    border-top: 0 !important;
    display: block !important;
  }
  .image-trigger-workspace.active {
    display: grid !important;
    grid-template-columns: minmax(430px, 0.9fr) minmax(430px, 1.1fr) !important;
    grid-template-areas: "triggerSettings triggerPreview" !important;
    align-items: start !important;
    overflow: visible !important;
  }
  .trigger-settings {
    grid-area: triggerSettings !important;
    min-width: 0 !important;
  }
  .trigger-preview-panel {
    grid-area: triggerPreview !important;
    position: sticky !important;
    top: 18px !important;
    align-self: start !important;
    max-height: calc(100vh - 36px) !important;
    overflow: auto !important;
    border-left: 1px solid var(--line) !important;
    border-top: 0 !important;
    display: block !important;
  }
}
@media (max-width: 899px) {
  .flashcard-workspace.active,
  .image-trigger-workspace.active {
    display: block !important;
  }
  .flashcard-list-panel,
  .flashcard-settings,
  .flashcard-preview-panel,
  .trigger-settings,
  .trigger-preview-panel {
    grid-area: auto !important;
    grid-column: auto !important;
  }
  .flashcard-preview-panel,
  .trigger-preview-panel {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }
}

/* Flashcard navigation controls: no right overflow, readable dropdowns */
.flash-nav-control-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.flash-nav-control-grid > div {
  min-width: 0 !important;
  max-width: 100% !important;
}
.flash-nav-control-grid .standard-input,
.flash-nav-control-grid select.standard-input,
.flash-nav-control-grid input.standard-input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 1120px) {
  .flash-nav-control-grid {
    grid-template-columns: 1fr !important;
  }
}

/* HARD FIX 2026-06-24: Flashcard preview must stay as the third/right column */
#flashcardsPanel.workspace.flashcard-workspace.active {
  display: grid !important;
  grid-template-columns: minmax(170px, 210px) minmax(300px, 0.95fr) minmax(360px, 1.05fr) !important;
  grid-template-areas: "fcList fcSettings fcPreview" !important;
  align-items: start !important;
  overflow: visible !important;
}
#flashcardsPanel > .flashcard-list-panel {
  grid-area: fcList !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}
#flashcardsPanel > .flashcard-settings {
  grid-area: fcSettings !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
#flashcardsPanel > .flashcard-preview-panel {
  grid-area: fcPreview !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  position: sticky !important;
  top: 18px !important;
  align-self: start !important;
  max-height: calc(100vh - 36px) !important;
  overflow: auto !important;
  border-left: 1px solid var(--line) !important;
  border-top: 0 !important;
  display: block !important;
  z-index: 2 !important;
}
@media (max-width: 760px) {
  #flashcardsPanel.workspace.flashcard-workspace.active {
    display: block !important;
  }
  #flashcardsPanel > .flashcard-list-panel,
  #flashcardsPanel > .flashcard-settings,
  #flashcardsPanel > .flashcard-preview-panel {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  #flashcardsPanel > .flashcard-preview-panel {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }
}

/* Keep only compact px manual boxes; hide/remove old long number fields if cached code creates them. */
.range-number-input { display: none !important; }


/* Flashcard slider cleanup: one compact px manual input only */
#flashcardsPanel .range-setting {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 8px 10px !important;
}
#flashcardsPanel .range-setting > div {
  grid-column: 1 / -1 !important;
}
#flashcardsPanel .range-setting > input[type="range"] {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}
#flashcardsPanel .range-setting > .range-number-box {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  width: 74px !important;
  height: 30px !important;
  flex: 0 0 auto !important;
}
#flashcardsPanel .range-setting > .range-number-box input {
  width: 49px !important;
}

/* Compact navigation color controls */
#flashcardsPanel .flash-nav-colors {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 14px !important;
}
#flashcardsPanel .flash-nav-colors label {
  min-height: 42px !important;
  padding: 7px 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
}
#flashcardsPanel .flash-nav-colors input[type="color"] {
  width: 36px !important;
  height: 26px !important;
  margin: 0 !important;
  flex: 0 0 36px !important;
}
#flashcardsPanel .flash-nav-control-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}
#flashcardsPanel .flash-nav-control-grid > div {
  min-width: 0 !important;
}
#flashcardsPanel .flash-nav-control-grid .standard-input,
#flashcardsPanel .flash-nav-control-grid select.standard-input,
#flashcardsPanel .flash-nav-control-grid input.standard-input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 980px) {
  #flashcardsPanel .flash-nav-colors,
  #flashcardsPanel .flash-nav-control-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Aybüke final tweak: make Flashcard navigation detail controls wider, compact and readable */
#flashcardsPanel .flash-nav-control-grid {
  display: grid !important;
  grid-template-columns: minmax(118px, 0.75fr) minmax(170px, 1.12fr) minmax(170px, 1.12fr) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 10px !important;
  align-items: stretch !important;
}
#flashcardsPanel .flash-nav-control-grid > div {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.68) !important;
}
#flashcardsPanel .flash-nav-control-grid .field-label {
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  color: #645b70 !important;
}
#flashcardsPanel .flash-nav-control-grid .standard-input,
#flashcardsPanel .flash-nav-control-grid select.standard-input,
#flashcardsPanel .flash-nav-control-grid input.standard-input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#flashcardsPanel .flash-nav-control-grid input[type="number"].standard-input {
  text-align: center !important;
  font-weight: 800 !important;
}
body.dark #flashcardsPanel .flash-nav-control-grid > div {
  border-color: #3a3248 !important;
  background: rgba(34,29,49,.78) !important;
}
body.dark #flashcardsPanel .flash-nav-control-grid .field-label {
  color: #d0c8dc !important;
}
@media (max-width: 1180px) {
  #flashcardsPanel .flash-nav-control-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 760px) {
  #flashcardsPanel .flash-nav-control-grid > div {
    grid-template-columns: 1fr !important;
    row-gap: 6px !important;
  }
}

/* FINAL FIX 2026-06-24: Flashcard navigation detail controls must be vertical: title above input/select */
#flashcardsPanel .flash-nav-control-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 12px !important;
  align-items: stretch !important;
}
#flashcardsPanel .flash-nav-control-grid > div {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 72px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.72) !important;
}
#flashcardsPanel .flash-nav-control-grid .field-label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  white-space: normal !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: #645b70 !important;
}
#flashcardsPanel .flash-nav-control-grid .standard-input,
#flashcardsPanel .flash-nav-control-grid select.standard-input,
#flashcardsPanel .flash-nav-control-grid input.standard-input {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#flashcardsPanel .flash-nav-control-grid input[type="number"].standard-input {
  text-align: left !important;
  font-weight: 800 !important;
}
body.dark #flashcardsPanel .flash-nav-control-grid > div {
  border-color: #3a3248 !important;
  background: rgba(34,29,49,.78) !important;
}
body.dark #flashcardsPanel .flash-nav-control-grid .field-label {
  color: #d0c8dc !important;
}
@media (max-width: 1180px) {
  #flashcardsPanel .flash-nav-control-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Face tabs: keep design settings hidden until Yüz sekmeleri is enabled */
.tab-settings-stack[hidden] { display: none !important; }


/* Image Trigger auto-shrink area */
#imagetriggerPanel .trigger-auto-note,
#imagetriggerPanel .trigger-auto-size-card {
  min-height: 70px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: #5f566d;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
#imagetriggerPanel .trigger-auto-note strong,
#imagetriggerPanel .trigger-auto-size-card strong {
  font-size: 12px;
  color: var(--ink);
}
#imagetriggerPanel .trigger-auto-note small,
#imagetriggerPanel .trigger-auto-size-card small {
  font-size: 10px;
  line-height: 1.45;
  color: #81798b;
}
#imagetriggerPanel .trigger-auto-size-card span {
  width: max-content;
  margin-top: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f0e6ff;
  color: #6f1ccc;
  font-size: 10px;
  font-weight: 800;
}
#imagetriggerPanel .trigger-shadow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}
#imagetriggerPanel .color-input-full {
  width: 100%;
  min-height: 42px;
  padding: 4px;
}
body.dark #imagetriggerPanel .trigger-auto-note,
body.dark #imagetriggerPanel .trigger-auto-size-card {
  background: #211c2d;
  border-color: #3b3347;
  color: #efeafb;
}
body.dark #imagetriggerPanel .trigger-auto-note strong,
body.dark #imagetriggerPanel .trigger-auto-size-card strong {
  color: #fff;
}
body.dark #imagetriggerPanel .trigger-auto-note small,
body.dark #imagetriggerPanel .trigger-auto-size-card small {
  color: #c5bed2;
}


/* Fullscreen button source locking and effect overflow allowance */
.button-image-source-card.source-disabled,
.button-image-source-card.source-disabled .modern-upload {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.15);
}
.button-image-source-card.source-disabled .modern-upload {
  pointer-events: none;
}
.button-demo-align { overflow: visible !important; }
.button-demo-stage { overflow: hidden; }
.button-demo-align > button { flex: 0 0 auto; }
body.dark .button-image-source-card.source-disabled { background:#17131f!important; border-color:#342d42!important; }


/* Fullscreen button visual-image launcher */
.button-visual-source-card .modern-upload span { font-size: 26px; }
#iconGrid.visual-disabled,
.custom-icon-row.visual-disabled,
.control-disabled {
  opacity: .45;
  filter: grayscale(.18);
}
#iconGrid.visual-disabled,
.custom-icon-row.visual-disabled {
  pointer-events: none;
}
.button-demo-align > button.image-button-preview {
  border-color: transparent !important;
  background: transparent !important;
  overflow: hidden;
}
.button-demo-align > button .button-visual-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
body.dark #iconGrid.visual-disabled,
body.dark .custom-icon-row.visual-disabled,
body.dark .control-disabled { opacity: .5; }

/* Fullscreen image button refinements */
.button-demo-align > button.image-button-preview {
  overflow: hidden !important;
  background: transparent !important;
  border-color: transparent !important;
}
.button-demo-align > button.image-button-preview #designedButtonIcon,
.button-demo-align > button.image-button-preview #designedButtonLabel {
  display: none !important;
}
.button-demo-align > button.image-button-preview .button-visual-preview-img {
  border-radius: inherit;
}


.image-behavior-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}.image-behavior-card{padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(118,34,204,.04)}.image-behavior-card h4{margin:0 0 12px;font-size:12px;letter-spacing:.04em;color:var(--text)}.compact-toggle-row{padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}.compact-toggle-row>div:first-child{gap:10px}.compact-percent-range{margin-top:12px}.compact-percent-range output{min-width:60px}body.dark .image-behavior-card{background:rgba(255,255,255,.03);border-color:#3b3446}body.dark .compact-toggle-row{background:#1f1a2a;border-color:#3b3446}@media(max-width:1100px){.image-behavior-grid{grid-template-columns:1fr}}

.image-behavior-block{margin-top:14px}

/* Loaded workspace delete action */
.danger-button{border-color:rgba(214,75,103,.32)!important;color:#b82949!important;background:rgba(214,75,103,.07)!important}.danger-button svg{stroke:#b82949!important}.danger-button:hover{border-color:rgba(214,75,103,.58)!important;background:rgba(214,75,103,.12)!important}body.dark .danger-button{color:#ff9caf!important;background:rgba(214,75,103,.13)!important}body.dark .danger-button svg{stroke:#ff9caf!important}


/* FINAL FIX: Flashcard compact navigation controls and mode/cover-fit UI */
#flashcardsPanel .flash-card-mode-card .form-grid{grid-template-columns:minmax(180px,260px) minmax(0,1fr);align-items:end}
#flashcardsPanel .mode-helper-note{padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:rgba(118,34,204,.05);font-size:12px;line-height:1.45;color:var(--muted)}
#flashcardsPanel .mode-helper-note strong{color:var(--text)}
#flashcardsPanel .flash-nav-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr))!important;gap:10px;width:100%;min-width:0}
#flashcardsPanel .flash-nav-control-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:12px!important;width:100%!important;min-width:0!important;overflow:visible!important}
#flashcardsPanel .flash-nav-control-grid>div{min-width:0!important;width:100%;display:flex!important;flex-direction:column!important;gap:7px!important}
#flashcardsPanel .flash-nav-control-grid .standard-input{width:100%!important;min-width:0!important}
#flashcardsPanel .designer-card:has(#flashCardOnlyMode) .toggle-row{min-width:0;width:100%;overflow:hidden}
#flashcardsPanel .cover-fit-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:11px}
#flashcardsPanel .mini-fit-button{padding:9px 12px;border-radius:12px;font-size:12px;min-height:auto}
#flashcardsPanel .cover-fit-toggle{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--muted)}
#flashcardsPanel .cover-fit-toggle input{accent-color:#7622cc}
#flashcardsPanel .single-mode-hidden{display:none!important}
@media(max-width:1000px){#flashcardsPanel .flash-card-mode-card .form-grid{grid-template-columns:1fr}}

/* FINAL FIX: Flashcard typography, single-face per-card controls and navigation option stack */
#flashcardsPanel .single-design-settings{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(118,34,204,.045)}
#flashcardsPanel .single-design-settings[hidden],#flashcardsPanel .per-card-panel[hidden]{display:none!important}
#flashcardsPanel .compact-note{min-height:auto;padding:10px 12px;font-size:11px}
#flashcardsPanel .per-card-panel{margin-top:12px;padding:12px;border:1px solid rgba(118,34,204,.18);border-radius:16px;background:#fff}
#flashcardsPanel .compact-card-colors{grid-template-columns:repeat(4,minmax(82px,1fr));gap:8px;margin:8px 0 10px}
#flashcardsPanel .mini-help{margin:7px 0 10px;color:var(--muted);font-size:11px;line-height:1.45}
#flashcardsPanel .compact-action-row{display:flex;gap:8px;flex-wrap:wrap}
#flashcardsPanel .flash-typography-spacing-grid{margin-top:12px}
#flashcardsPanel .designer-card:has(#flashCardOnlyMode) > .toggle-row{width:100%;max-width:100%;margin:10px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;overflow:visible}
#flashcardsPanel .designer-card:has(#flashCardOnlyMode) > .toggle-row > div:first-child{min-width:0;display:flex;align-items:center;gap:10px}
#flashcardsPanel .designer-card:has(#flashCardOnlyMode) > .toggle-row strong{white-space:normal;line-height:1.25}
#flashcardsPanel .designer-card:has(#flashCardOnlyMode) > .toggle-row small{white-space:normal;line-height:1.35}
body.dark #flashcardsPanel .single-design-settings{background:rgba(255,255,255,.035);border-color:#3b3446}
body.dark #flashcardsPanel .per-card-panel{background:#1f1a2a;border-color:#3b3446}
@media(max-width:900px){#flashcardsPanel .compact-card-colors{grid-template-columns:repeat(2,minmax(100px,1fr))}}


.flash-preview-mode-toggle{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 10px 22px rgba(33,23,53,.08)}.flash-preview-mode-toggle button{min-width:72px;padding:7px 12px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:11px;font-weight:850;letter-spacing:.02em;cursor:pointer;transition:.18s ease}.flash-preview-mode-toggle button.active{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 8px 18px rgba(118,34,204,.22)}body.dark .flash-preview-mode-toggle{background:rgba(31,26,42,.78);border-color:#3b3446}.preview-title .flash-preview-mode-toggle{margin-left:auto}@media(max-width:760px){.preview-title{gap:10px}.flash-preview-mode-toggle{width:100%;justify-content:stretch}.flash-preview-mode-toggle button{flex:1}}


/* FINAL UI FIX 2026-06-24: clearer Flashcard preview mode toggle in light mode + stacked navigation option toggles */
#flashcardsPanel .flash-preview-mode-toggle{
  gap:6px !important;
  padding:5px !important;
  border:1px solid rgba(118,34,204,.22) !important;
  background:#f3edf9 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 10px 22px rgba(33,23,53,.08) !important;
}
#flashcardsPanel .flash-preview-mode-toggle button{
  min-width:78px !important;
  border:1px solid transparent !important;
  background:#ffffff !important;
  color:#6c6178 !important;
  box-shadow:inset 0 0 0 1px rgba(118,34,204,.08) !important;
}
#flashcardsPanel .flash-preview-mode-toggle button.active{
  color:#fff !important;
  border-color:rgba(118,34,204,.45) !important;
  background:linear-gradient(135deg,#7420d0,#9b5de5) !important;
  box-shadow:0 9px 18px rgba(118,34,204,.28),inset 0 0 0 1px rgba(255,255,255,.22) !important;
}
#flashcardsPanel .flash-preview-mode-toggle button.active::before{
  content:'✓';
  margin-right:5px;
  font-weight:900;
}
body.dark #flashcardsPanel .flash-preview-mode-toggle{
  background:rgba(31,26,42,.82) !important;
  border-color:#3b3446 !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18) !important;
}
body.dark #flashcardsPanel .flash-preview-mode-toggle button{
  background:rgba(255,255,255,.06) !important;
  color:#c9c0d6 !important;
  box-shadow:none !important;
}
body.dark #flashcardsPanel .flash-preview-mode-toggle button.active{
  color:#fff !important;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;
  box-shadow:0 8px 18px rgba(118,34,204,.28) !important;
}
#flashcardsPanel .designer-card:has(#flashCardOnlyMode) > .flash-nav-option-toggle{
  width:100% !important;
  max-width:100% !important;
  min-height:66px !important;
  margin:10px 0 !important;
  padding:14px 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  clear:both !important;
  grid-column:1 / -1 !important;
  border:1px solid rgba(118,34,204,.14) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.78) !important;
  overflow:visible !important;
}
#flashcardsPanel .designer-card:has(#flashCardOnlyMode) > .flash-nav-option-toggle + .flash-nav-option-toggle{
  margin-top:8px !important;
}
#flashcardsPanel .designer-card:has(#flashCardOnlyMode) > .flash-nav-option-toggle > div:first-child{
  min-width:0 !important;
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
#flashcardsPanel .designer-card:has(#flashCardOnlyMode) > .flash-nav-option-toggle .control-icon{
  flex:0 0 34px !important;
  width:34px !important;
  height:34px !important;
}
#flashcardsPanel .designer-card:has(#flashCardOnlyMode) > .flash-nav-option-toggle strong{
  display:block !important;
  white-space:normal !important;
  line-height:1.25 !important;
  font-size:12px !important;
}
#flashcardsPanel .designer-card:has(#flashCardOnlyMode) > .flash-nav-option-toggle small{
  display:block !important;
  margin-top:3px !important;
  white-space:normal !important;
  line-height:1.35 !important;
  font-size:10px !important;
}
#flashcardsPanel .designer-card:has(#flashCardOnlyMode) > .flash-nav-option-toggle .switch{
  flex:0 0 auto !important;
}
body.dark #flashcardsPanel .designer-card:has(#flashCardOnlyMode) > .flash-nav-option-toggle{
  background:rgba(34,29,49,.78) !important;
  border-color:#3a3248 !important;
}


/* DEFINITIVE FIX 2026-06-25: Flashcard Navigation extra toggles stacked and wide */
#flashcardsPanel .flash-nav-toggle-stack{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
  margin:12px 0 14px !important;
  clear:both !important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:72px !important;
  margin:0 !important;
  padding:14px 16px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:16px !important;
  border:1px solid rgba(118,34,204,.18) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.84) !important;
  box-shadow:0 10px 24px rgba(33,23,53,.06) !important;
  overflow:visible !important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle > div:first-child{
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle .control-icon{
  flex:0 0 36px !important;
  width:36px !important;
  height:36px !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle strong{
  display:block !important;
  white-space:normal !important;
  line-height:1.25 !important;
  font-size:12.5px !important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle small{
  display:block !important;
  margin-top:4px !important;
  white-space:normal !important;
  line-height:1.35 !important;
  font-size:10.5px !important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle .switch{
  flex:0 0 auto !important;
  justify-self:end !important;
}
body.dark #flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle{
  background:rgba(34,29,49,.84) !important;
  border-color:#3a3248 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.14) !important;
}
@media(max-width:640px){
  #flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle{
    grid-template-columns:1fr !important;
  }
  #flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle .switch{
    justify-self:start !important;
  }
}


/* FINAL STRICT FIX 2026-06-25: Flashcard Navigation controls unchanged; extra toggles compact and switch-only clickable */
#flashcardsPanel .flash-nav-control-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(140px,1fr))!important;
  gap:12px!important;
  width:100%!important;
  margin:12px 0 0!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}
#flashcardsPanel .flash-nav-control-grid>div{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:7px!important;
}
#flashcardsPanel .flash-nav-control-grid .field-label{
  text-align:left!important;
  justify-content:flex-start!important;
  width:100%!important;
}
#flashcardsPanel .flash-nav-control-grid .standard-input{
  width:100%!important;
  min-width:0!important;
}
#flashcardsPanel .flash-nav-toggle-stack{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  margin:14px 0 0!important;
  clear:both!important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:auto!important;
  margin:0!important;
  padding:11px 13px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px!important;
  align-items:center!important;
  gap:12px!important;
  border:1px solid rgba(118,34,204,.15)!important;
  border-radius:13px!important;
  background:rgba(118,34,204,.045)!important;
  box-shadow:none!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-toggle-copy{
  min-width:0!important;
  width:100%!important;
  display:block!important;
  pointer-events:none!important;
}
#flashcardsPanel .flash-nav-toggle-stack .control-icon{
  display:none!important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle strong{
  display:block!important;
  margin:0!important;
  color:var(--text)!important;
  font-size:12px!important;
  line-height:1.25!important;
  white-space:normal!important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle small{
  display:block!important;
  margin:2px 0 0!important;
  color:var(--muted)!important;
  font-size:10px!important;
  line-height:1.3!important;
  white-space:normal!important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-switch{
  position:relative!important;
  width:37px!important;
  height:21px!important;
  min-width:37px!important;
  max-width:37px!important;
  display:block!important;
  justify-self:end!important;
  align-self:center!important;
  margin:0!important;
  padding:0!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-switch input{
  position:absolute!important;
  inset:0!important;
  width:37px!important;
  height:21px!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  z-index:2!important;
  cursor:pointer!important;
}
#flashcardsPanel .flash-nav-toggle-stack .flash-nav-switch span{
  width:37px!important;
  height:21px!important;
  display:block!important;
  pointer-events:none!important;
}
body.dark #flashcardsPanel .flash-nav-toggle-stack .flash-nav-option-toggle{
  background:rgba(255,255,255,.035)!important;
  border-color:#3a3248!important;
}
@media(max-width:760px){
  #flashcardsPanel .flash-nav-control-grid{grid-template-columns:1fr!important;}
}


/* FINAL CLEAN FIX: Flashcard Navigation/Açıklama layout - no overlap */
#flashcardsPanel .flash-nav-design-card{display:block!important;position:relative!important;overflow:visible!important;clear:both!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-colors,
#flashcardsPanel .flash-nav-design-card .flash-nav-control-grid,
#flashcardsPanel .flash-nav-design-card .flash-nav-toggle-stack{position:relative!important;float:none!important;clear:both!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-colors{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:12px 0 0!important;width:100%!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-control-grid{display:grid!important;grid-template-columns:repeat(3,minmax(145px,1fr))!important;gap:12px!important;margin:13px 0 0!important;width:100%!important;z-index:2!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-control-grid>div{display:flex!important;flex-direction:column!important;gap:7px!important;min-width:0!important;width:100%!important;height:auto!important;min-height:0!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-control-grid .field-label{display:block!important;width:100%!important;text-align:left!important;margin:0!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-control-grid .standard-input{width:100%!important;min-width:0!important;height:38px!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-toggle-stack{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;width:100%!important;margin:16px 0 0!important;z-index:1!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-option-toggle{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;align-items:center!important;gap:12px!important;width:100%!important;min-height:54px!important;margin:0!important;padding:10px 12px!important;border:1px solid rgba(118,34,204,.15)!important;border-radius:13px!important;background:rgba(118,34,204,.045)!important;box-shadow:none!important;overflow:hidden!important;pointer-events:none!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-toggle-copy{display:block!important;min-width:0!important;width:100%!important;pointer-events:none!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-toggle-copy strong{display:block!important;margin:0!important;font-size:12px!important;line-height:1.25!important;color:var(--text)!important;white-space:normal!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-toggle-copy small{display:block!important;margin:2px 0 0!important;font-size:10px!important;line-height:1.3!important;color:var(--muted)!important;white-space:normal!important;}
#flashcardsPanel .flash-nav-design-card .control-icon{display:none!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-switch{display:block!important;position:relative!important;width:38px!important;min-width:38px!important;height:22px!important;margin:0!important;padding:0!important;justify-self:end!important;pointer-events:auto!important;cursor:pointer!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-switch input{position:absolute!important;inset:0!important;width:38px!important;height:22px!important;margin:0!important;opacity:0!important;z-index:2!important;cursor:pointer!important;}
#flashcardsPanel .flash-nav-design-card .flash-nav-switch span{display:block!important;width:38px!important;height:22px!important;pointer-events:none!important;}
body.dark #flashcardsPanel .flash-nav-design-card .flash-nav-option-toggle{background:rgba(255,255,255,.035)!important;border-color:#3a3248!important;}
@media(max-width:760px){#flashcardsPanel .flash-nav-design-card .flash-nav-colors,#flashcardsPanel .flash-nav-design-card .flash-nav-control-grid{grid-template-columns:1fr!important;}}

/* Slider Studio */
.slider-workspace{grid-template-columns:240px minmax(520px,.9fr) minmax(560px,1.1fr);}
.slider-library-panel{padding:24px 18px;display:flex;flex-direction:column;background:#faf9fc;border-right:1px solid var(--line);}
.slider-settings{padding:26px;border-right:1px solid var(--line);min-width:0;}
.slider-scroll{margin-top:18px;}
.slider-card{margin-top:13px;}
.slider-page-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;margin-top:10px;margin-bottom:12px;}
.slider-page-text{min-height:110px;width:100%;resize:vertical;margin-top:7px;}
.slider-image-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:12px;}
.slider-transparent-row{margin-top:12px;}
.slider-preview-panel{padding:26px;background:linear-gradient(155deg,#fbfafd,#f5f3f8);}
.slider-demo-stage{min-height:620px;padding:18px;display:grid;place-items:center;overflow:auto;border:1px solid #ddd8e4;border-radius:16px;background-color:#eeecf2;background-image:radial-gradient(#d0cad8 1px,transparent 1px);background-size:20px 20px;}
.slider-demo-stage iframe{width:100%;min-height:560px;border:0;background:transparent;}
.slider-save-dock{margin-top:auto;}
body.dark .slider-library-panel{background:#1f1a28;}
body.dark .slider-preview-panel{background:#211d29;}
body.dark .slider-demo-stage{border-color:#3a3248;background-color:#18141f;background-image:radial-gradient(#3a3248 1px,transparent 1px);}
@media(max-width:1280px){.slider-workspace{grid-template-columns:1fr}.slider-library-panel,.slider-settings{border-right:0;border-bottom:1px solid var(--line)}.slider-preview-panel{border-top:1px solid var(--line)}}
@media(max-width:800px){.slider-page-toolbar{grid-template-columns:1fr 1fr}.slider-image-row{grid-template-columns:1fr}.slider-workspace.active{display:block!important}}


.slider-scroll{padding-right:8px;}
.slider-preview-panel{position:sticky;top:18px;align-self:start;height:fit-content;max-height:calc(100vh - 36px);}
.slider-page-color-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.slider-page-range-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.slider-image-layout-grid,.slider-lever-grid{margin-top:12px;}
.slider-slot-frame-toggle,.slider-gradient-toggle{margin-top:12px;}
@media(max-width:1280px){.slider-preview-panel{position:static;max-height:none}.slider-page-color-grid,.slider-page-range-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){.slider-page-color-grid,.slider-page-range-grid{grid-template-columns:1fr;}}


/* FINAL NAVIGATION/AÇIKLAMA LAYOUT FIX 2026-06-25: left compact toggles, right controls; no overlap */
#flashcardsPanel .flash-nav-design-card{
  display:block!important;
  overflow:visible!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-colors{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
  margin:12px 0 0!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-main-grid{
  display:grid!important;
  grid-template-columns:minmax(238px, max-content) minmax(360px, 1fr)!important;
  gap:16px!important;
  align-items:start!important;
  width:100%!important;
  margin:14px 0 0!important;
  position:relative!important;
  clear:both!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-toggle-stack{
  grid-column:1!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  width:max-content!important;
  max-width:315px!important;
  min-width:238px!important;
  margin:0!important;
  padding:0!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  z-index:1!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-control-grid{
  grid-column:2!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(125px,1fr))!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  z-index:2!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-control-grid>div{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  min-width:0!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-control-grid .field-label{
  display:block!important;
  width:100%!important;
  text-align:left!important;
  margin:0!important;
  white-space:normal!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-control-grid .standard-input{
  width:100%!important;
  min-width:0!important;
  height:38px!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-option-toggle{
  position:relative!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,max-content)!important;
  align-items:center!important;
  justify-content:start!important;
  gap:10px!important;
  width:max-content!important;
  max-width:315px!important;
  min-width:238px!important;
  min-height:44px!important;
  margin:0!important;
  padding:8px 10px!important;
  border:1px solid rgba(118,34,204,.16)!important;
  border-radius:12px!important;
  background:rgba(118,34,204,.045)!important;
  box-shadow:none!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-toggle-copy{
  display:block!important;
  min-width:0!important;
  width:max-content!important;
  max-width:245px!important;
  pointer-events:none!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-toggle-copy strong{
  display:block!important;
  margin:0!important;
  font-size:12px!important;
  line-height:1.22!important;
  color:var(--text)!important;
  white-space:normal!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-toggle-copy small{
  display:block!important;
  margin:2px 0 0!important;
  font-size:10px!important;
  line-height:1.25!important;
  color:var(--muted)!important;
  white-space:normal!important;
}
#flashcardsPanel .flash-nav-design-card .control-icon{
  display:none!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-switch{
  display:block!important;
  position:relative!important;
  grid-column:1!important;
  grid-row:1!important;
  width:38px!important;
  min-width:38px!important;
  height:22px!important;
  margin:0!important;
  padding:0!important;
  justify-self:start!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-switch input{
  position:absolute!important;
  inset:0!important;
  width:38px!important;
  height:22px!important;
  margin:0!important;
  opacity:0!important;
  z-index:2!important;
  cursor:pointer!important;
}
#flashcardsPanel .flash-nav-design-card .flash-nav-switch span{
  display:block!important;
  width:38px!important;
  height:22px!important;
  pointer-events:none!important;
}
body.dark #flashcardsPanel .flash-nav-design-card .flash-nav-option-toggle{
  background:rgba(255,255,255,.035)!important;
  border-color:#3a3248!important;
}
@media(max-width:980px){
  #flashcardsPanel .flash-nav-design-card .flash-nav-main-grid{
    grid-template-columns:1fr!important;
  }
  #flashcardsPanel .flash-nav-design-card .flash-nav-toggle-stack,
  #flashcardsPanel .flash-nav-design-card .flash-nav-control-grid{
    grid-column:1!important;
  }
  #flashcardsPanel .flash-nav-design-card .flash-nav-control-grid{
    grid-template-columns:repeat(3,minmax(120px,1fr))!important;
  }
}
@media(max-width:760px){
  #flashcardsPanel .flash-nav-design-card .flash-nav-colors,
  #flashcardsPanel .flash-nav-design-card .flash-nav-control-grid{
    grid-template-columns:1fr!important;
  }
}

/* Flashcard update: aspect lock, compact effect controls, drag ordering */
#flashcardsPanel .aspect-lock-row{margin:12px 0 4px!important;max-width:520px!important}
#flashcardsPanel .flash-effect-grid{display:grid!important;grid-template-columns:repeat(3,minmax(150px,1fr))!important;gap:12px!important;align-items:end!important;margin-top:12px!important}
#flashcardsPanel .flash-effect-grid .range-setting{margin:0!important}
#flashcardsPanel .color-input-full{height:38px!important;padding:4px!important}
#flashcardsPanel .flashcard-list-item[draggable="true"]{cursor:grab;user-select:none}
#flashcardsPanel .flashcard-list-item.dragging{opacity:.55;transform:scale(.985)}
#flashcardsPanel .flashcard-list-item.drag-over{outline:2px dashed rgba(118,34,204,.55);outline-offset:3px;background:rgba(118,34,204,.08)!important}
#flashcardsPanel .flashcard-list-item button{cursor:pointer}
@media(max-width:1180px){#flashcardsPanel .flash-effect-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:720px){#flashcardsPanel .flash-effect-grid{grid-template-columns:1fr!important}}

/* Image Trigger refinements */
#imagetriggerPanel .trigger-gap-setting{margin-top:14px;}
#imagetriggerPanel .trigger-shape-scale-grid{margin:14px 0;}
#imagetriggerPanel .trigger-scale-toggle{height:100%;margin:0;}
#imagetriggerPanel .trigger-demo-stage{position:relative;}
#imagetriggerPanel .trigger-demo-stage iframe{position:relative;z-index:1;}
#imagetriggerPanel .trigger-demo-stage::after{content:'Kesikli çerçeve: kodun kapladığı otomatik iframe alanı';position:absolute;left:18px;top:12px;z-index:0;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.82);color:#6f6280;font-size:10px;font-weight:800;letter-spacing:.03em;box-shadow:0 8px 18px rgba(31,16,46,.08);}
body.dark #imagetriggerPanel .trigger-demo-stage::after{background:rgba(33,29,41,.88);color:#c9bfd8;}


#imagetriggerPanel .trigger-manual-toggle{margin-top:12px;}
#imagetriggerPanel .trigger-manual-controls{margin-top:12px;}
#imagetriggerPanel .trigger-manual-controls[hidden]{display:none!important;}
#imagetriggerPanel .trigger-demo-stage.manual-area-active::after{content:'Manuel kesikli çerçeve: sağ alttaki tutamaçla büyüt/küçült';}


/* Targeted update: embed overflow toggles + image trigger caption controls */
.embed-overflow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 12px}.compact-overflow-toggle{margin:0!important;min-height:58px}.trigger-caption-toggle{margin-top:14px}.trigger-caption-settings{margin-top:12px;padding:13px;border:1px solid rgba(118,34,204,.14);border-radius:16px;background:rgba(118,34,204,.035)}body.dark .trigger-caption-settings{border-color:#3a3248;background:rgba(255,255,255,.035)}.trigger-caption-settings .form-grid{margin-top:0;margin-bottom:10px}.trigger-caption-settings .compact-grid{margin-top:4px}@media(max-width:760px){.embed-overflow-grid{grid-template-columns:1fr}}

/* Image Trigger motion/overflow controls */
.trigger-effect-grid,.trigger-overflow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;align-items:stretch}.trigger-motion-grid{margin-top:12px}@media(max-width:900px){.trigger-effect-grid,.trigger-overflow-grid{grid-template-columns:1fr}}

/* Image Trigger mind-map branch controls */
.trigger-branch-toggle{margin-top:12px;}
.trigger-branch-settings{margin-top:12px;padding:12px;border:1px solid rgba(122,63,211,.14);border-radius:15px;background:rgba(122,63,211,.045);}
.trigger-branch-settings .form-grid{align-items:end;}
.trigger-branch-hint{min-height:48px;display:flex;flex-direction:column;justify-content:center;padding:9px 10px;border:1px dashed rgba(122,63,211,.2);border-radius:12px;background:rgba(255,255,255,.65);}
.trigger-branch-hint strong{font-size:11px;line-height:1.25;color:var(--text);}
.trigger-branch-hint small{margin-top:3px;font-size:10px;line-height:1.25;color:var(--muted);}
.trigger-branch-grid{margin-top:10px;grid-template-columns:repeat(2,minmax(0,1fr));}
body.dark .trigger-branch-settings{background:rgba(255,255,255,.03);border-color:#3a3248;}
body.dark .trigger-branch-hint{background:rgba(255,255,255,.04);border-color:#40364d;}
@media(max-width:860px){.trigger-branch-grid{grid-template-columns:1fr;}}

.trigger-progress-toggle{margin-top:12px;}


/* Flashcard iframe sizing controls */
.flash-iframe-control-card{margin:12px 0 15px;padding:12px;border:1px solid rgba(118,34,204,.12);border-radius:15px;background:rgba(118,34,204,.035);display:grid;gap:9px}.flash-iframe-control-card .toggle-row{margin:0}.flash-overflow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.flash-manual-controls{margin-top:2px}.flashcard-demo-stage{position:relative}.flashcard-demo-stage.manual-flash-area iframe{outline:2px dashed #1fb6d8;outline-offset:4px}.flash-manual-resize-note{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 9px;border-radius:999px;background:#fff;color:#655772;font-size:10px;font-weight:800;box-shadow:0 8px 20px rgba(33,23,53,.10)}@media(max-width:850px){.flash-overflow-grid{grid-template-columns:1fr}}body.dark .flash-iframe-control-card{background:rgba(255,255,255,.035);border-color:#3a3248}

/* Image Trigger progress direction controls */
.trigger-progress-controls{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px;align-items:end;margin-top:12px}.trigger-progress-direction{min-width:0}.trigger-progress-direction .field-label{margin-bottom:6px}@media(max-width:760px){.trigger-progress-controls{grid-template-columns:1fr}}

/* Image Deck Studio */
.image-deck-workspace{grid-template-columns:240px minmax(560px,.95fr) minmax(560px,1.05fr);overflow:visible;align-items:start;}
.image-deck-library-panel{padding:24px 18px;display:flex;flex-direction:column;background:#faf9fc;border-right:1px solid var(--line);}
.image-deck-settings{padding:26px;border-right:1px solid var(--line);min-width:0;}
.image-deck-scroll{margin-top:18px;padding-right:8px;}
.image-deck-card{margin-top:13px;}
.image-deck-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;margin-top:10px;margin-bottom:10px;}
.subtle-note{display:block;margin:4px 0 10px;color:var(--muted);font-size:11px;}
.image-deck-order-list{display:grid;gap:7px;margin-bottom:12px;}
.image-deck-order-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:grab;}
.image-deck-order-item.active{border-color:#7420d0;background:#f6efff;}
.image-deck-order-item.dragging{opacity:.48;}
.image-deck-order-item .drag-handle{font-size:15px;color:var(--muted);}
.image-deck-order-item strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
.image-deck-order-item small{font-size:10px;color:var(--muted);}
.image-deck-upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;}
.image-deck-url-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;}
.image-deck-link-box{padding:12px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.78);}
.image-deck-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;}
.image-deck-link-row .secondary-button{min-height:40px;white-space:nowrap;}
.image-deck-link-box small{display:block;margin-top:7px;color:#958e9f;font-size:9px;line-height:1.45;}
.image-deck-actions-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.image-deck-fit-row{margin-top:12px;}
.image-deck-manual-row{margin-top:12px;}
.image-deck-manual-size-row{margin-top:12px;}
.image-deck-progress-colors{margin-top:12px;}
.image-deck-preview-panel{position:-webkit-sticky;position:sticky !important;top:18px;align-self:start;align-content:start;height:max-content;max-height:none;padding:26px;background:linear-gradient(155deg,#fbfafd,#f5f3f8);overflow:visible;z-index:2;}
.image-deck-demo-stage{min-height:620px;max-height:calc(100vh - 180px);padding:18px;display:grid;place-items:center;overflow:auto;border:1px solid #ddd8e4;border-radius:16px;background-color:#eeecf2;background-image:radial-gradient(#d0cad8 1px,transparent 1px);background-size:20px 20px;}
.image-deck-bounds{position:relative;display:grid;place-items:center;border:2px dashed rgba(116,32,208,.55);border-radius:18px;background:rgba(255,255,255,.35);overflow:visible;}
.image-deck-bounds iframe{width:100%;height:100%;border:0;background:transparent;}
.image-deck-bounds-label{position:absolute;left:10px;top:8px;z-index:3;padding:4px 7px;border-radius:99px;background:rgba(255,255,255,.9);color:#4b3564;font-size:10px;font-weight:800;box-shadow:0 4px 12px rgba(33,23,53,.12);}
.image-deck-resize-handle{display:none;position:absolute;right:-8px;bottom:-8px;z-index:8;width:18px;height:18px;border:2px solid #fff;border-radius:6px;background:#7420d0;box-shadow:0 4px 12px rgba(33,23,53,.26);cursor:nwse-resize;}
.image-deck-bounds.manual .image-deck-resize-handle{display:block;}
body.dark .image-deck-library-panel{background:#1f1a28;}
body.dark .image-deck-preview-panel{background:#211d29;}
body.dark .image-deck-demo-stage{border-color:#3a3248;background-color:#18141f;background-image:radial-gradient(#3a3248 1px,transparent 1px);}
body.dark .image-deck-order-item{background:#211c2b;border-color:#3a3248;}
body.dark .image-deck-order-item.active{background:#2a1d3a;border-color:#8b44df;}
body.dark .image-deck-link-box{background:#211c2b;border-color:#3a3248;}
body.dark .image-deck-link-box small{color:#b8aec6;}
body.dark .image-deck-bounds-label{background:#211c2bef;color:#fff;}
@media(max-width:1280px){.image-deck-workspace{grid-template-columns:1fr}.image-deck-library-panel,.image-deck-settings{border-right:0;border-bottom:1px solid var(--line)}.image-deck-preview-panel{position:static;max-height:none;border-top:1px solid var(--line)}}
@media(max-width:800px){.image-deck-toolbar{grid-template-columns:1fr 1fr}.image-deck-upload-grid,.image-deck-url-grid{grid-template-columns:1fr}.image-deck-link-row{grid-template-columns:1fr}.image-deck-workspace.active{display:block!important}}

/* Image Deck update: preview modes, transparent area options, four-corner manual frame resize */
.image-deck-preview-mode{display:inline-flex;gap:6px;padding:4px;margin:0 0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:0 8px 18px rgba(33,23,53,.08)}
.image-deck-preview-mode button{min-height:30px;padding:7px 13px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-weight:850;font-size:11px;cursor:pointer}
.image-deck-preview-mode button.active{color:#fff;background:#7420d0;box-shadow:0 8px 18px rgba(116,32,208,.24)}
body.dark .image-deck-preview-mode{background:#211c2b;border-color:#3a3248}
body.dark .image-deck-preview-mode button.active{background:#9b58f2;color:#fff}
.image-deck-area-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.image-deck-area-mode-grid .toggle-row{margin:0}
.image-deck-resize-handle{display:none;position:absolute;z-index:8;width:18px;height:18px;border:2px solid #fff;border-radius:6px;background:#7420d0;box-shadow:0 4px 12px rgba(33,23,53,.26)}
.image-deck-bounds.manual .image-deck-resize-handle{display:block}
.image-deck-resize-handle.tl{left:-8px;top:-8px;cursor:nwse-resize}
.image-deck-resize-handle.tr{right:-8px;top:-8px;cursor:nesw-resize}
.image-deck-resize-handle.bl{left:-8px;bottom:-8px;cursor:nesw-resize}
.image-deck-resize-handle.br{right:-8px;bottom:-8px;cursor:nwse-resize}
.image-deck-card .field-disabled{opacity:.45;filter:grayscale(.3);pointer-events:none}
@media(max-width:760px){.image-deck-area-mode-grid{grid-template-columns:1fr}.image-deck-preview-mode{display:flex;width:100%}.image-deck-preview-mode button{flex:1}}

/* Final Image Deck handle position override */
.image-deck-resize-handle.tl{left:-8px!important;top:-8px!important;right:auto!important;bottom:auto!important;cursor:nwse-resize!important;}
.image-deck-resize-handle.tr{right:-8px!important;top:-8px!important;left:auto!important;bottom:auto!important;cursor:nesw-resize!important;}
.image-deck-resize-handle.bl{left:-8px!important;bottom:-8px!important;right:auto!important;top:auto!important;cursor:nesw-resize!important;}
.image-deck-resize-handle.br{right:-8px!important;bottom:-8px!important;left:auto!important;top:auto!important;cursor:nwse-resize!important;}

/* Story Slider Studio rewrite */
.slider-workspace{grid-template-columns:240px minmax(560px,.95fr) minmax(560px,1.05fr);overflow:visible;align-items:start;}
.slider-library-panel{padding:24px 18px;display:flex;flex-direction:column;background:#faf9fc;border-right:1px solid var(--line);}
.slider-settings{padding:26px;border-right:1px solid var(--line);min-width:0;}
.slider-scroll{margin-top:18px;padding-right:8px;}
.slider-card{margin-top:13px;}
.slider-page-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;margin-top:10px;margin-bottom:12px;}
.slider-page-text{min-height:108px;width:100%;resize:vertical;margin-top:7px;}
.slider-small-textarea{min-height:72px;width:100%;resize:vertical;margin-top:7px;}
.slider-image-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:12px;}
.slider-color-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.slider-preview-panel{position:-webkit-sticky;position:sticky!important;top:18px;align-self:start;height:max-content;max-height:none;padding:26px;background:linear-gradient(155deg,#fbfafd,#f5f3f8);overflow:visible;z-index:2;}
.slider-demo-stage{min-height:620px;max-height:calc(100vh - 180px);padding:18px;display:grid;place-items:center;overflow:auto;border:1px solid #ddd8e4;border-radius:16px;background-color:#eeecf2;background-image:radial-gradient(#d0cad8 1px,transparent 1px);background-size:20px 20px;}
.slider-bounds{position:relative;display:grid;place-items:center;border:2px dashed rgba(116,32,208,.55);border-radius:18px;background:rgba(255,255,255,.35);overflow:hidden;max-width:100%;max-height:100%;}
.slider-bounds iframe{width:100%;height:100%;border:0;background:transparent;display:block;}
.slider-bounds-label{position:absolute;left:10px;top:8px;z-index:3;padding:4px 7px;border-radius:99px;background:rgba(255,255,255,.9);color:#4b3564;font-size:10px;font-weight:800;box-shadow:0 4px 12px rgba(33,23,53,.12);pointer-events:none;}
.slider-save-dock{margin-top:auto;}
body.dark .slider-library-panel{background:#1f1a28;}
body.dark .slider-preview-panel{background:#211d29;}
body.dark .slider-demo-stage{border-color:#3a3248;background-color:#18141f;background-image:radial-gradient(#3a3248 1px,transparent 1px);}
body.dark .slider-bounds-label{background:#211c2bef;color:#fff;}
@media(max-width:1280px){.slider-workspace{grid-template-columns:1fr}.slider-library-panel,.slider-settings{border-right:0;border-bottom:1px solid var(--line)}.slider-preview-panel{position:static!important;max-height:none;border-top:1px solid var(--line)}.slider-color-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:800px){.slider-page-toolbar{grid-template-columns:1fr 1fr}.slider-image-row{grid-template-columns:1fr}.slider-workspace.active{display:block!important}.slider-color-grid{grid-template-columns:1fr;}}


.button-demo-align > button.button-idle-float {
  animation: buttonIdleFloat var(--button-idle-speed, 3.2s) ease-in-out infinite;
}
.button-demo-align > button.button-idle-pulse {
  animation: buttonIdlePulse var(--button-idle-speed, 3.2s) ease-in-out infinite;
}
.button-demo-align > button:hover,
.button-demo-align > button:active {
  animation: none;
}
@keyframes buttonIdleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--button-idle-distance, 8px) * -1)); }
}
@keyframes buttonIdlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(var(--button-idle-scale, 1.08)); }
}
.button-overlay.transparent,
.button-overlay.transparent iframe,
.button-target-gallery.transparent {
  background: transparent !important;
}
.button-demo-stage:fullscreen::backdrop,
.button-preview-panel:fullscreen::backdrop {
  background: var(--button-fullscreen-backdrop, #0e0a15);
}
.button-idle-motion-card .button-idle-motion-controls {
  margin-top: 12px;
}


.flash-cover-card .flash-cover-settings{margin-top:12px;display:grid;gap:10px}
.flash-cover-card .flash-cover-settings[hidden]{display:none!important}
.flash-cover-card .mini-upload{width:max-content}



.flash-cover-card .flash-cover-card-fields{display:grid;gap:8px}
.flash-cover-card .flash-cover-card-fields[hidden]{display:none!important}
.flash-cover-card textarea{min-height:96px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--purple-dark);font:500 13px/1.45 Inter,system-ui,sans-serif;resize:vertical}
body.dark .flash-cover-card textarea{background:#1f1a2a;color:#f6f0ff;border-color:#3a3248}


.flash-cover-card .flash-cover-image-options{display:grid;gap:8px}
.flash-cover-card .flash-cover-image-options[hidden]{display:none!important}

.flash-cover-card #flashCoverImageOpacityWrap[hidden]{display:none!important}
.flash-cover-card #flashCoverImageOpacityWrap{margin-top:2px}

.flash-card-font-panel{margin:14px 0 16px;display:grid;gap:10px}
.flash-card-font-panel .form-grid{align-items:end}
.flash-card-font-panel .mini-help{margin:0;color:#786b84;font-size:11px;line-height:1.45}

.map-cover-custom-image{position:absolute!important;inset:0!important;z-index:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;opacity:.92!important;filter:none!important}.map-cover.has-custom-image:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.38))}.map-cover.has-custom-image .map-cover-main{z-index:2}.map-cover.has-custom-image .map-cover-powered{z-index:2}.map-cover.clickable-cover{cursor:pointer}.map-cover.no-cover-button button{display:none!important}.map-cover-image-card{display:grid;gap:12px}.map-cover-button-controls[hidden]{display:none!important}

/* Studio embed editor cover image + scaling controls */
.studio-cover-image-card{display:grid;gap:12px;margin-top:12px}
.studio-cover-button-controls[hidden],.studio-cover-image-placement[hidden],.studio-cover-button-edit-panel[hidden]{display:none!important}
.studio-cover-button-edit-toggle{grid-column:1/-1}
.studio-cover-button-edit-panel{grid-column:1/-1;display:grid;gap:10px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.56)}
body.dark .studio-cover-button-edit-panel{background:rgba(255,255,255,.05)}
.studio-cover-image-placement{display:grid;gap:9px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.56)}
body.dark .studio-cover-image-placement{background:rgba(255,255,255,.05)}
.studio-cover-preview.has-custom-image{cursor:default}
.studio-cover-preview.has-custom-image:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.studio-cover-preview.theme-dark.has-custom-image:before{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.44))}
.studio-cover-preview.theme-light.has-custom-image:before{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.62))}
.studio-cover-preview.has-custom-image>*:not(.studio-cover-custom-image){position:relative;z-index:2}
.studio-cover-preview.clickable-cover{cursor:pointer}
.studio-cover-preview.no-cover-button button{display:none!important}
.studio-cover-custom-image{position:absolute!important;left:50%!important;top:50%!important;z-index:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important;object-position:center center!important;opacity:.92!important;filter:var(--studio-cover-img-filter,none)!important;transform:translate(-50%,-50%) scale(var(--studio-cover-img-scale,1)) translate(var(--studio-cover-img-x,0),var(--studio-cover-img-y,0))!important;transform-origin:center center!important}
.studio-cover-preview .studio-cover-logo{width:min(290px,58%);height:auto}
.studio-cover-preview.theme-dark .studio-cover-logo{filter:brightness(0) invert(1)}
.studio-cover-preview.theme-dark.has-custom-image .studio-cover-logo{filter:brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0,0,0,.25))}
.studio-cover-preview.theme-light.has-custom-image .studio-cover-logo{filter:drop-shadow(0 8px 18px rgba(255,255,255,.55))}
.studio-cover-preview.theme-dark.has-custom-image h3,.studio-cover-preview.theme-dark.has-custom-image span,.studio-cover-preview.theme-dark.has-custom-image small{color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.45)}
.studio-cover-preview.theme-light.has-custom-image h3,.studio-cover-preview.theme-light.has-custom-image span,.studio-cover-preview.theme-light.has-custom-image small{color:#211735;text-shadow:0 3px 18px rgba(255,255,255,.7)}


/* Embed editor live preview sticky + cover footer refinement */
#studioPanel.workspace{overflow:visible;align-items:start;}
#studioPanel > .preview-panel{position:sticky;top:18px;align-self:start;max-height:calc(100vh - 36px);overflow:auto;z-index:5;}
#studioPanel > .editor-panel{min-width:0;}
.studio-cover-preview{justify-content:center!important;padding:clamp(14px,4vw,28px) 18px clamp(28px,5%,42px)!important;}
.studio-cover-main{flex:0 1 auto!important;padding-bottom:clamp(28px,7%,54px)!important;}
.studio-cover-powered{position:absolute!important;left:0!important;right:0!important;bottom:clamp(8px,2.8%,18px)!important;margin:0 auto!important;text-align:center!important;pointer-events:none;}
.studio-cover-preview button{display:inline-flex;align-items:center;justify-content:center;gap:0;}
@media(max-width:1280px){#studioPanel.workspace{overflow:hidden;}#studioPanel > .preview-panel{position:relative;top:auto;max-height:none;overflow:visible;}}

/* Embed editor cover button text color fix */
#studioCoverOpen,#studioCoverButtonPreview{color:inherit}
#studioCoverButtonPreview{color:inherit!important;text-shadow:none!important}
.studio-cover-preview #studioCoverOpen span{color:inherit!important;text-shadow:none!important}


/* Embed editor cover transparent background option */
.studio-cover-transparent-toggle,.studio-cover-alpha-shadow-toggle,#studioCoverImageShadowStrengthWrap{grid-column:1/-1}
.studio-cover-preview.cover-transparent-bg{background:transparent!important}
.preview-frame-wrap.transparent .studio-cover-preview.cover-transparent-bg{background:transparent!important}


/* Embed editor cover fully transparent background fix */
.preview-frame-wrap.transparent{background:transparent!important;box-shadow:none!important}
.studio-cover-preview.cover-transparent-bg{background:transparent!important;box-shadow:none!important}
.studio-cover-preview.cover-transparent-bg:before{display:none!important;background:transparent!important}
.studio-cover-preview.cover-transparent-bg:after{display:none!important;background:transparent!important}
.studio-cover-preview.cover-transparent-bg.has-custom-image:before{display:none!important;background:transparent!important}

.studio-cover-image-darken-toggle,.studio-cover-image-darken-toggle + #studioCoverImageDarkenStrengthWrap{grid-column:1/-1}

.studio-border-panel{display:grid;gap:12px;padding:12px 0 6px;border-bottom:1px solid var(--line)}
.studio-border-panel[hidden]{display:none!important}

#studioBorderOnCoverWrap{grid-column:1/-1}

.studio-border-preview-layer{position:absolute;inset:0;z-index:9;pointer-events:none;box-sizing:border-box;border-style:solid;border-color:transparent;border-width:0;border-radius:inherit}
.studio-border-preview-layer[hidden]{display:none!important}

.preview-frame-wrap .float-fullscreen{z-index:10}


.studio-cover-close-card{display:grid;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.studio-close-button-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.studio-close-button-controls[hidden]{display:none!important}
.studio-preview-close{position:absolute;z-index:10;width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.36);border-radius:12px;background:rgba(255,255,255,.88);color:#111;font-size:0;line-height:0;cursor:pointer;box-shadow:0 10px 24px rgba(20,12,34,.22);backdrop-filter:blur(8px)}
.studio-preview-close svg{display:block;width:16px!important;height:16px!important;stroke:currentColor!important;stroke-width:3!important;stroke-linecap:round!important;fill:none!important;margin:0!important;transform:none!important}
.studio-preview-close[hidden]{display:none!important}

/* Embed editor cover center content scale + shadow */
.studio-cover-content-controls{display:grid;gap:10px;margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.56)}
body.dark .studio-cover-content-controls{background:rgba(255,255,255,.05)}
#studioCoverContentShadowStrengthWrap[hidden]{display:none!important}
.studio-cover-main{transform-origin:center center!important;filter:var(--studio-cover-content-filter,none)!important}

/* Shared advanced cover controls for mind map panel */
.map-cover-image-placement,.map-cover-content-controls,.map-cover-powered-controls,.map-cover-close-card{display:grid;gap:12px;margin-top:12px}
.map-cover-image-placement[hidden],.map-cover-button-controls[hidden],.map-cover-button-edit-panel[hidden],.map-cover-button-glow-panel[hidden],.map-close-button-controls[hidden],#mapCoverImageShadowStrengthWrap[hidden],#mapCoverImageDarkenStrengthWrap[hidden],#mapCoverContentShadowStrengthWrap[hidden],#mapCoverPoweredPanel[hidden],.studio-cover-powered-controls [hidden]{display:none!important}
.map-cover-button-edit-panel,.map-close-button-controls{grid-column:1/-1;display:grid;gap:10px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.56)}
body.dark .map-cover-button-edit-panel,body.dark .map-close-button-controls{background:rgba(255,255,255,.05)}
.map-cover-main{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;transform-origin:center center}.map-cover-main .map-cover-logo{width:min(280px,55%);height:92px;object-fit:contain}.map-cover-powered{position:absolute!important;left:0!important;right:0!important;bottom:22px!important;z-index:2;margin:0 auto;text-align:center;pointer-events:none}.map-cover-custom-image{position:absolute!important;left:50%!important;top:50%!important;z-index:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important;object-position:center center!important;transform-origin:center center!important;transform:translate(-50%,-50%) scale(var(--map-cover-img-scale,1)) translate(var(--map-cover-img-x,0),var(--map-cover-img-y,0))!important;filter:var(--map-cover-img-filter,none)!important;opacity:var(--map-cover-img-opacity,.92)!important}.map-cover.has-custom-image:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}.map-cover.theme-dark.has-custom-image:before{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.44))}.map-cover.theme-light.has-custom-image:before{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.62))}.map-cover.cover-transparent-bg{background:transparent!important;box-shadow:none!important}.map-cover.cover-transparent-bg:before,.map-cover.cover-transparent-bg:after{display:none!important;background:transparent!important}.map-cover.has-custom-image .map-cover-main{position:relative;z-index:2}.map-cover.has-custom-image .map-cover-powered{z-index:2}.map-cover.no-cover-button button{display:none!important}.map-cover.clickable-cover{cursor:pointer}.fmw-close{display:none;place-items:center;position:absolute;z-index:6;width:36px;height:36px;border:0;cursor:pointer}.fmw-close svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2}.map-cover button b{display:none!important}.studio-cover-powered-controls{display:grid;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}

.studio-cover-powered-preview{transform-origin:center center}


/* Mind map embed: sticky preview + compact save + transparent cover fix */
.map-save-card{display:grid;grid-template-columns:minmax(160px,1fr) auto minmax(150px,1fr) auto auto;gap:8px;align-items:end;margin:0 0 18px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.58)}
.map-save-card .secondary-button{min-height:40px;padding:8px 12px;font-size:10px}.map-save-card .text-button{align-self:center;padding:8px 4px}.map-save-card select:disabled,.map-save-card button:disabled{opacity:.45;cursor:not-allowed}
.mindmap-workspace{overflow:visible;align-items:start}.mindmap-workspace>.map-preview-panel{position:sticky;top:18px;align-self:start;max-height:calc(100vh - 36px);overflow:auto;z-index:5}.mindmap-workspace>.mindmap-settings{min-width:0}.map-component.transparent-cover-bg{background:transparent!important;box-shadow:none!important}
@media(max-width:1280px){.mindmap-workspace{overflow:hidden}.mindmap-workspace>.map-preview-panel{position:relative;top:auto;max-height:none;overflow:visible}.map-save-card{grid-template-columns:1fr 1fr}.map-save-card>div,.map-save-card select{grid-column:1/-1}}


/* Map cover group shift fix */
.map-cover .cover-glow{position:absolute!important;z-index:0!important;flex:none!important}
.map-cover.has-custom-image .cover-glow{position:absolute!important;z-index:0!important;flex:none!important}
.map-cover.has-custom-image .map-cover-main{position:relative!important;z-index:2!important}
.map-cover.has-custom-image .map-cover-powered{z-index:2!important}

/* Mind map embed border controls */
.map-border-controls{display:grid;gap:12px;margin:14px 0 14px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.map-border-panel{display:grid;gap:12px}
.map-border-panel[hidden]{display:none!important}
.map-border-preview-layer{position:absolute;inset:0;z-index:8;pointer-events:none;box-sizing:border-box;border-radius:inherit;box-shadow:none}
.map-border-preview-layer[hidden]{display:none!important}

/* Map cover text edit + icon hints */
.map-cover-text-toggle{margin:14px 0 10px}
.map-cover-text-panel{margin:0 0 14px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.58)}
.map-cover-text-panel[hidden]{display:none!important}
body.dark .map-cover-text-panel{background:rgba(255,255,255,.05)}
.setting-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:10px;background:rgba(132,41,236,.10);font-size:15px;flex:0 0 auto}
.setting-mini-icon{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:7px;border-radius:7px;background:rgba(132,41,236,.10);font-style:normal;font-size:12px;vertical-align:middle}
.map-cover-image-card .toggle-row strong::before,.map-cover-close-card .toggle-row strong::before,.map-cover-powered-controls .toggle-row strong::before{display:inline-grid;place-items:center;width:21px;height:21px;margin-right:7px;border-radius:7px;background:rgba(132,41,236,.10);font-size:11px;vertical-align:middle;content:"⚙️"}
.map-cover-image-card .toggle-row strong,.map-cover-close-card .toggle-row strong,.map-cover-powered-controls .toggle-row strong{display:inline-flex;align-items:center}
.map-cover button,#showMapButton{justify-content:center!important;text-align:center!important;gap:0!important}
#buttonTextPreview{display:block;width:100%;text-align:center!important;line-height:1.1;white-space:normal}

.map-overflow-scale-controls{display:grid;gap:10px;margin:14px 0 16px}
.map-overflow-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:760px){.map-overflow-grid{grid-template-columns:1fr}}

/* Enhanced cover image upload buttons for Embed Editor + Mind Map Embed */
.studio-cover-image-card > .mini-upload,
.map-cover-image-card .mini-upload {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 16px;
  border: 1.5px dashed rgba(132, 41, 236, 0.42);
  border-radius: 15px;
  color: var(--purple-dark);
  background:
    radial-gradient(circle at 18% 10%, rgba(12, 201, 221, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(247, 240, 255, 0.96));
  box-shadow: 0 10px 24px rgba(67, 36, 98, 0.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.studio-cover-image-card > .mini-upload::before,
.map-cover-image-card .mini-upload::before {
  content: "🖼️";
  width: 27px;
  height: 27px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(132, 41, 236, 0.12);
  box-shadow: inset 0 0 0 1px rgba(132, 41, 236, 0.10);
  font-size: 14px;
  line-height: 1;
}
.studio-cover-image-card > .mini-upload:hover,
.map-cover-image-card .mini-upload:hover {
  transform: translateY(-1px);
  border-color: rgba(132, 41, 236, 0.72);
  box-shadow: 0 14px 30px rgba(67, 36, 98, 0.13);
  background:
    radial-gradient(circle at 18% 10%, rgba(12, 201, 221, 0.24), transparent 40%),
    linear-gradient(135deg, #ffffff, #f2e7ff);
}
.studio-cover-image-card > .mini-upload:active,
.map-cover-image-card .mini-upload:active {
  transform: translateY(0);
  box-shadow: 0 7px 18px rgba(67, 36, 98, 0.10);
}
.studio-cover-image-card .image-file-state,
.map-cover-image-card .image-file-state {
  min-height: 42px !important;
  height: auto !important;
  padding: 9px 11px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(232, 229, 239, 0.9) !important;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.58);
}
body.dark .studio-cover-image-card > .mini-upload,
body.dark .map-cover-image-card .mini-upload {
  color: #f4eaff;
  border-color: rgba(178, 128, 255, 0.42);
  background:
    radial-gradient(circle at 18% 10%, rgba(12, 201, 221, 0.13), transparent 38%),
    linear-gradient(135deg, rgba(36, 29, 49, 0.96), rgba(45, 34, 62, 0.96));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
body.dark .studio-cover-image-card > .mini-upload::before,
body.dark .map-cover-image-card .mini-upload::before {
  background: rgba(178, 128, 255, 0.16);
}
body.dark .studio-cover-image-card .image-file-state,
body.dark .map-cover-image-card .image-file-state {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08) !important;
}


.cover-image-link-box {
  display: grid;
  gap: 7px;
  margin: 10px 0;
  padding: 11px;
  border: 1px solid rgba(232, 229, 239, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}
.cover-image-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.cover-image-link-box small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.cover-image-link-button {
  min-height: 36px;
  padding: 8px 12px;
  white-space: nowrap;
}
body.dark .cover-image-link-box {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
@media (max-width: 700px) {
  .cover-image-link-row { grid-template-columns: 1fr; }
}

#mapComponent:fullscreen #mapFullscreen{display:block!important;z-index:9999!important}
#mapComponent:fullscreen #mapPreviewFrame{width:100%!important;height:100%!important}

.map-cover-button-glow-panel{grid-column:1/-1;display:grid;gap:10px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.56)}
.map-cover-button-glow-panel[hidden]{display:none!important}
body.dark .map-cover-button-glow-panel{background:rgba(255,255,255,.05)}

/* Embed Düzenleyici üst hızlı işlem butonları */
.studio-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 14px;
}

.studio-code-size-indicator {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.studio-code-size-indicator strong {
  color: var(--text);
  font-weight: 900;
}
.studio-code-size-indicator .size-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--purple);
  box-shadow: 0 0 0 4px rgba(121,32,222,.12);
}
body.dark .studio-code-size-indicator {
  background: rgba(255,255,255,.06);
}

.compact-action {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 10px;
  border-radius: 9px;
  white-space: nowrap;
}
.compact-action svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 700px) {
  .studio-top-actions {
    justify-content: flex-start;
  }
  .studio-code-size-indicator {
    margin-right: 0;
    width: 100%;
    justify-content: center;
  }
}

/* Genel kod boyutu göstergesi: diğer sekmelerde başlık düzenini bozmadan ayrı satırda görünür */
.code-size-top-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 10px 0 14px;
}
.code-size-top-row .studio-code-size-indicator {
  margin-right: 0;
}
.code-size-top-row + .button-form-scroll,
.code-size-top-row + .trigger-scroll,
.code-size-top-row + .flashcard-scroll,
.code-size-top-row + .image-deck-scroll,
.code-size-top-row + .slider-scroll {
  margin-top: 0;
}
@media (max-width: 700px) {
  .code-size-top-row .studio-code-size-indicator {
    width: 100%;
    justify-content: center;
  }
}

/* Flashcard Studio image inputs: clearer file upload + URL source support */
.face-image-hint {
  margin-left: auto;
  color: #8b8295;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
.flash-image-source-card {
  margin: 0 10px 10px;
  padding: 10px;
  display: grid;
  gap: 9px;
  border: 1px solid rgba(232, 229, 239, 0.95);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(249,245,255,.92));
}
.flash-cover-image-source-card {
  margin: 0;
}
.flash-image-upload-button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px dashed rgba(132, 41, 236, 0.45);
  border-radius: 14px;
  color: var(--purple-dark);
  background:
    radial-gradient(circle at 14% 12%, rgba(12, 201, 221, 0.18), transparent 38%),
    linear-gradient(135deg, #fff, #f4ebff);
  box-shadow: 0 10px 24px rgba(67, 36, 98, 0.08);
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.flash-image-upload-button span {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(132, 41, 236, 0.12);
  box-shadow: inset 0 0 0 1px rgba(132, 41, 236, 0.10);
  font-size: 15px;
  line-height: 1;
}
.flash-image-upload-button strong {
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}
.flash-image-upload-button:hover {
  transform: translateY(-1px);
  border-color: rgba(132, 41, 236, 0.74);
  box-shadow: 0 14px 30px rgba(67, 36, 98, 0.13);
  background:
    radial-gradient(circle at 14% 12%, rgba(12, 201, 221, 0.24), transparent 40%),
    linear-gradient(135deg, #fff, #efe1ff);
}
.flash-image-link-box {
  padding: 10px;
  border: 1px solid rgba(232, 229, 239, 0.95);
  border-radius: 12px;
  background: rgba(255,255,255,.70);
}
.flash-image-link-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
}
.flash-image-link-row .secondary-button {
  min-height: 40px;
  white-space: nowrap;
}
.flash-image-link-box small {
  display: block;
  margin-top: 7px;
  color: #958e9f;
  font-size: 9px;
  line-height: 1.45;
}
.flash-image-state {
  min-height: 42px !important;
  height: auto !important;
  padding: 9px 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border: 1px solid rgba(232, 229, 239, 0.95) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  color: #726a7f !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}
.flash-image-state button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(191,65,98,.26) !important;
  border-radius: 999px;
  background: rgba(255, 242, 246, 0.92) !important;
  color: #b92f57 !important;
  font-size: 9px !important;
  font-weight: 850;
}
.flash-image-state button:hover {
  background: #ffe8ef !important;
  border-color: rgba(191,65,98,.48) !important;
}
body.dark .face-image-hint { color: #b8aec6; }
body.dark .flash-image-source-card {
  background: linear-gradient(135deg, rgba(31,26,42,.92), rgba(38,30,52,.92));
  border-color: rgba(255,255,255,.08);
}
body.dark .flash-image-upload-button {
  color: #f4eaff;
  border-color: rgba(178, 128, 255, 0.42);
  background:
    radial-gradient(circle at 14% 12%, rgba(12, 201, 221, 0.13), transparent 38%),
    linear-gradient(135deg, rgba(36, 29, 49, 0.96), rgba(45, 34, 62, 0.96));
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
body.dark .flash-image-upload-button span { background: rgba(178,128,255,.16); }
body.dark .flash-image-link-box,
body.dark .flash-image-state {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
}
body.dark .flash-image-link-box small { color: #b8aec6; }
body.dark .flash-image-state { color: #d6cce0 !important; }
body.dark .flash-image-state button {
  background: rgba(96, 34, 59, .28) !important;
  border-color: rgba(255, 126, 161, .24) !important;
  color: #ff9bb5 !important;
}
@media(max-width:760px){.flash-image-link-row{grid-template-columns:1fr}.face-image-hint{display:none}}

/* Fullscreen Button Studio image URL support + visible image tracking */
.button-image-link-box {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(132, 41, 236, 0.16);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.76);
}
.button-image-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.button-image-link-row .secondary-button,
.button-image-link-button {
  min-height: 40px;
  white-space: nowrap;
}
.button-image-link-box small {
  display: block;
  margin-top: 7px;
  color: #958e9f;
  font-size: 9px;
  line-height: 1.45;
}
.button-image-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.button-image-list[hidden] { display: none !important; }
.button-image-list-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(232, 229, 239, 0.95);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
}
.button-image-list-item img {
  width: 48px;
  height: 42px;
  object-fit: cover;
  border-radius: 9px;
  background: #f1ecf7;
  box-shadow: inset 0 0 0 1px rgba(43, 29, 65, 0.08);
}
.button-image-list-item div { min-width: 0; }
.button-image-list-item strong,
.button-image-list-item span,
.button-image-list-item small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.button-image-list-item strong {
  font-size: 11px;
  color: var(--ink);
}
.button-image-list-item span {
  margin-top: 2px;
  color: #7420d0;
  font-size: 9px;
  font-weight: 850;
}
.button-image-list-item small {
  margin-top: 2px;
  color: #91899d;
  font-size: 8px;
}
.button-image-list-item button,
.button-image-clear-button {
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid rgba(191,65,98,.26);
  border-radius: 999px;
  background: rgba(255, 242, 246, 0.92);
  color: #b92f57;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}
.button-image-clear-button {
  width: 100%;
  margin-top: 10px;
}
.button-image-list-item button:hover,
.button-image-clear-button:hover {
  background: #ffe8ef;
  border-color: rgba(191,65,98,.48);
}
.button-image-source-card.source-disabled .button-image-link-box,
.button-image-source-card.source-disabled .button-image-list,
.button-image-source-card.source-disabled .button-image-clear-button {
  opacity: .55;
  filter: grayscale(.15);
}
body.dark .button-image-link-box,
body.dark .button-image-list-item {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.09);
}
body.dark .button-image-link-box small,
body.dark .button-image-list-item small { color: #b8aec6; }
body.dark .button-image-list-item strong { color: #efeafb; }
body.dark .button-image-list-item img { background: #181420; }
body.dark .button-image-list-item button,
body.dark .button-image-clear-button {
  background: rgba(96, 34, 59, .28);
  border-color: rgba(255, 126, 161, .24);
  color: #ff9bb5;
}
@media(max-width:760px){.button-image-link-row{grid-template-columns:1fr}.button-image-list-item{grid-template-columns:44px minmax(0,1fr);}.button-image-list-item button{grid-column:1/-1;width:100%;}}

/* Görsel Link Yardımcısı */
.image-link-workspace {
  grid-template-columns: minmax(520px, 0.9fr) minmax(500px, 1.1fr);
}
.image-link-editor,
.image-link-preview-panel {
  padding: 26px;
}
.image-link-editor {
  border-right: 1px solid var(--line);
}
.image-link-preview-panel {
  background: linear-gradient(155deg, #fbfafd, #f5f3f8);
}
.image-link-lead {
  margin-bottom: 18px;
}
.image-link-card {
  margin-top: 16px;
}
.image-link-helper-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.image-link-helper-top h2,
.image-link-card h2 {
  margin: 0 0 5px;
}
.image-link-helper-top small,
.image-link-card small {
  color: #958e9e;
  font-size: 10px;
  line-height: 1.45;
}
.image-link-external {
  min-width: 118px;
  text-decoration: none;
}
.image-link-paste {
  width: 100%;
  min-height: 210px;
  resize: vertical;
  padding: 14px;
  border: 1px solid #ded7e8;
  border-radius: 12px;
  background: #181522;
  color: #d8d4df;
  font: 11px/1.65 "SFMono-Regular", Consolas, monospace;
  outline: none;
}
.image-link-paste::placeholder {
  color: #777084;
}
.image-link-paste:focus {
  border-color: #a969eb;
  box-shadow: 0 0 0 3px rgba(132, 41, 236, 0.12);
}
.image-link-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 12px;
}
.image-link-action-row.compact {
  justify-content: space-between;
}
.image-link-status {
  margin: 12px 0;
  padding: 11px 12px;
  border: 1px solid #e2dbea;
  border-radius: 10px;
  background: #faf7ff;
  color: #6f6778;
  font-size: 10px;
  line-height: 1.45;
}
.image-link-status.success {
  border-color: #b8ead9;
  background: #effaf6;
  color: #2c775d;
}
.image-link-status.warning {
  border-color: #f3dda5;
  background: #fff9e8;
  color: #8a6413;
}
.image-link-status.error {
  border-color: #f3b9c4;
  background: #fff2f5;
  color: #b33b5a;
}
.image-link-output-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}
.image-link-output-row input {
  font: 10px/1.3 "SFMono-Regular", Consolas, monospace;
}
.image-link-save-grid {
  margin-top: 12px;
}
.image-link-badge-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.image-link-source-badge {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid #e2dbea;
  border-radius: 9px;
  background: #fff;
  color: #6d6478;
  font-size: 10px;
  font-weight: 800;
}
.image-link-source-badge[data-kind="html"] {
  color: #6418c4;
  background: #f1e7ff;
  border-color: #d9b9ff;
}
.image-link-source-badge[data-kind="bbcode"] {
  color: #0d6b70;
  background: #e6fbfc;
  border-color: #bdeff2;
}
.image-link-source-badge[data-kind="direct"] {
  color: #2c775d;
  background: #effaf6;
  border-color: #b8ead9;
}
.image-link-source-badge[data-kind="page"] {
  color: #8a6413;
  background: #fff9e8;
  border-color: #f3dda5;
}
.image-link-preview-card {
  min-height: 290px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid #ded9e4;
  border-radius: 15px;
  background-color: #eeecf2;
  background-image: radial-gradient(#d1ccd8 1px, transparent 1px);
  background-size: 18px 18px;
  overflow: auto;
}
.image-link-preview-card img {
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(43, 29, 65, 0.18);
  background: transparent;
}
.image-link-preview-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  text-align: center;
  color: #8b8396;
}
.image-link-preview-empty span {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 1px solid #d7d1df;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  font-size: 25px;
}
.image-link-preview-empty strong {
  color: #625a6e;
  font-size: 13px;
}
.image-link-preview-empty small {
  max-width: 260px;
  color: #928a9c;
  font-size: 10px;
  line-height: 1.45;
}
.image-link-library-tools {
  margin-top: 14px;
}
.image-link-search {
  margin-top: 0;
}
.image-link-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  max-height: 470px;
  overflow: auto;
  padding-right: 3px;
}
.image-link-library-item {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 12px;
  padding: 11px;
  border: 1px solid #e3deea;
  border-radius: 14px;
  background: rgba(255,255,255,.84);
}
.image-link-thumb {
  width: 94px;
  height: 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #f3eff9;
  border: 1px solid #e5dfea;
}
.image-link-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-link-info {
  min-width: 0;
}
.image-link-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.image-link-info-head strong {
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-link-info-head span {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  color: #6717c3;
  background: #f0e4ff;
  font-size: 8px;
  font-weight: 850;
}
.image-link-info code {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #80768d;
  font: 9px/1.4 "SFMono-Regular", Consolas, monospace;
}
.image-link-info small {
  display: block;
  margin-top: 4px;
  color: #958e9e;
  font-size: 9px;
}
.image-link-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.image-link-item-actions button {
  min-height: 27px;
  border: 1px solid #e4deea;
  border-radius: 8px;
  background: #fff;
  color: #63596e;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.image-link-item-actions button:hover {
  border-color: #cfc3df;
  background: #fbf8ff;
}
.image-link-item-actions .danger-link {
  color: #c73d62;
}
.image-link-empty {
  min-height: 160px;
}

body.dark .image-link-preview-panel {
  background: linear-gradient(155deg, #171324, #11101a);
}
body.dark .image-link-status,
body.dark .image-link-source-badge,
body.dark .image-link-library-item,
body.dark .image-link-item-actions button {
  background: #201b2c;
  border-color: #343043;
  color: #d8d1e4;
}
body.dark .image-link-preview-card {
  border-color: #343043;
  background-color: #171420;
  background-image: radial-gradient(#312b40 1px, transparent 1px);
}
body.dark .image-link-thumb,
body.dark .image-link-preview-empty span {
  background: #241f31;
  border-color: #383246;
}

/* Image Link Helper folder and view controls */
.image-link-preview-panel h2 small {
  margin-left: 7px;
  color: #958e9e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
}
.image-link-save-grid {
  grid-template-columns: minmax(0, 1fr) minmax(150px, .7fr) minmax(145px, .7fr);
  align-items: end;
}
.image-link-folder-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 9px;
}
.image-link-folder-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
  margin-bottom: 9px;
}
.image-link-folder-filter-row .danger-button {
  min-width: 124px;
  color: #c73d62;
}
.image-link-folder-filter-row .danger-button:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.image-link-library-view-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}
.image-link-view-toggle {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f6f2fa;
}
.image-link-view-toggle button {
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  padding: 0 9px;
  background: transparent;
  color: #81798c;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}
.image-link-view-toggle button.active {
  color: #6818c4;
  background: #fff;
  box-shadow: 0 3px 10px rgba(35,20,55,.09);
}
.image-link-folder-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  margin-top: 7px;
}
.image-link-folder-row label {
  color: #8d8598;
  font-size: 9px;
  font-weight: 850;
}
.image-link-item-folder {
  width: 100%;
  min-height: 28px;
  border: 1px solid #e4deea;
  border-radius: 8px;
  background: #fff;
  color: #63596e;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 750;
}
.image-link-list.view-grid {
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  align-items: start;
}
.image-link-list.view-grid .image-link-library-item {
  display: block;
  min-width: 0;
}
.image-link-list.view-grid .image-link-thumb {
  width: 100%;
  height: 126px;
  margin-bottom: 9px;
}
.image-link-list.view-grid .image-link-info-head {
  display: grid;
  gap: 5px;
}
.image-link-list.view-grid .image-link-info-head span {
  justify-self: start;
}
.image-link-list.view-grid .image-link-info code {
  max-width: 100%;
}
.image-link-list.view-grid .image-link-item-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.image-link-list.view-grid .image-link-item-actions button {
  padding: 0 5px;
}
.image-link-list.view-compact {
  gap: 7px;
}
.image-link-list.view-compact .image-link-library-item {
  grid-template-columns: minmax(0, 1fr);
  padding: 10px 11px;
}
.image-link-list.view-compact .image-link-thumb {
  display: none;
}
.image-link-list.view-compact .image-link-info-head {
  margin-bottom: 3px;
}
.image-link-list.view-compact .image-link-folder-row {
  max-width: 270px;
}
.image-link-list.view-compact .image-link-item-actions {
  margin-top: 7px;
}
body.dark .image-link-view-toggle {
  background: #181421;
  border-color: #343043;
}
body.dark .image-link-view-toggle button {
  color: #b8aec6;
}
body.dark .image-link-view-toggle button.active,
body.dark .image-link-item-folder {
  background: #241f31;
  border-color: #383246;
  color: #eee8f7;
}
@media(max-width:900px){
  .image-link-save-grid,
  .image-link-folder-create,
  .image-link-folder-filter-row,
  .image-link-library-view-row {
    grid-template-columns: 1fr;
  }
  .image-link-view-toggle {
    width: 100%;
    justify-content: stretch;
  }
  .image-link-view-toggle button {
    flex: 1;
  }
}

.foramind-library-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.foramind-library-button-row .secondary-button,
.foramind-library-button-row .text-button,
.library-link-button {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 10px;
}
.image-library-picker-open {
  overflow: hidden;
}
.image-library-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(17, 12, 28, 0.56);
  backdrop-filter: blur(6px);
  padding: 20px;
}
.image-library-picker-modal {
  width: min(1080px, calc(100vw - 32px));
  max-height: min(88vh, 920px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(226, 220, 238, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(24, 16, 40, 0.28);
}
.image-library-picker-head,
.image-library-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.image-library-picker-head h3 {
  margin: 4px 0 0;
  font-size: 18px;
}
.image-library-picker-close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.image-library-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 10px;
}
.image-library-picker-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 10px;
  padding-right: 3px;
}
.image-library-picker-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.image-library-picker-item.active {
  border-color: #cba6ff;
  box-shadow: 0 0 0 3px rgba(132, 41, 236, 0.08);
  background: #fbf7ff;
}
.image-library-picker-item img {
  width: 92px;
  height: 74px;
  border-radius: 10px;
  object-fit: cover;
  background: #f1eef6;
  border: 1px solid #ebe5f1;
}
.image-library-picker-copy {
  min-width: 0;
}
.image-library-picker-copy strong,
.image-library-picker-copy small,
.image-library-picker-copy code {
  display: block;
}
.image-library-picker-copy strong {
  font-size: 13px;
}
.image-library-picker-copy small {
  margin-top: 4px;
  color: #8c8598;
  font-size: 10px;
}
.image-library-picker-copy code {
  margin-top: 7px;
  font: 10px/1.45 Consolas, monospace;
  color: #5d5669;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.image-library-picker-controls {
  display: flex;
  justify-content: flex-end;
}
.image-library-picker-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.image-library-picker-check input {
  margin: 0;
  accent-color: var(--purple);
}
.compact-action {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 10px;
}
.image-library-picker-empty {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 6px;
  padding: 34px 18px;
  color: #938ca0;
}
.image-library-picker-empty span {
  font-size: 34px;
}
.image-library-picker-empty strong {
  color: #645c70;
}
.image-library-picker-actions {
  display: flex;
  gap: 8px;
}
@media (max-width: 860px) {
  .image-library-picker-modal {
    width: min(100vw - 20px, 1000px);
    padding: 14px;
  }
  .image-library-picker-toolbar {
    grid-template-columns: 1fr;
  }
  .image-library-picker-item {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .image-library-picker-controls {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .image-library-picker-item img {
    width: 76px;
    height: 62px;
  }
}


/* Kütüphane picker görünürlük düzeltmeleri */
.image-library-picker-overlay[hidden],
.image-library-picker-empty[hidden],
#imageLibraryPickerList[hidden],
#imageLibraryPickerConfirm[hidden] {
  display: none !important;
}


.code-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.html-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 11px;
  border: 1px solid rgba(121, 32, 222, 0.22);
  border-radius: 999px;
  background: rgba(121, 32, 222, 0.08);
  color: var(--purple);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: 0.18s ease;
}
.html-upload-button:hover {
  background: rgba(121, 32, 222, 0.14);
  transform: translateY(-1px);
}
.html-upload-state {
  padding: 9px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(48, 36, 69, 0.08);
  background: rgba(250, 248, 255, 0.82);
  color: #7e768a;
  font-size: 11px;
  line-height: 1.45;
}
.html-upload-state.success {
  color: #266e46;
  background: rgba(226, 250, 236, 0.9);
}
.html-upload-state.error {
  color: #9f2f42;
  background: rgba(255, 235, 239, 0.9);
}
body.dark .html-upload-state {
  background: rgba(255, 255, 255, 0.055);
  color: #cbc3d8;
  border-color: rgba(255, 255, 255, 0.09);
}
body.dark .html-upload-state.success {
  background: rgba(46, 125, 80, 0.2);
  color: #b8f4cc;
}
body.dark .html-upload-state.error {
  background: rgba(180, 52, 74, 0.2);
  color: #ffc4cf;
}
body.dark .html-upload-button {
  background: rgba(255, 255, 255, 0.08);
  color: #eadcff;
  border-color: rgba(255, 255, 255, 0.14);
}
@media (max-width: 700px) {
  .code-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .code-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
  }
}


.preview-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.preview-wide-button {
  min-height: 32px;
  padding: 7px 11px;
  font-size: 10px;
}
.studio-wide-preview-overlay[hidden] {
  display: none !important;
}
.studio-wide-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 11, 25, 0.68);
  backdrop-filter: blur(8px);
}
.studio-wide-preview-panel {
  width: min(1480px, calc(100vw - 28px));
  height: min(920px, calc(100vh - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(233, 226, 244, 0.92);
  border-radius: 22px;
  background: rgba(250, 248, 255, 0.97);
  box-shadow: 0 28px 90px rgba(14, 9, 28, 0.42);
}
.studio-wide-preview-head,
.studio-wide-preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.studio-wide-preview-head h2 {
  margin: 4px 0 2px;
  font-size: 18px;
  color: #2d263a;
}
.studio-wide-preview-head small,
.studio-wide-preview-foot {
  color: #80768d;
  font-size: 11px;
}
.studio-wide-preview-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.studio-wide-preview-canvas {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(218, 208, 232, 0.95);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 20%, rgba(121, 32, 222, 0.08), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.78), rgba(242,238,248,0.88));
  cursor: zoom-in;
}
.studio-wide-preview-canvas.panning {
  cursor: grabbing;
}
.studio-wide-preview-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 720px;
  height: 440px;
  transform-origin: 0 0;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(27, 18, 44, 0.22);
  background: transparent;
}
.studio-wide-preview-inner iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
}
.studio-wide-preview-shield {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  cursor: grab;
  background: transparent;
}
.studio-wide-preview-canvas.panning .studio-wide-preview-shield {
  cursor: grabbing;
}
.studio-wide-preview-foot {
  flex-wrap: wrap;
  border-top: 1px solid rgba(220, 212, 234, 0.8);
  padding-top: 2px;
}
.studio-wide-preview-foot span:first-child {
  font-weight: 800;
  color: #5d536d;
}
body.dark .studio-wide-preview-panel {
  background: rgba(31, 25, 42, 0.97);
  border-color: rgba(255, 255, 255, 0.12);
}
body.dark .studio-wide-preview-head h2,
body.dark .studio-wide-preview-foot span:first-child {
  color: #f4edf9;
}
body.dark .studio-wide-preview-head small,
body.dark .studio-wide-preview-foot {
  color: #c6bdd3;
}
body.dark .studio-wide-preview-canvas {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 22% 18%, rgba(170, 110, 255, 0.15), transparent 34%),
    linear-gradient(135deg, rgba(18,15,25,0.88), rgba(35,29,46,0.94));
}
@media (max-width: 820px) {
  .studio-wide-preview-panel {
    padding: 12px;
    gap: 9px;
  }
  .studio-wide-preview-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .studio-wide-preview-actions {
    width: 100%;
    justify-content: flex-start;
  }
}


body.studio-wide-preview-open {
  overflow: hidden !important;
}
.studio-wide-preview-overlay {
  overflow: hidden;
}
.studio-wide-preview-panel {
  overflow: hidden;
}
.studio-wide-preview-canvas {
  overscroll-behavior: contain;
}


/* Geniş demo: işlevli etkileşim + şeffaf alan görünürlüğü */
.studio-wide-preview-canvas {
  background-color: #f7f4fb;
  background-image:
    linear-gradient(45deg, rgba(123, 112, 141, 0.18) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(123, 112, 141, 0.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(123, 112, 141, 0.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(123, 112, 141, 0.18) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  cursor: default;
}
.studio-wide-preview-canvas.inspect-mode {
  cursor: grab;
}
.studio-wide-preview-canvas.inspect-mode.panning {
  cursor: grabbing;
}
.studio-wide-preview-shield {
  pointer-events: none;
}
.studio-wide-preview-canvas.inspect-mode .studio-wide-preview-shield {
  pointer-events: auto;
}
.studio-wide-preview-inner {
  box-shadow: 0 18px 45px rgba(27, 18, 44, 0.22), 0 0 0 1px rgba(33, 25, 48, 0.12);
}
body.dark .studio-wide-preview-canvas {
  background-color: #18131f;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.12) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.12) 75%);
}


/* Geniş demo alan düzeltmesi: daha geniş iframe ve yapay yuvarlak köşe yok */
.studio-wide-preview-panel {
  width: min(1680px, calc(100vw - 20px));
  height: min(980px, calc(100vh - 20px));
}
.studio-wide-preview-inner,
.studio-wide-preview-inner iframe,
.studio-wide-preview-shield {
  border-radius: 0 !important;
}
.studio-wide-preview-inner {
  box-shadow: 0 18px 45px rgba(27, 18, 44, 0.22), 0 0 0 1px rgba(33, 25, 48, 0.16);
}


/* Geniş demo gerçek geniş ekran: canvas doğrudan normal demo alanının büyütülmüş hâli */
.studio-wide-preview-overlay {
  padding: 0 !important;
  place-items: stretch !important;
}
.studio-wide-preview-panel {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 12px !important;
  gap: 8px !important;
  box-shadow: none !important;
}
.studio-wide-preview-canvas {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.studio-wide-preview-inner {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.studio-wide-preview-inner iframe,
.studio-wide-preview-shield {
  border-radius: 0 !important;
}
.studio-wide-preview-head,
.studio-wide-preview-foot {
  flex: 0 0 auto;
}


/* Geniş demo: dış ve iç kaydırma çubuklarını tamamen kapat */
html:has(body.studio-wide-preview-open),
body.studio-wide-preview-open {
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}
body.studio-wide-preview-open .app-shell,
body.studio-wide-preview-open main,
body.studio-wide-preview-open .workspace.active {
  overflow: hidden !important;
}
.studio-wide-preview-overlay {
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: 100dvw !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  box-sizing: border-box !important;
}
.studio-wide-preview-panel {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.studio-wide-preview-canvas {
  min-height: 0 !important;
  overflow: hidden !important;
  contain: size layout paint !important;
}
.studio-wide-preview-inner {
  overflow: hidden !important;
}
.studio-wide-preview-inner iframe {
  overflow: hidden !important;
  scrollbar-width: none !important;
}
.studio-wide-preview-inner iframe::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* Geniş demo: normal demo piksel boyutunu koru */
.studio-wide-preview-inner {
  max-width: none !important;
  max-height: none !important;
}
.studio-wide-preview-canvas {
  display: block !important;
}

/* Geniş demo: alt kesilme ve taşıma modu sağlamlaştırma */
.studio-wide-preview-panel {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
}
.studio-wide-preview-canvas {
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  align-self: stretch !important;
  touch-action: none;
}
.studio-wide-preview-canvas.inspect-mode,
.studio-wide-preview-canvas.inspect-mode .studio-wide-preview-shield {
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.studio-wide-preview-canvas.inspect-mode.panning,
.studio-wide-preview-canvas.inspect-mode.panning .studio-wide-preview-shield {
  cursor: grabbing !important;
}


/* Geniş demo: kesin sığdırma ve alt kenar kırpılmasını engelleme */
.studio-wide-preview-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.studio-wide-preview-canvas {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  overflow: hidden !important;
}
.studio-wide-preview-inner {
  position: absolute !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.studio-wide-preview-inner iframe {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  display: block !important;
  border: 0 !important;
  overflow: hidden !important;
}
.studio-wide-preview-shield {
  width: 100% !important;
  height: 100% !important;
}

/* Geniş demo fullscreen: normal demo wrap mantığıyla çalışır */
.studio-wide-preview-inner:fullscreen,
.studio-wide-preview-inner:-webkit-full-screen,
.studio-wide-preview-inner.studio-wide-preview-inner-fullscreening {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: transparent !important;
}
.studio-wide-preview-inner:fullscreen iframe,
.studio-wide-preview-inner:-webkit-full-screen iframe,
.studio-wide-preview-inner.studio-wide-preview-inner-fullscreening iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  display: block !important;
  background: transparent !important;
}
.studio-wide-preview-inner:fullscreen .studio-wide-preview-shield,
.studio-wide-preview-inner:-webkit-full-screen .studio-wide-preview-shield,
.studio-wide-preview-inner.studio-wide-preview-inner-fullscreening .studio-wide-preview-shield {
  pointer-events: none !important;
  display: none !important;
}
.studio-wide-preview-inner::backdrop {
  background: #0e0a15;
}


/* Geniş demo fullscreen: ürün wrapper'ını normal demo gibi tam ekran canvas içinde çalıştır */
.studio-wide-preview-canvas:fullscreen,
.studio-wide-preview-canvas:-webkit-full-screen,
.studio-wide-preview-canvas.studio-wide-preview-canvas-fullscreening {
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100dvw !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0e0a15 !important;
}
.studio-wide-preview-canvas:fullscreen .studio-wide-preview-inner,
.studio-wide-preview-canvas:-webkit-full-screen .studio-wide-preview-inner,
.studio-wide-preview-canvas.studio-wide-preview-canvas-fullscreening .studio-wide-preview-inner {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}
.studio-wide-preview-canvas:fullscreen .studio-wide-preview-inner iframe,
.studio-wide-preview-canvas:-webkit-full-screen .studio-wide-preview-inner iframe,
.studio-wide-preview-canvas.studio-wide-preview-canvas-fullscreening .studio-wide-preview-inner iframe {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  display: block !important;
  background: transparent !important;
}
.studio-wide-preview-canvas:fullscreen .studio-wide-preview-shield,
.studio-wide-preview-canvas:-webkit-full-screen .studio-wide-preview-shield,
.studio-wide-preview-canvas.studio-wide-preview-canvas-fullscreening .studio-wide-preview-shield {
  display: none !important;
  pointer-events: none !important;
}
.studio-wide-preview-canvas::backdrop {
  background: #0e0a15 !important;
}

/* Tam ekran butonu: üst kayıt alanı ve güvenli silme onayı */
.button-project-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.button-project-name-field {
  min-width: 0;
}
.button-top-save-button {
  min-height: 44px;
  padding-inline: 18px;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(121, 32, 222, 0.18);
}
.saved-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 7px;
  border-radius: 13px;
}
.saved-item-row.active {
  background: linear-gradient(135deg, rgba(240, 230, 255, 0.85), rgba(255, 255, 255, 0.35));
}
.saved-item-row .saved-item {
  width: 100%;
}
.saved-record-delete {
  align-self: center;
  border: 1px solid rgba(235, 84, 102, 0.22);
  border-radius: 999px;
  padding: 7px 9px;
  color: #c0364d;
  background: rgba(255, 235, 239, 0.72);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.saved-record-delete:hover {
  transform: translateY(-1px);
  background: #ffe1e7;
  border-color: rgba(235, 84, 102, 0.42);
}
.button-delete-confirm-overlay[hidden] {
  display: none !important;
}
.button-delete-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 12, 27, 0.62);
  backdrop-filter: blur(8px);
}
.button-delete-confirm-card {
  width: min(460px, calc(100vw - 30px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(238, 226, 246, 0.9);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(249,245,255,0.96));
  box-shadow: 0 26px 78px rgba(16, 10, 28, 0.34);
}
.button-delete-confirm-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #bf203d;
  background: #ffe4ea;
  border: 1px solid rgba(191, 32, 61, 0.16);
  font-size: 22px;
  font-weight: 900;
}
.button-delete-confirm-card h2 {
  margin: 4px 0 8px;
  color: #2d243b;
  font-size: 18px;
}
.button-delete-confirm-card p {
  margin: 0;
  color: #766b86;
  font-size: 12px;
  line-height: 1.55;
}
.button-delete-confirm-card p strong {
  color: #30263e;
}
.button-delete-confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.danger-confirm-button {
  background: linear-gradient(135deg, #e84e63, #b91f3c) !important;
  box-shadow: 0 14px 30px rgba(185, 31, 60, 0.22) !important;
}
body.dark .saved-record-delete {
  color: #ff9aaa;
  border-color: rgba(255, 154, 170, 0.18);
  background: rgba(255, 126, 148, 0.12);
}
body.dark .button-delete-confirm-card {
  border-color: rgba(255,255,255,0.12);
  background: linear-gradient(135deg, rgba(32,26,43,0.98), rgba(25,20,34,0.98));
}
body.dark .button-delete-confirm-card h2,
body.dark .button-delete-confirm-card p strong {
  color: #f4edf9;
}
body.dark .button-delete-confirm-card p {
  color: #c6bdd3;
}
@media (max-width: 760px) {
  .button-project-top-row,
  .saved-item-row {
    grid-template-columns: 1fr;
  }
  .button-top-save-button,
  .saved-record-delete {
    width: 100%;
  }
  .button-delete-confirm-card {
    grid-template-columns: 1fr;
  }
  .button-delete-confirm-actions {
    flex-direction: column-reverse;
  }
}

/* Dark mode library/record contrast safeguards — visual-only fixes */
body.dark .library-panel,
body.dark .button-library,
body.dark .flashcard-list-panel,
body.dark .slider-library-panel,
body.dark .image-deck-library-panel,
body.dark .image-link-preview-panel {
  background: #1f1a28 !important;
  color: #f4edf9 !important;
}
body.dark .preview-panel,
body.dark .map-preview-panel,
body.dark .flashcard-preview-panel,
body.dark .trigger-preview-panel,
body.dark .slider-preview-panel,
body.dark .image-deck-preview-panel {
  color: #f4edf9;
}
body.dark .saved-list,
body.dark .flash-deck-list,
body.dark .image-link-list,
body.dark .image-library-picker-list {
  color: #f4edf9;
  scrollbar-color: #5b4f6b #1b1623;
}
body.dark .saved-list::-webkit-scrollbar,
body.dark .flash-deck-list::-webkit-scrollbar,
body.dark .image-link-list::-webkit-scrollbar,
body.dark .image-library-picker-list::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
body.dark .saved-list::-webkit-scrollbar-track,
body.dark .flash-deck-list::-webkit-scrollbar-track,
body.dark .image-link-list::-webkit-scrollbar-track,
body.dark .image-library-picker-list::-webkit-scrollbar-track {
  background: #1b1623;
  border-radius: 999px;
}
body.dark .saved-list::-webkit-scrollbar-thumb,
body.dark .flash-deck-list::-webkit-scrollbar-thumb,
body.dark .image-link-list::-webkit-scrollbar-thumb,
body.dark .image-library-picker-list::-webkit-scrollbar-thumb {
  background: #5b4f6b;
  border-radius: 999px;
}
body.dark .saved-item,
body.dark .saved-item-row .saved-item,
body.dark .flashcard-list-item,
body.dark .flash-deck-item,
body.dark .image-link-library-item,
body.dark .image-library-picker-item,
body.dark .deck-save-dock,
body.dark .image-link-library-tools,
body.dark .image-link-preview-card,
body.dark .image-link-badge-box,
body.dark .image-link-status,
body.dark .image-link-source-badge,
body.dark .image-link-view-toggle,
body.dark .image-link-item-folder,
body.dark .image-library-picker-check {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f4edf9 !important;
}
body.dark .saved-item:hover,
body.dark .saved-item-row:hover .saved-item,
body.dark .flashcard-list-item:hover,
body.dark .flash-deck-item:hover,
body.dark .image-link-library-item:hover,
body.dark .image-library-picker-item:hover,
body.dark .image-link-item-actions button:hover,
body.dark .image-library-picker-check:hover,
body.dark .secondary-button:hover,
body.dark .small-icon:hover,
body.dark .icon-button:hover,
body.dark .library-link-button:hover,
body.dark .foramind-library-button-row .text-button:hover {
  background: rgba(255, 255, 255, 0.085) !important;
  border-color: rgba(198, 151, 255, 0.42) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
body.dark .saved-item.active,
body.dark .saved-item-row.active,
body.dark .saved-item-row.active .saved-item,
body.dark .flashcard-list-item.active,
body.dark .flash-deck-item.active,
body.dark .image-link-view-toggle button.active,
body.dark .image-library-picker-item.active {
  background: linear-gradient(135deg, rgba(121, 32, 222, 0.28), rgba(209, 58, 191, 0.12)) !important;
  border-color: rgba(187, 132, 255, 0.62) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(187, 132, 255, 0.18), 0 10px 26px rgba(0, 0, 0, 0.18) !important;
}
body.dark .saved-item strong,
body.dark .flashcard-list-item strong,
body.dark .flashcard-list-item b,
body.dark .deck-copy strong,
body.dark .image-link-info-head strong,
body.dark .image-library-picker-copy strong,
body.dark .panel-heading h2,
body.dark .section-title-row h1,
body.dark .section-title-row h2,
body.dark .card-heading strong {
  color: #f8f3ff !important;
}
body.dark .saved-item span,
body.dark .library-empty,
body.dark .library-empty small,
body.dark .flashcard-list-item small,
body.dark .deck-copy small,
body.dark .image-link-info code,
body.dark .image-link-info small,
body.dark .image-link-preview-empty,
body.dark .image-library-picker-copy small,
body.dark .image-library-picker-copy code,
body.dark .image-library-picker-empty,
body.dark .field-label,
body.dark .eyebrow {
  color: #beb5cc !important;
}
body.dark .standard-input,
body.dark .standard-textarea,
body.dark textarea,
body.dark .search-wrap input,
body.dark .select-wrap select,
body.dark .url-input,
body.dark .url-input input,
body.dark input[type="search"],
body.dark input[type="text"],
body.dark input[type="number"],
body.dark select {
  background: #24202c !important;
  color: #f4edf9 !important;
  border-color: #443b52 !important;
}
body.dark .standard-input::placeholder,
body.dark .standard-textarea::placeholder,
body.dark textarea::placeholder,
body.dark input::placeholder {
  color: #90879d !important;
}
body.dark select option {
  background: #24202c;
  color: #f4edf9;
}
body.dark .secondary-button,
body.dark .foramind-library-button-row .secondary-button,
body.dark .foramind-library-button-row .text-button,
body.dark .library-link-button,
body.dark .image-link-item-actions button,
body.dark .image-library-picker-close,
body.dark .image-library-picker-check,
body.dark .html-upload-button {
  background: #24202c !important;
  border-color: #443b52 !important;
  color: #f4edf9 !important;
}
body.dark .danger-button,
body.dark .saved-record-delete,
body.dark .deck-delete,
body.dark .image-link-item-actions .danger-link {
  color: #ff9aaa !important;
  border-color: rgba(255, 154, 170, 0.22) !important;
  background: rgba(255, 126, 148, 0.12) !important;
}
body.dark .danger-button:hover,
body.dark .saved-record-delete:hover,
body.dark .deck-delete:hover,
body.dark .image-link-item-actions .danger-link:hover {
  color: #ffd4dc !important;
  background: rgba(255, 126, 148, 0.2) !important;
  border-color: rgba(255, 154, 170, 0.42) !important;
}
body.dark .image-link-info-head span,
body.dark .image-link-source-badge[data-kind="html"],
body.dark .image-link-source-badge[data-kind="bbcode"],
body.dark .image-link-source-badge[data-kind="direct"],
body.dark .image-link-source-badge[data-kind="page"] {
  color: #f4eaff !important;
  background: rgba(121, 32, 222, 0.3) !important;
  border-color: rgba(187, 132, 255, 0.35) !important;
}
body.dark .image-link-thumb,
body.dark .image-link-preview-empty span,
body.dark .image-library-picker-item img {
  background: #181420 !important;
  border-color: #3b3349 !important;
}
body.dark .image-library-picker-overlay {
  background: rgba(10, 7, 17, 0.72) !important;
}
body.dark .image-library-picker-modal {
  background: rgba(31, 26, 41, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f4edf9 !important;
}
body.dark .image-library-picker-head h3,
body.dark .image-library-picker-empty strong {
  color: #f8f3ff !important;
}
body.dark .image-link-view-toggle button {
  color: #c9bfd8 !important;
}
body.dark .image-link-view-toggle button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Embed Düzenleyici: Akıllı Kod Analizi */
.studio-code-analysis-card {
  margin: 14px 0 16px;
  padding: 14px;
  border: 1px solid rgba(221, 211, 238, 0.9);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(248,244,255,0.92));
  box-shadow: 0 14px 34px rgba(64, 40, 110, 0.08);
}
.studio-code-analysis-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.studio-code-analysis-head h3 {
  margin: 3px 0 4px;
  font-size: 14px;
  color: #2d263a;
}
.studio-code-analysis-head p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: #7a7187;
}
.studio-code-analysis-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.studio-analysis-empty {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed rgba(177, 154, 212, 0.65);
  border-radius: 12px;
  color: #877b96;
  font-size: 11px;
  background: rgba(255,255,255,0.52);
}
.studio-analysis-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: min(240px, 100%);
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 13px;
  border: 1px solid rgba(204, 190, 224, 0.86);
  background: rgba(255,255,255,0.72);
  color: #655a72;
  font-size: 10.5px;
  line-height: 1.35;
}
.studio-analysis-chip b {
  color: #332842;
  font-size: 11px;
}
.studio-analysis-chip.strong {
  border-color: rgba(74, 163, 108, 0.45);
  background: rgba(232, 247, 237, 0.86);
}
.studio-analysis-chip.weak {
  border-color: rgba(226, 177, 79, 0.46);
  background: rgba(255, 247, 224, 0.9);
}
.studio-analysis-chip.type {
  border-color: rgba(121, 32, 222, 0.24);
  background: rgba(121, 32, 222, 0.07);
}
body.dark .studio-code-analysis-card {
  border-color: rgba(255,255,255,0.12);
  background: linear-gradient(135deg, rgba(39, 31, 52, 0.94), rgba(31, 25, 42, 0.96));
  box-shadow: 0 14px 34px rgba(0,0,0,0.24);
}
body.dark .studio-code-analysis-head h3,
body.dark .studio-analysis-chip b {
  color: #f4edf9;
}
body.dark .studio-code-analysis-head p,
body.dark .studio-analysis-empty,
body.dark .studio-analysis-chip {
  color: #cabfd8;
}
body.dark .studio-analysis-empty,
body.dark .studio-analysis-chip {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.12);
}
body.dark .studio-analysis-chip.strong {
  background: rgba(47, 104, 70, 0.25);
  border-color: rgba(112, 214, 151, 0.28);
}
body.dark .studio-analysis-chip.weak {
  background: rgba(136, 97, 29, 0.24);
  border-color: rgba(238, 187, 86, 0.28);
}
body.dark .studio-analysis-chip.type {
  background: rgba(174, 127, 255, 0.12);
  border-color: rgba(174, 127, 255, 0.26);
}
@media (max-width: 760px) {
  .studio-code-analysis-head {
    flex-direction: column;
  }
  .studio-code-analysis-head .compact-action {
    width: 100%;
  }
}

/* Akıllı kod analizi: manuel analiz aksiyonları */
.studio-code-analysis-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .studio-code-analysis-actions {
    width: 100%;
    justify-content: stretch;
  }
  .studio-code-analysis-actions .compact-action {
    flex: 1 1 180px;
  }
}


/* Akıllı Kod Analizi: açılır/kapanır kart */
.studio-code-analysis-card.collapsed {
  padding-bottom: 12px;
}
.studio-code-analysis-body[hidden] {
  display: none !important;
}
.studio-code-analysis-body {
  display: grid;
  gap: 10px;
}
.studio-analysis-collapse-toggle {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(191, 172, 222, 0.7);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: #6e3db7;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(64, 40, 110, 0.08);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.studio-analysis-collapse-toggle:hover {
  transform: translateY(-1px);
  background: rgba(248, 244, 255, 0.98);
  border-color: rgba(121, 32, 222, 0.32);
  color: #7920de;
}
.studio-analysis-collapse-toggle span {
  display: block;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform .18s ease;
}
.studio-code-analysis-card:not(.collapsed) .studio-analysis-collapse-toggle span {
  transform: translateY(1px) rotate(180deg);
}
.studio-code-analysis-card.collapsed .studio-code-analysis-head {
  margin-bottom: 0;
}
body.dark .studio-analysis-collapse-toggle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #d9c3ff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
body.dark .studio-analysis-collapse-toggle:hover {
  background: rgba(174, 127, 255, 0.14);
  border-color: rgba(174, 127, 255, 0.32);
  color: #ffffff;
}
@media (max-width: 760px) {
  .studio-analysis-collapse-toggle {
    align-self: flex-start;
  }
}

/* Embed Düzenleyici: Demo koruması / süreli kullanım */
.studio-demo-guard-card {
  margin-top: 10px;
}
.studio-demo-guard-body {
  gap: 12px;
}
.studio-demo-guard-settings {
  display: grid;
  gap: 10px;
  transition: opacity .16s ease, filter .16s ease;
}
.studio-demo-guard-settings.disabled {
  opacity: .58;
  filter: grayscale(.08);
}
.studio-demo-guard-settings textarea.standard-input {
  min-height: 76px;
  resize: vertical;
  line-height: 1.45;
}
.studio-demo-guard-note {
  padding: 10px 12px;
  border: 1px dashed rgba(177, 154, 212, 0.62);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.52);
  color: #877b96;
  font-size: 11px;
  line-height: 1.45;
}
body.dark .studio-demo-guard-note {
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.12);
  color: #cabfd8;
}

/* Embed Düzenleyici: gelişmiş demo koruması görsel ayarları */
.studio-demo-logo-toggle {
  min-height: 100%;
  align-self: stretch;
}
.studio-demo-expired-image-controls {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(219, 210, 234, 0.82);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.42);
}
.studio-demo-expired-image-controls[hidden],
#studioDemoBlurWrap[hidden] {
  display: none !important;
}
body.dark .studio-demo-expired-image-controls {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.1);
}