@font-face {
  font-family: "Exo 2";
  src: url("../../images/home-ivory/exo-2-latin-ext-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ed-bg: #ebe9df;
  --ed-panel: #f8f6ee;
  --ed-paper: #fffef9;
  --ed-ink: #1f2a17;
  --ed-muted: #68705e;
  --ed-border: #d9d7ca;
  --ed-olive: #566b2f;
  --ed-olive-deep: #26351d;
  --ed-olive-soft: #e5ead8;
  --ed-gold: #d9b83f;
  --ed-gold-bright: #f5ce46;
  --ed-red: #d45145;
  --ed-shadow: 0 10px 30px rgba(44, 52, 30, .1);
}

* { scrollbar-width: thin; scrollbar-color: #bbb9aa transparent; }
body.editor-page {
  background: var(--ed-bg);
  color: var(--ed-ink);
  font-family: "Exo 2", "Segoe UI", sans-serif;
  overflow: hidden;
}
button, input { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(217, 184, 63, .48); outline-offset: 2px; }

/* Header */
body.editor-page .editor-header {
  position: relative; height: 66px; padding: 0 18px; background: var(--ed-olive-deep);
  border: 0; box-shadow: 0 5px 18px rgba(17, 26, 11, .22); color: #fffdf4;
}
.brand-group, .header-center, .header-nav, .header-logo, .project-title-wrap { display: flex; align-items: center; }
.brand-group { gap: 14px; min-width: 0; }
body.editor-page .header-logo { gap: 10px; color: #fffdf4; }
.brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: var(--ed-gold); color: var(--ed-olive-deep); font-size: 21px; font-weight: 900;
  transform: rotate(-3deg); box-shadow: inset 0 -3px 0 rgba(89, 67, 7, .16);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1; letter-spacing: .08em; }
.brand-copy strong { font-size: 15px; }
.brand-copy small { margin-top: 5px; color: #d8d9ca; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.header-divider { width: 1px; height: 32px; background: rgba(255,255,255,.16); }
.project-title-wrap { gap: 8px; min-width: 0; color: #bfc5b2; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.project-title-wrap input {
  width: 170px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: #fffdf4; font-size: 14px; font-weight: 700; outline: 0;
}
.project-title-wrap input:hover { background: rgba(255,255,255,.07); }
.project-title-wrap input:focus { background: #fffdf5; color: var(--ed-ink); border-color: var(--ed-gold); }
.header-center { position: static; min-width: 0; justify-self: center; gap: 7px; overflow: hidden; white-space: nowrap; color: #bfc5b2; font-size: 13px; font-weight: 650; }
.header-center #saveState { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-state-dot { width: 7px; height: 7px; border-radius: 50%; background: #8fc55a; box-shadow: 0 0 0 4px rgba(143,197,90,.1); }
body.editor-page .header-nav { gap: 7px; }
body.editor-page .editor-header { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 12px; }
body.editor-page .header-nav { flex-shrink: 0; white-space: nowrap; }
body.editor-page .header-nav a, body.editor-page .header-nav button {
  min-height: 36px; padding: 0 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  background: rgba(255,255,255,.06); color: #eeefe7; font-size: 13px; font-weight: 750;
}
body.editor-page .header-nav a:hover, body.editor-page .header-nav button:hover { background: rgba(255,255,255,.13); color: #fff; transform: none; }
body.editor-page .header-nav .header-icon-link { width: 36px; padding: 0; justify-content: center; font-size: 18px; }
body.editor-page .header-nav .header-action-primary { background: var(--ed-gold); border-color: var(--ed-gold); color: #202614; box-shadow: inset 0 -2px 0 rgba(85,64,5,.14); }
body.editor-page .header-nav .header-action-primary:hover { background: var(--ed-gold-bright); color: #202614; }

/* Shell */
.editor-container {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(540px, 42vw); height: calc(100vh - 66px);
  gap: 8px; padding: 8px; overflow: hidden; background-color: var(--ed-bg);
  background-image: radial-gradient(rgba(61,76,42,.09) .7px, transparent .7px); background-size: 16px 16px;
}
.blockly-panel, .stage-panel { min-width: 0; overflow: hidden; border: 1px solid var(--ed-border); border-radius: 14px; background: var(--ed-panel); box-shadow: var(--ed-shadow); }
.blockly-panel { position: relative; display: flex; flex-direction: column; }

/* Workspace chrome */
.workspace-tabs { height: 49px; display: flex; align-items: stretch; padding: 0 8px; border-bottom: 1px solid var(--ed-border); background: var(--ed-paper); }
.workspace-tab { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 15px; border: 0; background: transparent; color: var(--ed-muted); font-size: 14px; font-weight: 750; cursor: pointer; }
.workspace-tab .studio-tab-icon { --tab-icon: none; width: 18px; height: 18px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--tab-icon) center/contain no-repeat; mask: var(--tab-icon) center/contain no-repeat; }
.studio-tab-icon-code { --tab-icon: url('../assets/icons/tabs/code-blocks.svg') !important; }
.studio-tab-icon-costumes { --tab-icon: url('../assets/icons/tabs/costumes.svg') !important; }
.studio-tab-icon-sounds { --tab-icon: url('../assets/icons/tabs/sounds.svg') !important; }
.workspace-tab::after { content: ""; position: absolute; height: 3px; left: 14px; right: 14px; bottom: -1px; border-radius: 3px 3px 0 0; background: var(--ed-gold); transform: scaleX(0); transition: transform .18s ease; }
.workspace-tab:hover { color: var(--ed-ink); }
.workspace-tab.active { color: var(--ed-olive-deep); }
.workspace-tab.active::after { transform: scaleX(1); }
.workspace-tools { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.tool-button { height: 31px; min-width: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border: 1px solid var(--ed-border); border-radius: 9px; background: #f7f6ee; color: var(--ed-muted); font-size: 16px; font-weight: 800; cursor: pointer; }
.tool-button:hover { border-color: #b9b6a5; background: #fff; color: var(--ed-olive); }
.tool-button:disabled { opacity: .38; cursor: not-allowed; }
.tool-button-label { margin-left: 3px; color: var(--ed-olive-deep); font-size: 13px; border-color: #d6c576; background: #fff8d6; }
.tool-button-check { border-color: #b8c6a4; background: #edf2e5; color: #40582b; }
.workspace-context { height: 35px; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; padding: 0 13px 0 20px; border-bottom: 1px solid var(--ed-border); background: #f4f3eb; color: var(--ed-muted); font-size: 13px; }
.workspace-context[hidden] { display: none; }
.workspace-context > div { display: flex; align-items: center; gap: 6px; }
.workspace-context strong { color: var(--ed-ink); }
.starter-hint:not([hidden]) { display: inline-flex; align-items: center; margin-right: auto; color: var(--ed-olive); font-size: 13px; font-weight: 750; }
.block-count { padding: 4px 8px; border: 1px solid var(--ed-border); border-radius: 999px; background: var(--ed-paper); }
.workspace-view { position: relative; flex: 1 1 auto; min-height: 0; }
#blocklyDiv { position: absolute; inset: 0; }
.extensions-dock-button { position:absolute; z-index:70; left:6px; bottom:8px; width:112px; min-height:43px; display:flex; align-items:center; justify-content:center; border:1px solid var(--ed-olive); border-radius:5px; background:var(--ed-olive); color:#fff; font:800 13px "Exo 2",sans-serif; cursor:pointer; }
.extensions-dock-button:hover { filter:brightness(.9); }
.device-context-button { position:absolute; z-index:70; left:6px; bottom:68px; width:112px; min-height:38px; padding:5px 8px; border:1px solid var(--ed-olive); border-radius:10px; background:#fffef8; color:var(--ed-olive); font:800 13px "Exo 2",sans-serif; cursor:pointer; box-shadow:0 4px 12px #38286625; }
.device-context-button:hover { filter:brightness(.9); }
.active-device-badge:not([hidden]) { margin-right:auto; padding:4px 9px; border-radius:99px; background:#e1f1ed; color:#187670; font-size:13px; font-weight:800; }
.flyout-scroll-buttons { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 6px; }
.flyout-scroll-buttons[hidden] { display: none; }
.flyout-scroll-buttons button { width: 30px; height: 30px; border: 1px solid rgba(86,107,47,.35); border-radius: 50%; background: #fffef9; color: var(--ed-olive); font-size: 13px; line-height: 1; cursor: pointer; box-shadow: 0 3px 9px rgba(49,59,34,.18); }
.flyout-scroll-buttons button:hover:not(:disabled) { background: var(--ed-olive); color: #fff; }
.flyout-scroll-buttons button:disabled { opacity: .35; cursor: default; }

/* Blockly */
[id^="blocklyGridPattern"] line { stroke: #c9d5c8 !important; stroke-width: .85px !important; }
.blocklyFlyoutBackground { fill: #ffffff !important; fill-opacity: 1 !important; }
.blocklyToolbox, .blocklyToolboxDiv { border-right: 1px solid rgba(86,107,47,.24) !important; background: linear-gradient(180deg,rgba(121,132,89,.26),rgba(153,158,119,.17)) !important; box-shadow: 7px 0 20px rgba(58,64,43,.08); backdrop-filter: blur(10px) saturate(115%); }
.blocklyToolboxCategoryGroup, .blocklyToolboxContents { background: transparent !important; }
.blocklyTreeRow { height: 42px !important; padding: 0 9px !important; margin: 2px 7px !important; border-radius: 9px; transition: background .15s ease; }
.blocklyTreeRowContentContainer { display: flex; align-items: center; height: 100%; }
.blocklyTreeLabel { font-family: "Exo 2", sans-serif !important; font-size: 14px !important; font-weight: 720 !important; color: #3c4336 !important; }
.blocklyToolboxCategory:hover > .blocklyTreeRowContentContainer, .blocklySelected > .blocklyTreeRowContentContainer { background: transparent !important; }
.blocklyTreeRow:hover { background: #eeede5 !important; }
.blocklyTreeSelected { background: #e8eadf !important; }
.blocklyScrollbarHandle { fill: #b7b6aa !important; }
.blocklyScrollbarBackground { fill: transparent !important; }
.blocklyZoom, .blocklyTrash { filter: drop-shadow(0 3px 5px rgba(34,44,23,.15)); }

/* Asset tabs */
.asset-view { flex: 1; overflow: auto; padding: 28px; background-color: #f5f3e9; background-image: linear-gradient(rgba(86,107,47,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(86,107,47,.035) 1px, transparent 1px); background-size: 24px 24px; }
.asset-view[hidden] { display: none; }
.asset-hero { display: flex; align-items: center; gap: 15px; max-width: 680px; margin-bottom: 24px; }
.asset-hero > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--ed-olive); color: white; font-size: 24px; }
.asset-hero strong { font-size: 19px; }
.asset-hero p { margin-top: 4px; color: var(--ed-muted); font-size: 14px; }
.asset-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; max-width: 680px; }
.asset-card { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; border: 1px solid var(--ed-border); border-radius: 14px; background: var(--ed-paper); color: var(--ed-ink); cursor: pointer; }
.asset-card:hover, .asset-card-active { border-color: var(--ed-gold); box-shadow: 0 8px 18px rgba(53,62,37,.08); }
.asset-preview, .asset-add { width: 92px; height: 90px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 12px; background: #eee9d9; }
.asset-preview img { width: 72px; height: 72px; object-fit: contain; }
.asset-add { color: var(--ed-olive); font-size: 34px; }
.asset-card strong { font-size: 14px; }
.asset-card small { margin-top: 3px; color: var(--ed-muted); font-size: 12px; }
.costume-editor { min-height: 0; height: 100%; display: grid; grid-template-columns: 168px minmax(0,1fr); background: #f7f6ef; }
.costume-sidebar { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--ed-border); background: #eef0e7; }
.costume-sidebar-title { display: flex; align-items: center; justify-content: space-between; padding: 13px 12px 9px; color: var(--ed-ink); font-size: 13px; }
.costume-sidebar-title span { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: var(--ed-olive-soft); color: var(--ed-olive); text-align: center; font-size: 12px; font-weight: 800; }
.costume-list { min-height: 0; flex: 1; overflow-y: auto; padding: 0 9px 10px; }
.costume-item { position: relative; width: 100%; display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 8px; margin-bottom: 7px; padding: 7px; border: 1px solid #d4d7ca; border-radius: 11px; background: #fffef9; color: var(--ed-ink); cursor: pointer; text-align: left; }
.costume-item.active { border: 2px solid var(--ed-gold); padding: 6px; box-shadow: 0 0 0 3px rgba(217,184,63,.13); }
.costume-item-preview { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: repeating-conic-gradient(#edf0e8 0 25%,#fff 0 50%) 50%/14px 14px; }
.costume-item-preview img { width: 46px; height: 46px; object-fit: contain; }
.costume-item-copy { min-width: 0; display: flex; flex-direction: column; }
.costume-item-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.costume-item-copy small { margin-top: 3px; color: var(--ed-muted); font-size: 12px; }
.costume-delete { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; }
.costume-add-actions { display: grid; gap: 5px; padding: 9px; border-top: 1px solid var(--ed-border); }
.costume-add-actions button { padding: 8px; border: 1px dashed #9da68b; border-radius: 9px; background: #fffef9; color: var(--ed-olive); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }
.paint-workspace { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.paint-topbar, .paint-toolbar { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-bottom: 1px solid var(--ed-border); background: #fffef9; }
.paint-topbar { justify-content: space-between; }
.costume-name-field { display: flex; align-items: center; gap: 7px; color: var(--ed-muted); font-size: 12px; font-weight: 800; }
.costume-name-field input { width: 180px; padding: 7px 9px; border: 1px solid var(--ed-border); border-radius: 8px; background: #f7f6ef; color: var(--ed-ink); font: inherit; font-size: 13px; font-weight: 750; }
.paint-history { display: flex; gap: 5px; }
.paint-history button, .paint-tool, .paint-convert { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--ed-border); border-radius: 8px; background: #fffef9; color: var(--ed-ink); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }
.paint-history button:disabled { opacity: .38; cursor: not-allowed; }
.paint-tool.active { border-color: var(--ed-gold); background: #fff6d1; color: #4c5f29; box-shadow: 0 0 0 2px rgba(217,184,63,.12); }
.paint-toolbar { flex-wrap: wrap; }
.paint-icon { --paint-icon: none; width: 16px; height: 16px; flex: 0 0 auto; display: inline-block; background: currentColor; -webkit-mask: var(--paint-icon) center/contain no-repeat; mask: var(--paint-icon) center/contain no-repeat; }
.paint-history .paint-icon { width: 15px; height: 15px; }
.paint-icon-brush { --paint-icon: url('../assets/icons/paint/brush.svg'); }
.paint-icon-eraser { --paint-icon: url('../assets/icons/paint/eraser.svg'); }
.paint-icon-fill { --paint-icon: url('../assets/icons/paint/fill.svg'); }
.paint-icon-line { --paint-icon: url('../assets/icons/paint/line.svg'); }
.paint-icon-rectangle { --paint-icon: url('../assets/icons/paint/rectangle.svg'); }
.paint-icon-ellipse { --paint-icon: url('../assets/icons/paint/ellipse.svg'); }
.paint-icon-undo { --paint-icon: url('../assets/icons/paint/undo.svg'); }
.paint-icon-redo { --paint-icon: url('../assets/icons/paint/redo.svg'); }
.paint-icon-convert { --paint-icon: url('../assets/icons/paint/convert.svg'); }
.paint-icon-eyedropper { --paint-icon: url('../assets/icons/paint/eyedropper.svg'); }
.paint-icon-download { --paint-icon: url('../assets/icons/paint/download.svg'); }
.paint-icon-duplicate { --paint-icon: url('../assets/icons/paint/duplicate.svg'); }
.paint-icon-settings { --paint-icon: url('../assets/icons/paint/settings.svg'); }
.paint-icon-more { --paint-icon: url('../assets/icons/paint/more.svg'); }
.paint-color, .paint-size { display: flex; align-items: center; gap: 6px; color: var(--ed-muted); font-size: 12px; font-weight: 800; }
.paint-color input { width: 34px; height: 28px; padding: 2px; border: 1px solid var(--ed-border); border-radius: 7px; background: white; }
.paint-size input { width: 95px; accent-color: var(--ed-olive); }
.paint-size output { min-width: 20px; color: var(--ed-ink); }
.paint-optionsbar { min-height: 37px; display: flex; align-items: center; gap: 14px; padding: 5px 12px; border-bottom: 1px solid var(--ed-border); background: #f8f7f0; }
.paint-swatches { display: flex; align-items: center; gap: 4px; }
.paint-swatch { width: 22px; height: 22px; padding: 0; border: 2px solid #fff; border-radius: 6px; background: var(--swatch); cursor: pointer; box-shadow: 0 0 0 1px #c9cbbf; }
.paint-swatch:hover, .paint-swatch.active { box-shadow: 0 0 0 2px var(--ed-gold); transform: translateY(-1px); }
.paint-opacity, .paint-fill-option { display: flex; align-items: center; gap: 6px; color: var(--ed-muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.paint-opacity input { width: 82px; accent-color: var(--ed-olive); }
.paint-opacity output { min-width: 31px; color: var(--ed-ink); }
.paint-fill-option input { accent-color: var(--ed-olive); }
.paint-menu, .paint-settings { position: relative; }
.paint-menu summary, .paint-settings summary { list-style: none; cursor: pointer; }
.paint-menu summary::-webkit-details-marker, .paint-settings summary::-webkit-details-marker { display: none; }
.paint-menu > summary { width: 32px; min-height: 32px; display: grid; place-items: center; border: 1px solid var(--ed-border); border-radius: 8px; background: #fffef9; color: var(--ed-ink); }
.paint-menu[open] > summary, .paint-settings[open] > summary { border-color: var(--ed-gold); background: #fff6d1; color: var(--ed-olive-deep); }
.paint-menu-popover, .paint-settings-popover { position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; min-width: 178px; padding: 7px; border: 1px solid var(--ed-border); border-radius: 11px; background: #fffef9; box-shadow: 0 15px 35px rgba(35,45,24,.2); }
.paint-menu-popover { display: grid; gap: 4px; }
.paint-menu-popover button { width: 100%; justify-content: flex-start; border: 0; background: transparent; }
.paint-menu-popover button:hover { background: #f0f2e9; }
.paint-menu-popover .paint-menu-danger { color: #a83c33; }
.paint-settings { margin-left: auto; }
.paint-settings > summary { min-height: 29px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--ed-border); border-radius: 8px; background: #fffef9; color: var(--ed-muted); font-size: 12px; font-weight: 800; }
.paint-settings-popover { min-width: 245px; display: grid; gap: 11px; padding: 12px; }
.paint-settings-popover small { color: #858c7d; font-size: 11px; line-height: 1.5; }
.paint-canvas-shell { min-height: 0; flex: 1; overflow: auto; background-color: #e5e8dd; background-image: radial-gradient(rgba(63,76,46,.12) .7px,transparent .7px); background-size: 14px 14px; }
.paint-canvas-pad { min-width: 100%; min-height: 100%; display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
#costumeCanvas { width: 512px; height: 512px; flex: 0 0 auto; border: 1px solid #c5cabd; background: repeating-conic-gradient(#eaf0f1 0 25%,#fff 0 50%) 50%/24px 24px; box-shadow: 0 15px 36px rgba(37,46,27,.16); cursor: crosshair; touch-action: none; image-rendering: auto; }
.paint-footer { display: flex; align-items: center; gap: 11px; padding: 7px 12px; border-top: 1px solid var(--ed-border); background: #fffef9; }
.paint-convert { border-color: #8b61cf; background: #8b5bd1; color: white; }
.paint-help { min-width: 0; flex: 1; margin: 0; overflow: hidden; color: var(--ed-muted); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.paint-status { display: flex; align-items: center; gap: 8px; color: #747b6b; font-size: 12px; white-space: nowrap; }
.paint-status span + span { padding-left: 8px; border-left: 1px solid var(--ed-border); }
.paint-zoom { display: flex; align-items: center; gap: 3px; }
.paint-zoom button { min-width: 28px; height: 28px; padding: 0 7px; border: 1px solid var(--ed-border); border-radius: 7px; background: #f8f7f0; color: var(--ed-ink); cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; }
.paint-zoom output { min-width: 38px; color: var(--ed-muted); font-size: 12px; text-align: center; }
.sound-workshop { min-height: 0; height: 100%; display: grid; grid-template-columns: 168px minmax(0,1fr); background: #f7f6ef; }
.sound-sidebar { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--ed-border); background: #eef0e7; }
.sound-list { min-height: 0; flex: 1; overflow-y: auto; padding: 0 9px 10px; }
.sound-item { position: relative; width: 100%; display: flex; align-items: center; gap: 8px; margin-bottom: 7px; padding: 9px 10px; border: 1px solid #d4d7ca; border-radius: 11px; background: #fffef9; color: var(--ed-ink); cursor: pointer; text-align: left; }
.sound-item.active { border: 2px solid var(--ed-gold); padding: 8px 9px; box-shadow: 0 0 0 3px rgba(217,184,63,.13); }
.sound-item-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #f6e4f2; color: #b44f9b; font-size: 14px; }
.sound-item-copy { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.sound-item-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sound-item-copy small { margin-top: 3px; color: var(--ed-muted); font-size: 12px; }
.sound-main { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.sound-main-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 260px; color: var(--ed-muted); text-align: center; }
.sound-main-empty span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #b44f9b; color: white; font-size: 22px; }
.sound-main-empty p { font-size: 13px; line-height: 1.5; }
.sound-main-player { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 320px; }
.sound-player-row { display: flex; align-items: center; gap: 14px; }
.sound-play-big { width: 56px; height: 56px; border: 0; border-radius: 50%; background: #b44f9b; color: white; font-size: 18px; cursor: pointer; box-shadow: 0 8px 18px rgba(180,79,155,.3); }
.sound-play-big:hover { background: #9c3f86; }
.sound-player-row > span { color: var(--ed-muted); font-size: 13px; font-weight: 800; }
.sound-delete-btn { color: #a64f38; border-color: #e2c2b6; }
.sound-record-modal { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sound-record-dot { width: 16px; height: 16px; border-radius: 50%; background: #d45145; animation: sound-record-pulse 1.1s ease-in-out infinite; }
@keyframes sound-record-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.25); } }

/* Stage */
.stage-panel { display: flex; flex-direction: column; background: var(--ed-panel); }
.stage-top-bar { height: 49px; flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 10px 0 14px; border-bottom: 1px solid var(--ed-border); background: var(--ed-paper); }
.stage-heading { display: flex; align-items: baseline; gap: 8px; }
.stage-heading strong { font-size: 14px; }
.stage-heading span { color: var(--ed-muted); font-size: 12px; }
.stage-play-btns, .stage-actions, .prop-show-btns { display: flex; align-items: center; gap: 5px; }
.stage-actions { justify-content: flex-end; }
.btn-flag, .btn-stop-round, .btn-reset-sm { height: 31px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn-flag { gap: 6px; padding: 0 12px; border: 0; background: #4f9f4d; color: white; font-size: 13px; font-weight: 800; box-shadow: inset 0 -2px 0 rgba(19,69,19,.18); }
.btn-flag-symbol { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; background: #fff8e8; box-shadow: inset 0 0 0 1px rgba(49,55,39,.16), 0 2px 5px rgba(22,55,21,.16); }
.btn-flag-symbol svg { width: 16px; height: 16px; overflow: visible; }
.btn-flag-symbol .flag-pole { fill: none; stroke: #283020; stroke-width: 2.2; stroke-linecap: round; }
.btn-flag-symbol .flag-cloth { fill: #f04444; stroke: #9e2727; stroke-width: 1.25; stroke-linejoin: round; }
.btn-stop-round svg { width: 14px; height: 14px; fill: currentColor; }
.btn-flag:hover:not(:disabled) { background: #5aae57; transform: translateY(-1px); }
.btn-stop-round { width: 31px; border: 0; background: #e9e8df; color: var(--ed-red); font-size: 14px; }
.btn-stop-round:hover:not(:disabled) { background: #f4dedb; }
.btn-flag:disabled, .btn-stop-round:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-reset-sm { width: 31px; border: 1px solid var(--ed-border); background: #f7f6ef; color: var(--ed-muted); font-size: 15px; }
.btn-reset-sm:hover { background: #eceadf; color: var(--ed-olive); }
.stage-canvas-wrapper { flex: 0 0 auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; padding: 0; position: relative; background: #e9dfbd; border-bottom: 0; }
.camera-stage-controls:not([hidden]) { display:flex; align-items:center; gap:5px; padding:3px 6px; border-radius:8px; background:#eaf2e4; color:#385e3a; font-size:13px; font-weight:800; }
.camera-stage-controls select { min-width:0; max-width:125px; border:1px solid #aab7a0; border-radius:5px; background:#fff; color:#243021; font-size:13px; padding:2px; }
.camera-stage-controls button { border:0; background:none; color:#385e3a; font-size:17px; line-height:1; cursor:pointer; }
.running-block-status:not([hidden]) { display:inline-flex; align-items:center; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:999px; padding:3px 9px; background:#e9f1dd; color:#395529; font-size:13px; font-weight:800; }
.running-block-status.is-done { background:#dcebc8; color:#2f4a1f; }
.run-error-help:not([hidden]) { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid #d5a69a; background:#fff0eb; color:#63342b; font-size:12px; line-height:1.35; }
.run-error-help strong { flex:0 0 auto; font-weight:850; }
.run-error-help span { flex:1 1 auto; }
.run-error-help button { flex:0 0 auto; min-height:29px; padding:4px 9px; border:1px solid #a36052; border-radius:4px; background:#fffaf7; color:#713d31; font:800 11px "Exo 2",sans-serif; cursor:pointer; }
.run-error-help button:hover,.run-error-help button:focus-visible { outline:2px solid #a36052; outline-offset:1px; }
#stageCanvas:focus-visible { outline:3px solid #d2ad2b; outline-offset:-3px; }
.history-modal { width:min(92vw, 530px) !important; }
.history-list { display:grid; gap:8px; max-height: min(55vh, 390px); overflow:auto; margin:16px 0; }
.history-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border:1px solid #d9dfcf; border-radius:10px; background:#f8f9f3; }
.history-item strong { display:block; font-size:14px; color:#293522; }
.history-item small { color:#69745f; }
.history-item button { flex:none; border:1px solid #91a279; border-radius:7px; background:#fff; color:#3d552c; padding:7px 10px; font-weight:800; cursor:pointer; }
.stage-variable-monitors { position: absolute; top: 20px; left: 20px; z-index: 12; max-width: calc(100% - 40px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.stage-variable-monitor { min-width: 105px; max-width: 210px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; overflow: hidden; border: 2px solid rgba(151,70,111,.72); border-radius: 9px; background: rgba(255,253,248,.94); color: #413a3e; box-shadow: 0 4px 12px rgba(40,31,35,.16); backdrop-filter: blur(6px); }
.stage-variable-monitor strong { overflow: hidden; padding: 6px 8px; font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.stage-variable-monitor output { min-width: 34px; padding: 6px 8px; background: #a94f7d; color: white; font: 900 13px "Exo 2",sans-serif; text-align: center; }
#stageCanvas { width: 100%; height: 100%; max-width: 100%; max-height: 100%; display: block; border: 0; border-radius: 0; background: white; box-shadow: none; }
.stage-panel.stage-expanded { position: fixed; z-index: 900; inset: 12px; width: auto; border-radius: 16px; box-shadow: 0 30px 80px rgba(22,28,16,.4); }
.stage-panel.stage-expanded .stage-canvas-wrapper { flex: 1; height: auto; }
.stage-panel.stage-expanded .sprite-props-bar, .stage-panel.stage-expanded .stage-bottom-area { display: none; }
.stage-panel:fullscreen { position: fixed; inset: 0; width: 100vw; height: 100vh; border: 0; border-radius: 0; background: #e9dfbd; }
.stage-panel:fullscreen .stage-top-bar { position: absolute; z-index: 40; top: 12px; left: 12px; right: 12px; height: 42px; border: 0; border-radius: 10px; background: rgba(255,254,249,.92); box-shadow: 0 4px 18px rgba(30,40,23,.16); }
.stage-panel:fullscreen .stage-canvas-wrapper { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; }
.stage-panel:fullscreen .sprite-props-bar, .stage-panel:fullscreen .stage-bottom-area { display: none; }
.coord-display { position: absolute; right: 17px; bottom: 17px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; background: rgba(31,42,23,.82); color: #fffbed; font: 700 12px "Exo 2", sans-serif; pointer-events: none; backdrop-filter: blur(4px); }

/* Sprite controls */
.sprite-props-bar { min-height: 76px; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--ed-border); background: var(--ed-paper); }
.sprite-props-bar.is-empty { display: none; }
.props-title { padding-right: 7px; border-right: 1px solid var(--ed-border); color: var(--ed-olive); font-size: 13px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.prop-field { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.prop-field > label { color: var(--ed-muted); font-size: 12px; font-weight: 800; }
.prop-input { height: 34px; padding: 3px 7px; border: 1px solid var(--ed-border); border-radius: 9px; background: #f5f4ec; color: var(--ed-ink); font-size: 14px; font-weight: 750; text-align: center; outline: 0; }
.prop-input:focus { border-color: var(--ed-gold); background: #fff; box-shadow: 0 0 0 3px rgba(217,184,63,.13); }
.prop-input-name { width: 112px; }
.prop-input-num { width: 64px; }
.prop-show-btn { width: 34px; height: 34px; border: 1px solid var(--ed-border); border-radius: 9px; background: #f5f4ec; color: #9a9e90; cursor: pointer; }
.prop-show-btn.active-btn { border-color: #8ba35e; background: var(--ed-olive-soft); color: var(--ed-olive); }
.prop-field-direction { z-index: 30; }
.prop-direction-control { display: flex; align-items: center; gap: 5px; }
.direction-dial { position: relative; flex: 0 0 36px; width: 36px; height: 36px; border: 2px solid #bba5dd; border-radius: 50%; background: radial-gradient(circle at center,#fcfaff 0 49%,transparent 50%),repeating-conic-gradient(from 0deg,#c7b2e5 0 2deg,transparent 2deg 30deg),#eee6fa; box-shadow: inset 0 0 0 2px #fff,0 1px 3px #65508222; cursor: grab; touch-action: none; }
.direction-dial:hover { border-color: #8056c2; box-shadow: 0 0 0 3px #d8c6f45c; }
.direction-dial:active { cursor: grabbing; }
.direction-dial:focus-visible { outline: 3px solid #986fd8; outline-offset: 3px; }
.direction-dial-center { position: absolute; z-index: 2; top: calc(50% - 4px); left: calc(50% - 4px); width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #855bd0; box-shadow: 0 1px 3px #66499866; }
.direction-dial-needle { position: absolute; top: calc(50% - 12px); left: calc(50% - 1.5px); width: 3px; height: 12px; border-radius: 3px; background: #855bd0; transform-origin: 50% 100%; transform: rotate(var(--direction-angle,90deg)); pointer-events: none; }
.direction-dial-needle::before { content: ""; position: absolute; top: -4px; left: -3px; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 6px solid #855bd0; }
.direction-modes { position: absolute; right: 0; bottom: calc(100% + 5px); display: grid; grid-template-columns: repeat(3,1fr); width: 126px; padding: 6px; border: 1px solid #ded6eb; border-radius: 10px; background: #fff; box-shadow: 0 8px 22px #25223230; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease,visibility .12s ease; }
.prop-field-direction:hover .direction-modes,.prop-field-direction:focus-within .direction-modes { opacity: 1; visibility: visible; pointer-events: auto; }
.direction-modes::before { content: "Dönme biçimi"; grid-column: 1 / -1; padding: 1px 2px 5px; color: #766683; font-size: 13px; font-weight: 800; }
.direction-modes button { height: 28px; border: 1px solid #e0d9ec; background: #fff; color: #8c7b9f; font-size: 16px; cursor: pointer; }
.direction-modes button:last-child { border-right: 0; }
.direction-modes button[aria-pressed="true"] { background: #ede3fb; color: #754ec1; }
.stage-bottom-area { min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0,1fr) min(360px, 64%); overflow: hidden; }
.sprite-area { position: relative; min-width: 0; overflow: auto; padding: 11px; background: var(--ed-panel); box-shadow: inset 0 0 0 0 transparent; transition: box-shadow .16s ease, background .16s ease; }
.sprite-area.is-edit-target { box-shadow: inset 3px 0 0 var(--ed-olive); background: #f0f3e7; }
.panel-section-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.panel-section-title > div { display: flex; flex-direction: column; }
.panel-section-title strong { font-size: 13px; }
.panel-section-title span { margin-top: 2px; color: var(--ed-muted); font-size: 12px; }
.mini-menu { border: 0; background: transparent; color: var(--ed-muted); cursor: pointer; letter-spacing: 2px; }
.edit-target-badge { display: none; flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: var(--ed-olive); color: #fff; font-size: 11px; font-weight: 850; letter-spacing: .02em; white-space: nowrap; }
.is-edit-target .edit-target-badge { display: inline-flex; align-items: center; }
.sprite-list { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 48px; }
.sprite-item { position: relative; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.sprite-item-thumb { width: 76px; height: 62px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--ed-border); border-radius: 11px; background: var(--ed-paper); font-size: 31px; transition: border .15s ease, transform .15s ease, box-shadow .15s ease, outline-color .15s ease; }
.sprite-item:hover .sprite-item-thumb { border-color: #a5ac91; transform: translateY(-1px); }
.sprite-item.active .sprite-item-thumb { border: 2px solid var(--ed-gold); background: #fffdf3; box-shadow: 0 0 0 3px rgba(217,184,63,.14); }
.sprite-item.editing .sprite-item-thumb { outline: none; border: 2px solid var(--ed-olive); background: #f5f7ef; box-shadow: 0 0 0 2px rgba(86,107,47,.18); }
.sprite-item-name { width: 100%; overflow: hidden; color: var(--ed-ink); font-size: 12px; font-weight: 750; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sprite-code-badge { position: absolute; top: 43px; left: 4px; z-index: 2; padding: 2px 5px; border: 1px solid rgba(255,255,255,.78); border-radius: 999px; background: rgba(38,53,29,.88); color: #fffdf4; font-size: 10px; font-weight: 850; line-height: 1.2; box-shadow: 0 2px 5px rgba(30,39,22,.16); }
.sprite-item-del { position: absolute; z-index: 2; top: -5px; right: -4px; width: 20px; height: 20px; }
.sprite-list-empty { margin: 8px 0; color: var(--ed-muted); font-size: 13px; line-height: 1.4; }
.add-sprite-btn { position: absolute; right: 12px; bottom: 11px; z-index: 3; width: 41px; height: 41px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 13px; background: var(--ed-olive); color: #fff; font-size: 22px; font-weight: 800; cursor: pointer; box-shadow: 0 7px 16px rgba(55,75,31,.23); }
.add-sprite-btn:hover { background: #657d39; transform: translateY(-2px); }
.backdrop-panel { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 11px 8px; overflow: hidden; border-left: 1px solid var(--ed-border); background: #f2f0e7; box-shadow: inset 0 0 0 0 transparent; transition: box-shadow .16s ease, background .16s ease; }
.backdrop-panel.is-edit-target { box-shadow: inset 3px 0 0 var(--ed-olive); background: #eef1e5; }
.backdrop-panel-title { align-self: stretch; display: flex; flex-direction: column; gap: 3px; }
.backdrop-panel-title strong { color: var(--ed-ink); font-size: 13px; }
.backdrop-panel-title span:not(.edit-target-badge) { margin-top: 2px; color: var(--ed-muted); font-size: 12px; }
.backdrop-panel-title .edit-target-badge { align-self: flex-start; }
.backdrop-list { min-height: 0; display: grid; flex: 1 1 auto; grid-template-columns: repeat(auto-fill, 152px); grid-auto-rows: max-content; align-content: start; gap: 8px; overflow-x: hidden; overflow-y: auto; padding: 2px 3px 5px 1px; scrollbar-width: thin; scrollbar-color: #b4baa4 transparent; }
.backdrop-card { position: relative; width: 152px; display: flex; flex: 0 0 auto; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid #d7d9cb; border-radius: 10px; background: rgba(255,253,245,.78); color: var(--ed-ink); cursor: pointer; box-shadow: 0 3px 9px rgba(49,59,34,.06); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, outline-color .16s ease; }
.backdrop-card:hover { border-color: #9da78a; transform: translateY(-1px); box-shadow: 0 7px 16px rgba(49,59,34,.12); }
.backdrop-card.active { border: 2px solid var(--ed-gold); padding: 3px; background: #fffdf5; box-shadow: 0 0 0 3px rgba(217,184,63,.13), 0 6px 14px rgba(49,59,34,.1); }
.backdrop-card.editing { outline: none; border: 2px solid var(--ed-olive); padding: 3px; background: #f5f7ef; box-shadow: 0 0 0 2px rgba(86,107,47,.18); }
.active-backdrop-preview { width: 100%; aspect-ratio: 16/9; display: block; border-radius: 6px; background-position: center !important; background-size: cover !important; }
.backdrop-card strong { width: 100%; overflow: hidden; padding: 0 2px; font-size: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.backdrop-card small { color: var(--ed-muted); font-size: 10px; font-weight: 700; text-align: center; }
.backdrop-card-remove { position: absolute; z-index: 2; top: 1px; right: 1px; width: 20px; height: 20px; }
.sprite-item-del,.backdrop-card-remove,.costume-delete { display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(86,107,47,.25); border-radius: 50%; background: rgba(255,254,248,.82); color: rgba(74,86,60,.56); cursor: pointer; box-shadow: 0 1px 3px rgba(35,45,24,.1); transition: background .15s ease, color .15s ease, transform .15s ease; }
.sprite-item-del::before,.backdrop-card-remove::before,.costume-delete::before { content: ''; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-3 6h12l-.8 11a2 2 0 0 1-2 2H8.8a2 2 0 0 1-2-2L6 9Zm3 2 .4 8h1.5l-.4-8H9Zm5.5 0-.4 8h1.5l.4-8h-1.5Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-3 6h12l-.8 11a2 2 0 0 1-2 2H8.8a2 2 0 0 1-2-2L6 9Zm3 2 .4 8h1.5l-.4-8H9Zm5.5 0-.4 8h1.5l.4-8h-1.5Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.sprite-item-del:hover,.sprite-item-del:focus-visible,.backdrop-card-remove:hover,.backdrop-card-remove:focus-visible,.costume-delete:hover,.costume-delete:focus-visible { border-color: #b53c32; background: #c7473b; color: #fff; transform: scale(1.1); }
.add-backdrop-btn { width: 100%; min-height: 31px; display: flex; align-items: center; justify-content: center; gap: 3px; flex: 0 0 auto; border: 1px dashed #9aa486; border-radius: 9px; background: #f8faef; color: var(--ed-olive); font-size: 12px; font-weight: 800; cursor: pointer; }
.add-backdrop-btn span { font-size: 15px; line-height: 1; }
.add-backdrop-btn:hover { border-color: var(--ed-gold); background: #fff9dc; }
.upload-backdrop-btn { width: 100%; min-height: 31px; flex: 0 0 auto; border: 1px solid #b5bda5; border-radius: 9px; background: #fffdf5; color: var(--ed-olive); font: 800 12px "Exo 2",sans-serif; cursor: pointer; }
.upload-backdrop-btn:hover,.upload-backdrop-btn:focus-visible { border-color: var(--ed-olive); background: #eef2e7; }

.backdrop-panel { position: relative; }
.backdrop-list { padding-bottom: 54px; }
.asset-add-toggle.add-sprite-btn,.asset-add-toggle.add-backdrop-btn { position: absolute; right: 12px; bottom: 11px; z-index: 5; width: 43px; height: 43px; min-height: 43px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #12b987; color: #fff; font-size: 25px; font-weight: 750; line-height: 1; box-shadow: 0 0 0 6px rgba(118,78,188,.2), 0 5px 15px rgba(28,72,57,.22); }
.asset-add-toggle:hover,.asset-add-toggle:focus-visible { background: #079d74 !important; outline: 2px solid #7048b4; outline-offset: 6px; }
.asset-add-toggle[aria-expanded="true"] { transform: rotate(45deg); }
.asset-add-menu { position: absolute; right: 13px; bottom: 62px; z-index: 6; width: 41px; display: flex; flex-direction: column; gap: 1px; padding: 4px; border-radius: 23px; background: #754eb6; box-shadow: 0 8px 22px rgba(45,31,73,.24); }
.asset-add-menu[hidden] { display: none; }
.asset-add-menu button { position: relative; width: 33px; height: 33px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font: 800 23px "Exo 2",sans-serif; cursor: pointer; }
.asset-add-menu button:hover,.asset-add-menu button:focus-visible { background: #9570d0; outline: none; }
.asset-add-menu button::before { content: attr(data-label); position: absolute; right: 40px; top: 50%; width: max-content; max-width: 145px; padding: 6px 9px; border-radius: 6px; background: #14b786; color: #fff; font: 800 11px "Exo 2",sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(5px); transition: opacity .12s ease, transform .12s ease; }
.asset-add-menu button:hover::before,.asset-add-menu button:focus-visible::before { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Eklenti araçları: simgesiz, metin odaklı çalışma kaydı. */
.extension-overlay:not([hidden]) { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(20,30,17,.72); }
.extension-dialog { width: min(1030px, 94vw); height: min(640px, 88vh); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #9cab8c; border-radius: 5px; background: #faf9f2; color: #263222; box-shadow: 0 20px 65px rgba(16,25,13,.32); }
.extension-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 3px solid #566b2f; background: #fffdf5; }
.extension-top > div { display: grid; gap: 3px; }
.extension-top small { color: #566b2f; font: 800 11px "Exo 2",sans-serif; letter-spacing: .12em; }
.extension-top strong { font: 800 24px "Exo 2",sans-serif; }
.extension-top button { padding: 8px 13px; border: 1px solid #9eac8c; border-radius: 4px; background: #f7f8f1; color: #314429; font: 800 12px "Exo 2",sans-serif; cursor: pointer; }
.extension-top button:hover,.extension-top button:focus-visible { background: #e7eddc; outline: 2px solid #566b2f; outline-offset: 1px; }
.extension-catalog { min-height: 0; display: grid; grid-template-columns: 274px minmax(0,1fr); flex: 1 1 auto; }
.extension-sidebar { min-height: 0; display: flex; flex-direction: column; padding: 17px 15px 13px; border-right: 1px solid #c7d0bd; background: #eef1e8; }
.extension-search-label { display: grid; gap: 6px; color: #3c5031; font: 800 12px "Exo 2",sans-serif; }
.extension-search-label input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #aebba2; border-radius: 4px; background: #fffef9; color: #263222; font: 650 12px "Exo 2",sans-serif; }
.extension-search-label input:focus { outline: 2px solid #566b2f; outline-offset: 1px; }
.extension-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; margin: 13px 0 12px; }
.extension-filters button { min-height: 30px; padding: 5px 6px; border: 1px solid #bac6b0; border-radius: 3px; background: transparent; color: #43553a; font: 750 11px "Exo 2",sans-serif; text-align: center; cursor: pointer; }
.extension-filters button:hover,.extension-filters button:focus-visible { background: #fffdf5; outline: 2px solid #566b2f; outline-offset: 1px; }
.extension-filters button[aria-pressed="true"] { border-color: #566b2f; background: #566b2f; color: #fff; }
.extension-list-count { margin: 0 0 6px; color: #64745a; font: 750 11px "Exo 2",sans-serif; }
.extension-index { min-height: 0; overflow-y: auto; border-top: 1px solid #c7d0bd; }
.extension-index-item { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 9px; border: 0; border-bottom: 1px solid #d7ded1; border-left: 3px solid transparent; border-radius: 0; background: transparent; color: #273723; font: 700 13px "Exo 2",sans-serif; text-align: left; cursor: pointer; }
.extension-index-item small { flex: 0 0 auto; color: #687963; font-size: 10px; font-weight: 700; }
.extension-index-item:hover,.extension-index-item:focus-visible { background: #fffdf5; outline: none; }
.extension-index-item[aria-current="true"] { border-left-color: #d2ad2b; background: #fffdf5; }
.extension-index-item[aria-current="true"] strong { color: #405825; }
.extension-results { min-height: 0; overflow-y: auto; padding: 22px 31px 30px; }
.extension-results-top { display: flex; justify-content: space-between; padding-bottom: 9px; border-bottom: 1px solid #d0d9c7; color: #687b5e; font: 800 10px "Exo 2",sans-serif; letter-spacing: .12em; }
.extension-grid { display: block; }
.extension-card { display: block; min-height: 0; padding: 22px 0 0; border: 0; background: transparent; color: #263222; box-shadow: none; }
.extension-card[hidden],.extension-empty[hidden] { display: none; }
.extension-art { display: none; }
.extension-card > div > small { color: #5e7354; font: 800 11px "Exo 2",sans-serif; letter-spacing: .08em; }
.extension-card h2 { margin: 5px 0 7px; font: 800 32px "Exo 2",sans-serif; }
.extension-card > div > p:first-of-type { max-width: 570px; margin: 0 0 19px; color: #485648; font-size: 15px; line-height: 1.5; }
.extension-card button { min-height: 37px; margin-right: 10px; padding: 7px 13px; border: 1px solid #ae9024; border-radius: 4px; background: #e4c54d; color: #263222; font: 800 12px "Exo 2",sans-serif; cursor: pointer; }
.extension-card button:hover:not(:disabled),.extension-card button:focus-visible:not(:disabled) { background: #f0d566; outline: 2px solid #8a7325; outline-offset: 1px; }
.extension-card .extension-try-sample { border-color:#9eac8c; background:#f7f8f1; color:#314429; }
.extension-card .extension-try-sample:hover,.extension-card .extension-try-sample:focus-visible { background:#e7eddc; outline-color:#566b2f; }
.extension-card button.is-added { border-color: #aebba3; background: #e5ebdf; color: #435a36; cursor: default; }
.extension-card button:disabled:not(.is-added) { border-color: #bdc4b6; background: #edece5; color: #7b8276; cursor: default; }
.extension-card a { color: #496b40; font-size: 12px; font-weight: 800; text-decoration: underline; }
.extension-usecase,.extension-trial,.extension-example { margin-top: 20px; padding-top: 16px; border-top: 1px solid #d6decd; }
.extension-usecase h3,.extension-trial h3,.extension-example h3 { margin: 0 0 8px; color: #31472b; font: 800 12px "Exo 2",sans-serif; }
.extension-usecase p { margin: 0; color: #2f3e2b; font-size: 15px; line-height: 1.45; }
.extension-trial dl { display:grid; grid-template-columns: 68px minmax(0,1fr); gap: 7px 12px; margin:0; }
.extension-trial dt { color:#687b5e; font:800 11px "Exo 2",sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.extension-trial dd { margin:0; color:#344532; font-size:13px; line-height:1.4; }
.extension-example ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 16px; margin: 0; padding-left: 18px; color: #344532; font-size: 13px; }
.extension-example li::marker { color: #9f8d4c; }
.extension-requirement { margin: 22px 0 0; padding: 10px 12px; border-left: 3px solid #a7b597; background: #f0f2e9; color: #40543c; font-size: 12px; line-height: 1.45; }
.extension-empty { padding: 24px 0; color: #536749; font-size: 13px; }
.arduino-export-row { padding-top: 18px; border-top: 1px solid #d6decd; }
@media (max-width: 760px) { .extension-catalog { grid-template-columns: 225px minmax(0,1fr); } .extension-results { padding: 16px; } .extension-example ul { grid-template-columns: 1fr; } }

/* Dialogs */
body.editor-page .modal-overlay { background: rgba(25,32,19,.64); backdrop-filter: blur(8px); }
body.editor-page .modal { width: min(92vw, 460px); padding: 28px; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: #fffef8; color: var(--ed-ink); box-shadow: 0 24px 70px rgba(28,36,20,.3); }
body.editor-page .modal h2 { margin-bottom: 17px; font-size: 20px; }
.dialog-input { width: 100%; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--ed-border); border-radius: 10px; background: #f5f4ec; color: var(--ed-ink); font-size: 14px; font-weight: 650; outline: 0; }
.dialog-input:focus { border-color: var(--ed-gold); box-shadow: 0 0 0 3px rgba(217,184,63,.14); }
.dialog-buttons { display: flex; justify-content: center; gap: 8px; }
.dialog-note { margin: -7px 0 17px; color: var(--ed-muted); font-size: 13px; line-height: 1.55; text-align: center; }
body.editor-page .modal .btn { padding: 10px 17px; border-radius: 9px; font-size: 13px; }
body.editor-page .modal .btn-primary { background: var(--ed-olive); color: white; }
body.editor-page .modal .btn-outline { border: 1px solid var(--ed-border); color: var(--ed-muted); }
.project-list { max-height: 300px; overflow-y: auto; margin-bottom: 14px; }
.project-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; padding: 11px; border: 1px solid var(--ed-border); border-radius: 10px; background: #f6f5ed; }
.project-item-name { font-size: 13px; font-weight: 800; text-align: left; }
.project-item-date { color: var(--ed-muted); font-size: 12px; text-align: left; }
.project-item-actions { display: flex; gap: 5px; }
.project-item-actions .btn-backup { border: 1px solid var(--ed-border); background: #fffef8; color: var(--ed-olive); }
body.editor-page .btn-danger { background: #f4dfdc; color: #a83c33; border: 1px solid #ecc7c2; }
.variable-modal { position: relative; width: min(92vw, 500px) !important; overflow: hidden; padding: 30px !important; text-align: left; }
.variable-modal::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg,#ff8c1a,#f4b13d,#ff8c1a); }
.variable-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.variable-heading-icon { position: relative; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; background: linear-gradient(145deg,#ffad3d,#ed7411); box-shadow: 0 7px 16px rgba(215,101,6,.2); }
.variable-heading-icon::after { content: ""; position: absolute; inset: 10px; background: white; -webkit-mask: url('../assets/icons/dialogs/variable.svg') center/contain no-repeat; mask: url('../assets/icons/dialogs/variable.svg') center/contain no-repeat; }
.variable-heading > div { min-width: 0; }
.variable-kicker { color: #b76011; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.variable-heading h2 { margin: 2px 0 0 !important; font-size: 21px !important; }
.variable-description { margin: 0 0 17px; color: var(--ed-muted); font-size: 13px; line-height: 1.55; }
.variable-name-label { display: block; margin-bottom: 6px; color: var(--ed-ink); font-size: 12px; font-weight: 850; }
.variable-input-wrap { position: relative; }
.variable-input-wrap input { width: 100%; height: 48px; padding: 0 62px 0 14px; border: 2px solid #ded9c9; border-radius: 12px; background: #fbfaf5; color: var(--ed-ink); outline: 0; font: 800 14px "Exo 2",sans-serif; transition: border-color .15s ease,box-shadow .15s ease,background .15s ease; }
.variable-input-wrap input:focus { border-color: #ff9a32; background: #fff; box-shadow: 0 0 0 4px rgba(255,140,26,.14); }
.variable-input-wrap span { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #999b91; font-size: 12px; font-weight: 800; }
.variable-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.variable-suggestions button { padding: 6px 10px; border: 1px solid #e1dac8; border-radius: 999px; background: #fffaf2; color: #805022; cursor: pointer; font: 750 12px "Exo 2",sans-serif; }
.variable-suggestions button:hover { border-color: #f0a04b; background: #fff0dc; }
.variable-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 10px 12px; border: 1px solid #eed7bd; border-radius: 11px; background: linear-gradient(120deg,#fff8ec,#fffdf7); }
.variable-preview > span { color: var(--ed-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.variable-preview strong { max-width: 70%; overflow: hidden; padding: 7px 12px; border-radius: 8px; background: #ff8c1a; color: white; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 -2px 0 rgba(150,69,0,.18); }
.variable-scope-note { margin: 10px 0 0; color: #72786b; font-size: 12px; line-height: 1.45; }
.variable-error { min-height: 17px; margin: 5px 0 0; color: #b43d33; font-size: 12px; font-weight: 750; }
.variable-actions { justify-content: flex-end; margin-top: 5px; }
.variable-actions .btn-primary { background: #e97912 !important; box-shadow: 0 5px 13px rgba(221,108,9,.18); }
.sprite-delete-modal { position: relative; width: min(92vw, 510px) !important; overflow: hidden; padding: 30px !important; text-align: left; }
.sprite-delete-modal::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg,#8c3c32,#c36a57,#8c3c32); }
.sprite-delete-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; }
.sprite-delete-icon { width: 48px; height: 48px; flex: 0 0 auto; background: url('../assets/icons/dialogs/delete-sprite.svg') center/contain no-repeat; filter: drop-shadow(0 7px 10px rgba(113,45,37,.18)); }
.sprite-delete-heading > div { min-width: 0; }
.sprite-delete-kicker { color: #9d493c; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.sprite-delete-heading h2 { margin: 2px 0 0 !important; font-size: 20px !important; }
.sprite-delete-summary { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid #e4ded0; border-radius: 13px; background: #f8f7f1; }
.sprite-delete-preview { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid #ddd8ca; border-radius: 11px; background: repeating-conic-gradient(#edf0e8 0 25%,#fff 0 50%) 50%/14px 14px; font-size: 31px; }
.sprite-delete-preview img { width: 52px; height: 52px; object-fit: contain; }
.sprite-delete-summary > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sprite-delete-summary strong { overflow: hidden; color: var(--ed-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.sprite-delete-summary span { color: var(--ed-muted); font-size: 12px; }
.sprite-delete-description { margin: 15px 0 9px; color: #62685e; font-size: 13px; line-height: 1.55; }
.sprite-delete-warning { display: flex; align-items: center; gap: 7px; margin: 0; color: #944238; font-size: 12px; font-weight: 800; }
.sprite-delete-warning span { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: #f5dfda; }
.sprite-delete-actions { justify-content: flex-end; margin-top: 20px; }
.sprite-delete-actions .btn-danger { background: #9f463b !important; color: white !important; border-color: #9f463b !important; box-shadow: 0 5px 13px rgba(133,52,43,.2); }
.project-check-modal { width: min(94vw, 500px) !important; }
.project-check-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; text-align: left; }
.project-check-heading h2 { margin: 0 0 3px !important; }
.project-check-heading p { margin: 0; color: var(--ed-muted); font-size: 13px; line-height: 1.45; }
.project-check-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-bottom: 13px; }
.project-check-fact { padding: 9px 7px; border: 1px solid var(--ed-border); border-radius: 10px; background: #f7f6ef; text-align: center; }
.project-check-fact strong { display: block; color: var(--ed-olive-deep); font-size: 15px; }
.project-check-fact span { display: block; margin-top: 2px; color: var(--ed-muted); font-size: 12px; }
.project-check-list { display: grid; gap: 7px; max-height: 245px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.project-check-item { display: grid; grid-template-columns: 25px 1fr; gap: 9px; align-items: start; padding: 9px 10px; border: 1px solid var(--ed-border); border-radius: 10px; background: #fbfaf5; text-align: left; }
.project-check-item > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.project-check-item strong { display: block; font-size: 13px; }
.project-check-item small { display: block; margin-top: 2px; color: var(--ed-muted); font-size: 12px; line-height: 1.45; }
.project-check-item.good > span { background: #dfedd4; color: #466b2f; }
.project-check-item.warn > span { background: #fff0be; color: #876410; }
.project-check-actions { margin-top: 14px; flex-wrap: wrap; }

/* Scratch kolaylığında, Asilion kimliğinde tam sayfa varlık kütüphaneleri */
body.library-open { overflow: hidden !important; }
.library-overlay { position: fixed; z-index: 1500; inset: 0; display: flex; flex-direction: column; background: #eef0e8; color: var(--ed-ink); }
.library-header { min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 24px; background: var(--ed-olive-deep); color: #fffdf4; box-shadow: 0 4px 16px rgba(22,30,15,.2); }
.library-header > div { text-align: center; }
.library-kicker { color: #d9ddca; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.library-header h2 { margin: 2px 0 0; color: #fffdf4; font-size: 20px; line-height: 1.1; }
.library-back { justify-self: start; min-height: 39px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid rgba(255,255,255,.17); border-radius: 11px; background: rgba(255,255,255,.08); color: #fffdf4; font-size: 14px; font-weight: 800; cursor: pointer; }
.library-back:hover { background: rgba(255,255,255,.16); }
.library-count { justify-self: end; padding: 7px 11px; border-radius: 999px; background: rgba(217,184,63,.16); color: #f7dd7e; font-size: 13px; font-weight: 800; }
.library-toolbar { display: flex; align-items: center; gap: 16px; padding: 15px 22px; border-bottom: 1px solid #d2d6c9; background: #f8f7f0; }
.library-search { width: min(250px,25vw); min-width: 190px; height: 43px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #d5d7cc; border-radius: 12px; background: white; }
.library-search:focus-within { border-color: var(--ed-gold); box-shadow: 0 0 0 3px rgba(217,184,63,.15); }
.library-search svg { width: 18px; height: 18px; fill: none; stroke: var(--ed-olive); stroke-width: 2; }
.library-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ed-ink); font-size: 14px; }
.library-categories { min-width: 0; display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 5px; }
.library-category { min-height: 36px; flex: 0 0 auto; padding: 0 14px; border: 1px solid #d5d7cc; border-radius: 999px; background: #fff; color: #58614d; font-size: 13px; font-weight: 800; cursor: pointer; }
.library-category:hover { border-color: #9dab82; background: #f4f6ed; }
.library-category.active { border-color: var(--ed-gold); background: var(--ed-gold); color: #253018; box-shadow: 0 4px 10px rgba(135,105,11,.14); }
.library-content { min-height: 0; flex: 1; overflow-y: auto; padding: 22px; background-image: radial-gradient(rgba(67,82,48,.1) .7px,transparent .7px); background-size: 17px 17px; }
.library-grid { width: min(1540px,100%); margin: 0 auto; display: grid; gap: 13px; }
.sprite-library-grid { grid-template-columns: repeat(auto-fill,minmax(132px,1fr)); }
.backdrop-library-grid { grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); }
.library-card { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 9px; border: 1px solid #d5d7cc; border-radius: 15px; background: #fffef9; color: var(--ed-ink); cursor: pointer; text-align: left; box-shadow: 0 3px 10px rgba(49,58,36,.045); transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.library-card:hover { border-color: var(--ed-gold); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(49,58,36,.13); }
.library-card.selected { border: 2px solid var(--ed-gold); box-shadow: 0 0 0 3px rgba(217,184,63,.16); }
.library-card-preview { display: grid; place-items: center; overflow: hidden; border-radius: 10px; background-color: #f0f1e9; background-position: center !important; background-size: cover !important; }
.sprite-library-card .library-card-preview { height: 116px; background-image: radial-gradient(circle at 50% 44%,#fff 0,#f5f4eb 55%,#e5e8db 100%); }
.sprite-library-card img { width: 102px; height: 102px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(34,42,24,.15)); transition: transform .16s ease; }
.sprite-library-card:hover img { transform: scale(1.06); }
.backdrop-library-card .library-card-preview { aspect-ratio: 16/9; }
.library-card strong { overflow: hidden; margin-top: 4px; padding: 0 3px; font-size: 13px; line-height: 1.2; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.library-card small { padding: 0 3px 2px; color: var(--ed-muted); font-size: 12px; }
.library-empty { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ed-muted); }
.library-empty[hidden] { display: none; }
.library-empty strong { color: var(--ed-ink); font-size: 17px; }
.library-empty span { margin-top: 5px; font-size: 13px; }

/* Toast */
.toast { position: fixed; z-index: 1200; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 10px; min-width: 250px; padding: 11px 14px; border: 1px solid #d8d3bd; border-radius: 13px; background: rgba(255,254,247,.96); color: var(--ed-ink); box-shadow: 0 16px 45px rgba(33,43,23,.22); opacity: 0; pointer-events: none; transform: translate(-50%,18px); transition: opacity .22s ease, transform .22s ease; backdrop-filter: blur(10px); }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.toast > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--ed-olive-soft); color: var(--ed-olive); font-weight: 900; }
.toast.warning > span { background: #fff0be; color: #876410; }
.toast.error > span { background: #f4dfdc; color: #a83c33; }
.toast div { display: flex; flex-direction: column; }
.toast strong { font-size: 13px; }
.toast small { margin-top: 2px; color: var(--ed-muted); font-size: 12px; }

@media (min-width: 1121px) and (max-width: 1399px) {
  .sprite-props-bar { gap: 5px; padding-inline: 7px; }
  .props-title { padding-right: 4px; }
  .prop-input-name { width: 118px; }
  .prop-input-num { width: 62px; }
  .prop-show-btn { width: 30px; }
  .prop-show-btns, .prop-direction-control { gap: 3px; }
}
@media (max-width: 1120px) {
  .editor-container { grid-template-columns: minmax(470px,1fr) minmax(490px,44vw); }
  .header-center { display: none; }
  .paint-shortcuts { display: none; }
  .stage-canvas-wrapper { min-height: 220px; }
  .props-title { display:none; }
  .sprite-props-bar { gap: 5px; }
  .prop-input-name { width: 70px; }
}
@media (max-width: 880px) {
  body.editor-page { overflow: auto; }
  .editor-container { width: 100%; min-height: 900px; height: auto; grid-template-columns: minmax(0,1fr); grid-template-rows: 580px 720px; overflow: visible; }
  .stage-panel { grid-row: 1; }
  .blockly-panel { grid-row: 2; }
  .stage-canvas-wrapper { height: 370px; }
  .stage-bottom-area { min-height: 190px; }
}
@media (max-width: 640px) {
  body.editor-page .editor-header { height: 58px; padding: 0 9px; }
  .brand-group { gap: 7px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-copy strong { font-size: 13px; }
  .brand-copy small, .header-divider, .project-title-wrap { display: none; }
  .project-check-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.editor-page .header-nav { gap: 4px; }
  body.editor-page .header-nav a, body.editor-page .header-nav button { min-height: 33px; padding: 0 8px; font-size: 12px; }
  body.editor-page .header-nav .header-icon-link { width: 33px; }
  .editor-container { min-height: 1050px; grid-template-rows: 620px 720px; height: auto; padding: 5px; gap: 5px; }
  .blockly-panel, .stage-panel { border-radius: 11px; }
  .stage-canvas-wrapper { height: 300px; min-height: 260px; }
  .sprite-props-bar { overflow-x: auto; justify-content: flex-start; }
  .stage-bottom-area { grid-template-columns: 1fr 108px; min-height: 235px; }
  .workspace-tab { padding: 0 8px; font-size: 13px; }
  .tool-button-label span { display: none; }
  .costume-editor { grid-template-columns: 104px minmax(0,1fr); }
  .costume-sidebar-title { padding-inline: 7px; font-size: 12px; }
  .costume-list { padding-inline: 5px; }
  .costume-item { grid-template-columns: 38px minmax(0,1fr); gap: 5px; padding: 5px; }
  .costume-item.active { padding: 4px; }
  .costume-item-preview { width: 38px; height: 38px; }
  .costume-item-preview img { width: 34px; height: 34px; }
  .costume-item-copy strong { font-size: 12px; }
  .costume-item-copy small { font-size: 11px; }
  .costume-add-actions { padding: 5px; }
  .costume-add-actions button { padding: 7px 3px; font-size: 11px; }
  .paint-topbar { align-items: stretch; flex-direction: column; }
  .costume-name-field input { width: min(155px,60vw); }
  .paint-history { flex-wrap: wrap; }
  .paint-optionsbar { flex-wrap: wrap; gap: 7px 12px; }
  .paint-swatch { width: 19px; height: 19px; }
  .paint-opacity input { width: 62px; }
  .paint-footer { flex-wrap: wrap; }
  .paint-help { width: 100%; order: 4; flex-basis: 100%; }
  .paint-status { display: none; }
  .library-header { min-height: 62px; padding: 8px 10px; }
  .library-header h2 { font-size: 15px; }
  .library-kicker { display: none; }
  .library-back { min-height: 35px; padding: 0 10px; }
  .library-back span { display: none; }
  .library-count { padding: 6px 8px; font-size: 12px; }
  .library-toolbar { align-items: stretch; flex-direction: column; gap: 9px; padding: 10px; }
  .library-search { width: 100%; min-width: 0; height: 39px; }
  .library-categories { width: 100%; }
  .library-category { min-height: 33px; padding: 0 11px; font-size: 12px; }
  .library-content { padding: 10px; }
  .library-grid { gap: 8px; }
  .sprite-library-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .backdrop-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .library-card { padding: 6px; border-radius: 11px; }
  .sprite-library-card .library-card-preview { height: 88px; }
  .sprite-library-card img { width: 78px; height: 78px; }
  .library-card strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.gorev-modu) *, body:not(.gorev-modu) *::before, body:not(.gorev-modu) *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Hesap ve galeri seçenekleri (kaydet penceresi, proje listesi) */
.cloud-box { margin: -4px 0 16px; padding: 12px 14px; border: 1px solid var(--ed-border); border-radius: 10px; background: #f6f5ed; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ed-ink); }
.cloud-row { display: flex; gap: 9px; align-items: flex-start; font-weight: 700; cursor: pointer; }
.cloud-row input { margin-top: 2px; accent-color: #566b2f; }
.cloud-row small { display: block; color: var(--ed-muted); font-weight: 600; font-size: 13px; }
.cloud-hint { margin: 0; color: var(--ed-muted); font-weight: 600; }
.cloud-hint a { color: var(--ed-ink); font-weight: 800; }
.cloud-title { margin: 18px 0 8px; font-size: 14px; font-weight: 800; color: var(--ed-ink); }

/* ===== Görev şeridi (editor.html?gorev=…) — bölüm rengi blok kategorisinin rengi ===== */
.gorev-seridi { flex: 0 0 auto; border-bottom: 1px solid var(--ed-border); border-left: 6px solid var(--bolum, var(--ed-olive)); background: var(--ed-paper); color: var(--ed-ink); }
.gs-ust { display: flex; align-items: center; gap: 10px; padding: 8px 12px 0; }
.gs-no { display: inline-flex; align-items: baseline; gap: 1px; padding: 3px 9px 4px; border-radius: 6px 6px 6px 0; background: var(--bolum); color: #fff; font-size: 15px; font-weight: 900; box-shadow: inset 0 -3px 0 rgba(0,0,0,.14); }
.gs-no small { font-size: 11px; font-weight: 800; opacity: .8; }
.gs-baslik { font-size: 15px; font-weight: 850; white-space: nowrap; }
.gs-pipler { display: inline-flex; gap: 4px; }
.gs-pipler i { width: 18px; height: 6px; border-radius: 3px; background: #e2e0d3; }
.gs-pipler i.sira { background: color-mix(in srgb, var(--bolum) 45%, #fff); }
.gs-pipler i.tamam { background: var(--bolum); }
.gs-bosluk { flex: 1; }
.gs-dugme { height: 30px; display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid var(--ed-border); border-radius: 8px; background: #f5f4ec; color: var(--ed-ink); font: 800 13px "Exo 2", sans-serif; text-decoration: none; cursor: pointer; }
.gs-dugme:hover, .gs-dugme.acik { border-color: var(--ed-gold); background: #fff6d6; }
.gs-dugme.ana { border-color: var(--ed-olive); background: var(--ed-olive); color: #fff; }
.gs-dugme.ana:hover { background: var(--ed-olive-deep); }
.gs-kapat { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--ed-muted); font-size: 20px; cursor: pointer; }
.gs-kapat:hover { background: #eeece2; color: var(--ed-ink); }
.gs-alt { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 10px; }
.gs-hikaye { margin: 0; color: var(--ed-muted); font-size: 13px; font-weight: 650; }
.gs-adim { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; }
.gs-adim span { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--bolum); color: #fff; font-size: 13px; font-weight: 900; }
.gs-ipucu { margin: 2px 0 0; padding: 7px 10px; border-left: 3px solid var(--ed-gold); border-radius: 0 7px 7px 0; background: #fff8dc; color: #4d4426; font-size: 13px; font-weight: 650; line-height: 1.4; }
.gs-bitti { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.gs-yildizlar { display: inline-flex; gap: 2px; }
.gs-yildiz svg { width: 26px; height: 26px; fill: #e2e0d3; }
.gs-yildiz.dolu svg { fill: var(--ed-gold); stroke: #a8862a; stroke-width: 1; }
.gs-neden { color: var(--ed-muted); font-size: 13px; font-weight: 700; }
.gs-puan { padding: 3px 9px; border-radius: 6px; background: var(--ed-olive-soft); color: var(--ed-olive-deep); font-size: 14px; font-weight: 900; }
.gs-puan.eski { background: #f1efe5; color: var(--ed-muted); }
.gs-not { color: #876410; font-size: 13px; font-weight: 700; }
body.gorev-modu #starterHint { display: none !important; }
.gs-govde { display: flex; align-items: flex-start; gap: 12px; padding-right: 12px; }
.gs-govde .gs-alt { flex: 1; min-width: 0; }
.gs-gosteri-yer { flex: 0 0 auto; padding: 6px 0 10px; }
.gs-gosteri { width: 300px; height: 112px; overflow: hidden; border: 1px solid var(--ed-border); border-radius: 9px; background: #fbfaf4; }
.gs-gosteri .gg-svg { display: block; width: 100%; height: 100%; }

/* ===== Görev modu: görev solda kendi sütununda, editör sağda (ParçaÇiz eğitim düzeni) ===== */
body.gorev-modu .editor-container { grid-template-columns: 300px minmax(0, 1fr) minmax(400px, 34vw); }
.gorev-paneli { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; border: 1px solid var(--ed-border); border-top: 6px solid var(--bolum, var(--ed-olive)); border-radius: 14px; background: var(--ed-paper); box-shadow: var(--ed-shadow); color: var(--ed-ink); }
.gp-ust { padding: 12px 14px 10px; border-bottom: 1px solid var(--ed-border); }
.gp-kimlik { display: flex; align-items: center; gap: 8px; }
.gp-no { color: var(--bolum); font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.gp-no small { color: var(--ed-muted); font-weight: 800; }
.gp-harita { margin-left: auto; color: var(--ed-muted); font-size: 13px; font-weight: 750; }
.gp-kapat { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--ed-muted); font-size: 20px; cursor: pointer; }
.gp-kapat:hover { background: #eeece2; color: var(--ed-ink); }
.gorev-paneli h2 { margin: 6px 0 2px; font-size: 22px; font-weight: 900; line-height: 1.15; }
.gp-eniyi { display: inline-flex; align-items: center; gap: 4px; color: var(--ed-muted); font-size: 12px; font-weight: 750; }
.gp-eniyi .gs-yildiz svg { width: 15px; height: 15px; }
.gp-hikaye { margin: 6px 0 0; color: var(--ed-muted); font-size: 13px; font-weight: 650; line-height: 1.4; }
.gp-hedef { margin: 12px 14px 0; padding: 8px 10px 10px; border: 1px solid var(--ed-border); border-radius: 10px; background: color-mix(in srgb, var(--bolum) 9%, #f7f5ec); background-image: linear-gradient(rgba(31,42,23,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,42,23,.05) 1px, transparent 1px); background-size: 12px 12px; }
.gp-hedef figcaption { margin-bottom: 6px; color: var(--ed-muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.gp-hedef svg { display: block; max-width: 100%; max-height: 120px; }
.gp-adimlar { list-style: none; margin: 12px 0 0; padding: 0 14px; display: flex; flex-direction: column; gap: 8px; }
.gp-adimlar li { display: flex; gap: 9px; align-items: flex-start; }
.gp-adimlar p { margin: 2px 0 0; font-size: 14px; font-weight: 750; line-height: 1.35; }
.gp-adim-no { flex: 0 0 auto; width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid var(--ed-border); border-radius: 50%; color: var(--ed-muted); font-size: 13px; font-weight: 900; }
.gp-adimlar li.sira .gp-adim-no { border-color: var(--bolum); color: var(--bolum); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bolum) 20%, transparent); }
.gp-adimlar li.sira p { font-size: 15px; }
.gp-adimlar li.tamam .gp-adim-no { border-color: var(--ed-olive); background: var(--ed-olive); color: #fff; }
.gp-adimlar li.tamam p { color: var(--ed-muted); text-decoration: line-through; text-decoration-color: rgba(86,107,47,.4); }
.gp-adimlar li.bekliyor p { color: #9a9e90; }
.gp-adimlar .gs-gosteri-yer { padding: 8px 0 2px; }
.gp-adimlar .gs-gosteri { width: 100%; max-width: 248px; height: auto; aspect-ratio: 300 / 112; }
.gp-ipucu-alani { padding: 12px 14px 0; }
.gp-sonuc { margin: 14px 14px 0; padding: 12px; border: 2px solid var(--ed-gold); border-radius: 12px; background: #fffbea; display: flex; flex-direction: column; gap: 6px; }
.gp-sonuc b { font-size: 17px; font-weight: 900; }
.gp-sonuc ul { margin: 0; padding: 0; list-style: none; color: var(--ed-muted); font-size: 13px; font-weight: 700; }
.gp-sonuc li::before { content: '○ '; }
.gp-sonuc li.ok { color: var(--ed-olive-deep); }
.gp-sonuc li.ok::before { content: '✓ '; }
.gp-sonuc .gs-puan { align-self: flex-start; }
.gp-alt { margin-top: auto; display: flex; gap: 8px; padding: 14px; }
.gp-alt .gs-dugme { flex: 1; justify-content: center; height: 38px; font-size: 14px; }
.gs-dugme:disabled { opacity: .45; cursor: not-allowed; }
/* Gerçek arayüzde sıradaki hamlenin yeri */
@keyframes gorevIsaret { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,184,63,.0), inset 0 0 0 2px #d9b83f; } 50% { box-shadow: 0 0 0 6px rgba(217,184,63,.45), inset 0 0 0 2px #d9b83f; } }
.gorev-isaret { animation: gorevIsaret 1.2s ease-in-out infinite; border-radius: 10px; }
.blocklyToolboxCategory.gorev-isaret, .blocklyTreeRow.gorev-isaret { background: #fff6d6 !important; }
.blocklyToolboxCategory.gorev-soluk, .blocklyTreeRow.gorev-soluk { opacity: .32; }
/* Görevdeyken dikkat dağıtan araçlar gizli */
body.gorev-modu .header-nav a[href="kamera-laboratuvari.html"], body.gorev-modu #btnLoad, body.gorev-modu #btnHistory, body.gorev-modu #btnExport,
body.gorev-modu #btnAddDevice, body.gorev-modu #btnExtensions, body.gorev-modu #btnProjectCheck, body.gorev-modu #tabCostumes, body.gorev-modu #tabSounds { display: none !important; }
@media (max-width: 1400px) { body.gorev-modu .editor-container { grid-template-columns: 290px minmax(0, 1fr) 330px; } }
/* Görevdeyken üst çubuk: yalnız görev başlığı, Görev haritası ve Serbest çalış */
.gorev-ust-dugmeler { display: none; gap: 7px; }
body.gorev-modu .gorev-ust-dugmeler { display: inline-flex; }
body.gorev-modu .header-nav > :not(.gorev-ust-dugmeler):not(#btnSave), body.gorev-modu .header-center { display: none !important; }
body.gorev-modu #btnSave { display: none; }
body.gorev-modu.gorev-kaydet #btnSave { display: inline-flex; }
body.gorev-modu .project-title-wrap > span { display: none; }
body.gorev-modu #projectTitle { pointer-events: none; border-color: transparent; background: transparent; font-weight: 850; }
/* Panel etkileşimi: biten adım belirir, yeni adım içeri kayar, görev bitince Sonraki görev kendini gösterir */
@keyframes gpOnay { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes gpCizgi { from { text-decoration-color: transparent; } to { text-decoration-color: rgba(86,107,47,.4); } }
@keyframes gpGiris { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes gpYildiz { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes gpCagir { 0%, 100% { box-shadow: 0 0 0 0 rgba(86,107,47,.55); } 50% { box-shadow: 0 0 0 9px rgba(86,107,47,0); } }
@keyframes gpOk { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes gpDurt { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-6deg); } 93% { transform: rotate(6deg); } 97% { transform: rotate(-3deg); } }
@keyframes gpSonuc { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.gp-adimlar li.tamam.yeni .gp-adim-no { animation: gpOnay .5s cubic-bezier(.3,1.6,.5,1) both; }
.gp-adimlar li.tamam.yeni p { animation: gpCizgi .6s ease .2s both; }
.gp-adimlar li.sira.giris { animation: gpGiris .45s ease .15s both; }
.gp-sonuc { animation: gpSonuc .4s ease both; }
.gp-yildiz-dolum .gs-yildiz.dolu { display: inline-block; animation: gpYildiz .45s cubic-bezier(.3,1.6,.5,1) both; }
.gp-yildiz-dolum .gs-yildiz.dolu:nth-child(1) { animation-delay: .15s; }
.gp-yildiz-dolum .gs-yildiz.dolu:nth-child(2) { animation-delay: .4s; }
.gp-yildiz-dolum .gs-yildiz.dolu:nth-child(3) { animation-delay: .65s; }
.gs-dugme.ana.cagir { animation: gpCagir 1.4s ease-in-out .9s infinite; }
.gs-dugme.ana.cagir .gp-ok { display: inline-block; margin-left: 6px; animation: gpOk 1s ease-in-out infinite; }
.gs-dugme.durt { border-color: var(--ed-gold); background: #fff6d6; animation: gpDurt 3s ease-in-out infinite; }
body.gorev-modu .sprite-props-bar { display: none !important; }
.gp-durum { margin: 5px 0 0 !important; padding: 5px 8px; border-left: 3px solid #d45145; border-radius: 0 6px 6px 0; background: #fbebe8; color: #8d3128 !important; font-size: 13px !important; font-weight: 750 !important; animation: gpGiris .3s ease both; }
/* ===== Görev bitince: Sonraki görev düğmesi kalp gibi atar, konfeti patlar ===== */
@keyframes gssNabiz { 0%, 100% { box-shadow: 0 4px 0 rgba(0,0,0,.2), 0 0 0 0 color-mix(in srgb, var(--sonraki) 55%, transparent); } 50% { box-shadow: 0 4px 0 rgba(0,0,0,.2), 0 0 0 12px color-mix(in srgb, var(--sonraki) 0%, transparent); } }
@keyframes gssOk { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes gpKalp { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.09); } 24% { transform: scale(.97); } 32% { transform: scale(1.06); } }
.gorev-konfeti { position: fixed; z-index: 3000; pointer-events: none; }
/* Sol sütunun altı: bitince büyük, sıradaki görevin renginde */
.gp-alt.bitti { flex-direction: column; }
.gp-sonraki { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 10px 44px 12px 14px; border: 0; border-radius: 12px; background: var(--sonraki); color: #fff; text-align: left; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.2); animation: gpKalp 1.3s ease-in-out 1s infinite, gssNabiz 1.3s ease-in-out 1s infinite; font-family: "Exo 2", sans-serif; transform-origin: center; }
.gp-sonraki small { font-size: 12px; font-weight: 800; opacity: .9; }
.gp-sonraki b { font-size: 18px; font-weight: 900; }
.gp-sonraki .gp-ok { position: absolute; right: 14px; top: 50%; margin-top: -13px; font-size: 22px; font-weight: 900; animation: gssOk 1s ease-in-out infinite; }
.gp-bastan { border: 0; background: transparent; color: var(--ed-muted); font: 750 13px "Exo 2", sans-serif; text-decoration: underline; cursor: pointer; }
.gorev-paneli[hidden] { display: none !important; }
/* ===== 60 görevlik yapı: tür, hedef, tahmin, çözüm, usta, iz ===== */
.gp-tur { padding: 2px 8px; border: 1.5px solid currentColor; border-radius: 6px; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.gp-tur-duzelt { color: #c2412d; } .gp-tur-tahmin { color: #6d4bb8; } .gp-tur-karma { color: #2f7a8a; } .gp-tur-usta { color: #8a6a10; background: #fff4cf; }
.gp-kimlik .gp-kapat { margin-left: auto; }
.gp-hedef p { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.35; color: var(--ed-ink); }
.gp-yeni { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.gp-yeni small { flex: 0 0 auto; color: var(--ed-muted); font-size: 11px; font-weight: 800; }
.gp-yeni svg { max-height: 34px; max-width: 170px; }
.gp-tahmin { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.gp-secenek { min-height: 36px; padding: 6px 12px; border: 2px solid var(--ed-border); border-radius: 9px; background: #fff; color: var(--ed-ink); font: 800 14px "Exo 2", sans-serif; text-align: left; cursor: pointer; }
.gp-secenek:hover:not(:disabled) { border-color: var(--bolum); background: color-mix(in srgb, var(--bolum) 10%, #fff); }
.gp-secenek:disabled { cursor: default; }
.gp-secenek.secili { border-color: var(--bolum); background: color-mix(in srgb, var(--bolum) 14%, #fff); }
.gp-secenek.dogru { border-color: #3f7a2c; background: #e6f2dd; }
.gp-secenek.yanlis { border-color: #c2412d; background: #fbe6e1; text-decoration: line-through; }
.gp-cozum-dugme { display: block; margin-top: 8px; border: 0; background: transparent; color: #8a6a10; font: 800 13px "Exo 2", sans-serif; text-decoration: underline; cursor: pointer; }
.gp-cozum { margin: 8px 0 0; padding: 8px; border: 1px dashed var(--ed-border); border-radius: 9px; background: #fbfaf4; }
.gp-cozum figcaption { margin-bottom: 4px; color: var(--ed-muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.gp-cozum svg { display: block; max-width: 100%; max-height: 140px; }
.gp-adimlar.usta li.olcut .gp-adim-no { border-style: dashed; }
.gp-adimlar.usta li.olcut p { color: var(--ed-ink); }
/* Görev modunda kâşifin izi */
.gorev-iz { position: absolute; pointer-events: none; z-index: 4; }
body:not(.gorev-modu) .gorev-iz { display: none; }
/* Değiştirilecek beyaz kutu gerçek blokta parlar */
@keyframes gorevSvg { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .25; } }
.gorev-isaret-svg > .blocklyPath { stroke: #d9b83f !important; stroke-width: 4px !important; animation: gorevSvg 1.1s ease-in-out infinite; }
body.gorev-modu .stage-heading > span { display: none; }

/* Tur 1 Ar-Ge: hap rozetler düz yazıya, tahmin nedeni */
.gp-tur { padding: 0; border: 0 !important; background: none !important; font-size: 12px; letter-spacing: .06em; }
.gp-tur::before { content: '· '; color: var(--ed-muted); }
.gs-puan { margin: 2px 0 0; padding: 0; border-radius: 0; background: none; color: var(--ed-olive-deep); font-size: 15px; font-weight: 900; }
.gs-puan.eski { background: none; color: var(--ed-muted); font-size: 13px; }
.gp-neden { margin: 8px 0 0; padding: 7px 10px; border-left: 3px solid var(--bolum); background: color-mix(in srgb, var(--bolum) 8%, #fff); font-size: 13px; font-weight: 700; line-height: 1.4; }
/* Canlandırma sütun genişliğinde (adım numarasının altına taşar) */
.gp-adimlar li.sira .gs-gosteri-yer { margin-left: -34px; }
.gp-adimlar .gs-gosteri { max-width: none; }

/* Kaydet penceresi: girişsizken hesap satırları görünmesin (hidden özniteliği flex'e yenilmesin) */
.cloud-row[hidden], #cloudBox[hidden] { display: none !important; }