/* Native: css/style.css */
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { font-family: Arial, Helvetica, sans-serif; background: #1e1e1e; color: #f3f3f3; user-select: none; }
.app { padding: 8px; width: 100%; height: 100vh; overflow-y: auto; overflow-x: hidden; scroll-behavior: auto; overscroll-behavior: contain; }
/* themed scrollbars across the whole panel (CEP = Chromium) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #141414; border-radius: 8px; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 8px; border: 2px solid #141414; }
::-webkit-scrollbar-thumb:hover { background: #8B5CF6; }
::-webkit-scrollbar-thumb:active { background: #7c4ef0; }
::-webkit-scrollbar-corner { background: #141414; }
* { scrollbar-width: thin; scrollbar-color: #3a3a3a #141414; }
.top-menu { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-bottom: 6px; }
.menu-btn { width: 30px; height: 26px; border: 0; border-radius: 7px; background: #333; color: #fff; cursor: pointer; font-weight: 800; }
.notifications-btn { position: relative; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: #333; color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.notifications-btn:hover, .notifications-btn.active { background: #444; }
.notifications-bell { display: block; transform: translateY(1px); }
.notifications-badge { position: absolute; top: -5px; right: -5px; min-width: 14px; height: 14px; padding: 0 3px; border: 2px solid #1e1e1e; border-radius: 9px; background: #d84d4d; color: #fff; font-size: 8px; font-weight: 800; line-height: 10px; text-align: center; }
.notification-banner { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; padding: 8px; border: 1px solid #6a5320; border-radius: 8px; background: #24200f; color: #f5e4ad; }
.notification-banner.hidden { display: none; }
.notification-banner-copy { min-width: 0; flex: 1 1 auto; }
.notification-banner-title { color: #ffe299; font-size: 11px; font-weight: 800; line-height: 1.25; }
.notification-banner-body { margin-top: 2px; color: #d9c99a; font-size: 10.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notification-banner-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.notification-banner-close { width: 20px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #ccb86e; cursor: pointer; font-size: 17px; line-height: 18px; }
.notification-banner-close:hover { background: rgba(255,255,255,.09); color: #fff; }
.panel-menu { position: absolute; right: 0; top: 30px; z-index: 20; width: 140px; background: #252525; border: 1px solid #4a4a4a; border-radius: 9px; padding: 5px; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.panel-menu button { width: 100%; display: block; border: 0; border-radius: 7px; padding: 7px; color: #fff; background: transparent; text-align: left; cursor: pointer; font-weight: 700; font-size: 11px; }
.panel-menu button:hover { background: #3a3a3a; }
.accordion { background: #292929; border: 1px solid #3a3a3a; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.accordion-head { width: 100%; border: 0; background: #242424; color: #fff; padding: 8px 9px; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.accordion-head:hover { background: #303030; }
.accordion-body { padding: 8px; display: none; }
.accordion.open .accordion-body { display: block; }
.accordion.open .accordion-head span { transform: rotate(0deg); }
.accordion:not(.open) .accordion-head span { transform: rotate(-90deg); }
.tool-row { display: grid; gap: 6px; align-items: center; }
.tool-row.three { grid-template-columns: 1fr 1fr 1fr; }
.create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.row { display: flex; gap: 7px; align-items: center; }
.tiny-gap { gap: 5px; }
.space { justify-content: space-between; }
.controls { margin-top: 8px; }
.preset-toolbar { margin: 6px 0; }
.save-box { margin-bottom: 7px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.save-box #presetName { flex: 1 1 130px; min-width: 110px; }
.save-box > .btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; padding-top: 6px; padding-bottom: 6px; }
.preset-save-actions { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 6px; margin-top: 6px; }
.preset-save-actions .btn { width: 100%; min-width: 0; }
.preset-marker-actions { display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-top: 6px; align-items: center; }
.preset-marker-actions input[type="number"] { min-width: 0; text-align: center; padding-left: 4px; padding-right: 4px; }
.preset-marker-actions .btn { width: 100%; min-width: 0; padding-left: 4px; padding-right: 4px; white-space: normal; line-height: 1.15; }
.settings-row { margin-top: 6px; }
input[type="text"], input[type="number"], input[type="password"] { width: 100%; background: #181818; color: #f4f4f4; border: 1px solid #444; border-radius: 8px; padding: 7px; outline: none; }
.preset-list { --preset-list-height: 165px; width: 100%; min-height: var(--preset-list-height); max-height: var(--preset-list-height); overflow-y: auto; overflow-x: hidden; background: #181818; color: #f4f4f4; border: 1px solid #444; border-radius: 8px; padding: 4px; outline: none; scroll-behavior: auto; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; }
.preset-item { padding: 7px 8px; border-radius: 7px; font-size: 12px; line-height: 1.2; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.preset-item:hover { background: #303030; }
.preset-item.selected { background: #4b79ff; color: #fff; }
.preset-empty { padding: 8px; color: #999; font-size: 12px; }
.preset-row { display: grid; grid-template-columns: 1fr 28px; gap: 5px; align-items: center; margin-bottom: 4px; }
.preset-button { width: 100%; border: 0; border-radius: 7px; padding: 8px; background: #303030; color: #fff; text-align: left; cursor: pointer; font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset-button:hover { background: #4b79ff; }
.preset-delete { border: 0; border-radius: 7px; padding: 8px 0; background: #4a2b2b; color: #fff; cursor: pointer; font-weight: 900; font-size: 13px; }
.preset-delete:hover { background: #b33838; }
.btn { border: 0; border-radius: 8px; padding: 8px 9px; color: #fff; background: #484848; cursor: pointer; font-weight: 700; font-size: 11.5px; outline: none; text-align: center; }
.btn:hover { filter: brightness(1.15); }
.btn.primary { background: #4b79ff; }
.btn.danger { background: #b33838; }
.btn.small { padding: 7px 7px; font-size: 10.5px; }
.btn.full { width: 100%; }
.hint { color: #a8a8a8; font-size: 10.5px; line-height: 1.45; margin-top: 7px; }
.status { height: 46px; min-height: 46px; max-height: 46px; border-radius: 8px; background: #111; border: 1px solid #333; color: #d2d2d2; padding: 7px; font-size: 11.5px; line-height: 1.35; white-space: pre-wrap; margin-bottom: 8px; overflow-y: auto; overflow-x: hidden; }
.textreplace-note{display:none;}
.create-options-atlayer{align-items:center;gap:6px 18px;}
.atlayer-group{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;}
.create-options-atlayer label{flex:0 0 auto;min-width:0;}
.create-layer-index{width:48px;padding:4px 6px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#eee;font-size:12px;text-align:center;}
.create-layer-index:focus{outline:none;border-color:#8B5CF6;}
.atlayer-hash{color:#8a8a8a;font-size:12px;margin-right:6px;}
.asset-options-collapse{margin-bottom:8px;}
/* ── Keyboard Shortcuts ──────────────────────────────────────────── */
.sc-note{font-size:11px;color:#9a9a9a;line-height:1.5;margin-bottom:10px;}
.sc-wide{width:100%;margin-bottom:8px;}
.sc-install-result{font-size:10.5px;color:#7fae7f;line-height:1.45;margin-bottom:8px;min-height:1px;}
.sc-row2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;}
.sc-cmdlist-title{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#8a8a8a;margin:6px 0;}
.sc-selrow{display:flex;align-items:center;gap:6px;margin-bottom:7px;}
.sc-sel-count{font-size:10.5px;color:#8B5CF6;font-weight:600;margin-left:auto;}
.sc-cmdlist{display:flex;flex-direction:column;gap:3px;max-height:280px;overflow-y:auto;margin-bottom:10px;padding-right:2px;}
.sc-group-head{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#6f6f6f;margin:8px 0 2px;}
.sc-cmd-row{display:flex;align-items:center;gap:8px;font-size:11px;color:#cfcfcf;background:#1b1b1b;border:1px solid #2f2f2f;border-radius:6px;padding:6px 9px;cursor:pointer;}
.sc-cmd-row:hover{border-color:#4b79ff;background:#20222c;}
.sc-cmd-check{flex:0 0 auto;accent-color:#8B5CF6;cursor:pointer;}
.sc-ctx-menu{position:fixed;z-index:99999;min-width:150px;background:#232326;border:1px solid #444;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);padding:4px;}
.sc-ctx-item{padding:8px 12px;font-size:12px;color:#eee;border-radius:5px;cursor:pointer;white-space:nowrap;}
.sc-ctx-item:hover{background:#4b79ff;color:#fff;}
.sc-ctx-hint{padding:4px 12px 6px;font-size:9.5px;color:#8a8a8a;}
/* ── Main panel ──────────────────────────────────────────────────── */
.main-empty{font-size:11px;color:#9a9a9a;line-height:1.6;text-align:center;padding:14px 10px;border:1px dashed #3a3a3a;border-radius:8px;}
.main-toolbar{display:flex;justify-content:flex-end;margin-bottom:8px;}
.main-settings-btn{font-size:11px;}
.main-reorder-banner{font-size:10.5px;color:#e0c06a;background:#2a2410;border:1px solid #4a3f1a;border-radius:6px;padding:6px 9px;margin-bottom:8px;line-height:1.4;}
.main-list{display:flex;flex-direction:column;gap:5px;}
.main-list.reordering{min-height:60px;}
.main-row{display:flex;flex-wrap:wrap;gap:var(--main-gap,6px);width:100%;align-items:stretch;}
.main-list.reordering .main-row{min-height:34px;border:1px dashed #2f2f2f;border-radius:8px;padding:4px;}
.main-list.reordering .main-row.empty{border-color:#3d4a6a;background:#181c26;align-items:center;}
.main-row-hint{flex:1 1 auto;font-size:10px;color:#5f6f8f;text-align:center;padding:4px;}
.main-row-del{flex:0 0 auto;width:20px;height:20px;line-height:18px;border:none;background:#2a2a2a;color:#c88;border-radius:5px;cursor:pointer;font-size:13px;}
.main-row-del:hover{background:#5a2a2a;color:#fff;}
.main-add-row{width:100%;margin-top:2px;font-size:10.5px;opacity:.85;}
/* ── Save Project ──────────────────────────────────────────────────── */
.save-proj-field{margin-bottom:8px;}
.save-proj-label{display:block;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#8a8a8a;margin-bottom:4px;}
#saveProjTitle,#saveProjFolderSelect{width:100%;box-sizing:border-box;}
.save-proj-folder-row{display:flex;align-items:center;gap:6px;margin:-2px 0 8px;}
.save-proj-path{flex:1 1 auto;min-width:0;font-size:10px;color:#9a9a9a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;background:#1b1b1b;border:1px solid #2f2f2f;border-radius:6px;padding:5px 8px;}
.save-proj-del{flex:0 0 auto;color:#c88;padding:4px 8px;}
.save-proj-del:hover{background:#5a2a2a;color:#fff;}
.save-proj-preview{font-size:10.5px;color:#8B5CF6;background:#1b1b1b;border:1px solid #2f2f2f;border-radius:6px;padding:6px 9px;margin-bottom:10px;word-break:break-all;direction:ltr;line-height:1.4;}
.save-proj-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:stretch;}
.save-proj-save{width:100%;}
.save-proj-actions>.btn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:5px;padding-right:5px;}
/* ── Number Counter ────────────────────────────────────────────────── */
.counter-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.counter-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:8px;}
.counter-field{display:flex;flex-direction:column;min-width:0;}
.counter-field>label{font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#8a8a8a;margin-bottom:3px;}
.counter-field input:not([type="checkbox"]),.counter-field select{width:100%;box-sizing:border-box;}
.counter-check-field{justify-content:flex-end;}
.counter-check{display:flex;align-items:center;gap:6px;font-size:11px;color:#cfcfcf;cursor:pointer;}
.counter-check input{accent-color:#8B5CF6;}
.counter-field-wide{margin-bottom:8px;}
.counter-inline-check{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#8a8a8a;cursor:pointer;line-height:1.3;}
.counter-inline-check input{width:auto !important;margin:0;flex:0 0 auto;accent-color:#8B5CF6;cursor:pointer;}
.counter-separate-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.counter-preview-row{font-size:11px;color:#9a9a9a;margin:2px 0 10px;}
.counter-preview{color:#8B5CF6;font-weight:600;unicode-bidi:plaintext;}
.counter-wide{width:100%;}
.counter-quick-title{font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#8a8a8a;margin:6px 0 4px;}
.counter-quick-row{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:8px;}
.counter-quick-row .btn{padding:6px 2px;}
.counter-presets-head{display:flex;align-items:center;justify-content:space-between;margin:12px 0 5px;}
.counter-preset-list{display:flex;flex-direction:column;gap:4px;}
.counter-preset-empty{font-size:10.5px;color:#7a7a7a;padding:4px 2px;}
.counter-preset-item{display:flex;align-items:center;gap:5px;}
.counter-preset-name{flex:1 1 auto;text-align:left;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.counter-preset-del{flex:0 0 auto;color:#c88;padding:4px 8px;}
.counter-preset-del:hover{background:#5a2a2a;color:#fff;}
.counter-modal-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto;}
.counter-modal{width:100%;max-width:340px;background:#1e1e1e;border:1px solid #4a4a4a;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.5);overflow:hidden;}
.counter-modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #333;font-weight:600;font-size:13px;color:#eee;background:#242424;}
.counter-modal-close{border:none;background:transparent;color:#aaa;font-size:14px;cursor:pointer;padding:2px 6px;border-radius:5px;}
.counter-modal-close:hover{background:#3a3a3a;color:#fff;}
.counter-modal-content{padding:12px;}
.main-list.reordering .main-run{cursor:grab;}
/* per-card width relative to its row (row is full-width): exact gap-aware fractions */
.main-item{display:flex;align-items:center;gap:4px;border-radius:8px;transition:background .1s;min-width:0;box-sizing:border-box;position:relative;}
.main-item[data-w="12"]{width:100%;}
.main-item[data-w="9"]{width:calc((3 * (100% - 3 * var(--main-gap,6px)) / 4) + 2 * var(--main-gap,6px));}
.main-item[data-w="6"]{width:calc((100% - var(--main-gap,6px)) / 2);}
.main-item[data-w="3"]{width:calc((100% - 3 * var(--main-gap,6px)) / 4);}
.main-item.dragging{opacity:.4;}
.main-grip{flex:0 0 auto;color:#6f6f6f;font-size:12px;cursor:grab;letter-spacing:-2px;user-select:none;padding:0 1px;}
.main-item .main-run{flex:1 1 auto;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* drag placeholder — shows where the card will land */
.main-placeholder{box-sizing:border-box;border:2px dashed #4b79ff;background:rgba(75,121,255,0.12);border-radius:8px;min-height:30px;align-self:stretch;}
.main-placeholder[data-w="12"]{width:100%;}
.main-placeholder[data-w="9"]{width:calc((3 * (100% - 3 * var(--main-gap,6px)) / 4) + 2 * var(--main-gap,6px));}
.main-placeholder[data-w="6"]{width:calc((100% - var(--main-gap,6px)) / 2);}
.main-placeholder[data-w="3"]{width:calc((100% - 3 * var(--main-gap,6px)) / 4);}
/* right-edge resize handle (reorder mode only) */
.main-resize{display:none;flex:0 0 auto;width:12px;align-self:stretch;margin:-2px -4px -2px 0;cursor:ew-resize;border-radius:0 8px 8px 0;position:relative;}
.main-item.reorder .main-resize{display:block;}
.main-resize::before{content:"";position:absolute;top:50%;right:4px;transform:translateY(-50%);width:2px;height:14px;background:#5a5a5a;border-radius:1px;box-shadow:3px 0 0 #5a5a5a;}
.main-resize:hover::before{background:#4b79ff;box-shadow:3px 0 0 #4b79ff;}
.main-item.resizing{outline:2px solid #4b79ff;outline-offset:1px;}
/* ── Layer Tools ─────────────────────────────────────────────────── */
.lt-group-title{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#8a8a8a;margin:11px 0 6px;}
.lt-group-title:first-child{margin-top:0;}
/* Each reorderable group is wrapped in .lt-group; the title is first child of that wrapper, so the
   :first-child rule above zeroes its top margin. Put the between-group spacing on the wrapper instead. */
.lt-group{margin-top:11px;}
.lt-group:first-child{margin-top:0;}
.lt-workarea-check{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#ccc;cursor:pointer;margin:0 0 7px;}
.lt-workarea-check input{cursor:pointer;}
.lt-grid{display:grid;gap:5px;}
.lt-grid .btn{width:100%;font-size:10.5px;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lt-type-grid{grid-template-columns:repeat(5,1fr);}
.lt-2{grid-template-columns:repeat(2,1fr);}
.lt-3{grid-template-columns:repeat(4,1fr);}
.lt-4{grid-template-columns:repeat(4,1fr);}
.lt-wide{width:100%;margin-top:5px;font-size:10.5px;}
.lt-label-row{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-bottom:5px;}
.lt-label-sw{height:20px;border:1px solid #00000055;border-radius:4px;cursor:pointer;padding:0;transition:transform .1s,box-shadow .1s;}
.lt-label-sw:hover{transform:scale(1.12);box-shadow:0 0 0 1px #fff6;}
.lt-time-row{display:flex;align-items:center;gap:5px;margin-bottom:6px;}
.lt-time-input{flex:1 1 0;min-width:0;width:100%;padding:5px 4px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#eee;font-size:12px;text-align:center;}
.lt-time-input:focus{outline:none;border-color:#4b79ff;}
.lt-time-sep{color:#8a8a8a;font-weight:700;flex:0 0 auto;}
.lt-go{flex:0 0 auto;}
.lt-reorder-hint{font-size:10px;color:#8a8a8a;line-height:1.4;margin-bottom:6px;}
.lt-collapse{margin:11px 0 0;}
.lt-collapse-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;padding:8px 10px;background:#1c1c1c;border:1px solid #363636;border-radius:8px;color:#dcdcdc;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;text-align:left;}
.lt-collapse-toggle:hover{border-color:#4b79ff;background:#20222c;}
.lt-collapse-chevron{font-size:11px;color:#9a9a9a;transition:transform .18s ease;}
.lt-collapse-toggle.collapsed .lt-collapse-chevron{transform:rotate(-90deg);}
.lt-collapse-body{padding-top:8px;}
.lt-reorder-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;}
.lt-reorder-cell{padding:4px 0;font-size:10px;background:#1c1c1c;border:1px solid #363636;border-radius:4px;color:#cfcfcf;cursor:pointer;text-align:center;}
.lt-reorder-cell:hover{border-color:#4b79ff;background:#20222c;color:#fff;}
/* ── Notes (mini Notion) ─────────────────────────────────────────── */
.notes-toolbar{margin-bottom:8px;}
.notes-toolbar .btn{width:100%;}
.notes-list{display:flex;flex-direction:column;gap:6px;}
.note-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#1b1b1b;border:1px solid #333;border-radius:8px;cursor:pointer;transition:border-color .12s,background .12s;}
.note-row:hover{border-color:#4b79ff;background:#20222c;}
.note-row-main{flex:1 1 auto;min-width:0;}
.note-row-title{font-size:12px;font-weight:700;color:#e6e6e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.note-row-sub{font-size:10.5px;color:#8f8f8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.note-row-todos{flex:0 0 auto;font-size:10px;font-weight:700;color:#8B5CF6;background:#232130;border:1px solid #3a3555;border-radius:10px;padding:2px 7px;}
.note-group{display:flex;flex-direction:column;gap:6px;}
.note-group-head{display:flex;align-items:center;gap:7px;padding:6px 8px;background:#191919;border:1px solid #303030;border-radius:7px;cursor:pointer;user-select:none;transition:border-color .12s,background .12s;}
.note-group-head:hover{border-color:#4b79ff;background:#1f2029;}
.note-group-arrow{flex:0 0 auto;width:11px;font-size:10px;color:#9a9a9a;transition:transform .12s;}
.note-group.collapsed .note-group-arrow{transform:rotate(-90deg);}
.note-group-name{flex:1 1 auto;min-width:0;font-size:11.5px;font-weight:700;color:#d8d8d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.note-group-count{flex:0 0 auto;font-size:10px;font-weight:700;color:#8f8f8f;background:#232323;border:1px solid #383838;border-radius:10px;padding:1px 7px;}
.note-group-body{display:flex;flex-direction:column;gap:6px;padding-left:10px;}
.note-group.collapsed .note-group-body{display:none;}
.note-group-name[dir="rtl"]{text-align:right;}
.note-folder-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.note-folder-label{flex:0 0 auto;font-size:10.5px;color:#8f8f8f;}
.note-folder-select{flex:1 1 auto;min-width:0;padding:5px 7px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#e6e6e6;font-size:11px;}
.note-folder-select:focus{outline:none;border-color:#4b79ff;}
.sr-check{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:11px;color:#ddd;cursor:pointer;}
.sr-check input{cursor:pointer;}
.sr-field{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;font-size:11px;color:#ddd;}
.sr-field select{background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#e6e6e6;font-size:11px;padding:3px 5px;}
.overlay.sr-overlay{z-index:100001;}
/* Sections the user chose to hide (Show / Hide Sections). Hides both the section and its sidebar button. */
.section-hidden{display:none !important;}
/* Remove silence: the analyze/apply result line under the controls. */
.lt-sil-result{margin-top:6px;font-size:10.5px;line-height:1.45;color:#9a9a9a;min-height:14px;}
/* Favorite Effects */
.fav-fx-search{position:relative;}
/* AE Project: each block is a heading, a separator line, then its contents. */
.aeproject-body .lt-group-title{border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:5px;margin-bottom:8px;}
.aeproject-body .lt-group-title:first-child{margin-top:0;}
/* Collapsible blocks: the heading is the toggle. */
.aeproj-group{margin-top:11px;}
.aeproj-group:first-child{margin-top:0;}
.aeproj-head{display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:pointer;user-select:none;}
.aeproj-head:hover{color:#c9c9c9;}
.aeproj-chev{font-size:9px;opacity:.75;transition:transform .12s ease;}
.aeproj-closed .aeproj-chev{transform:rotate(-90deg);}
.aeproj-closed .aeproj-head{margin-bottom:0;}
.aeproject-body>.save-proj-preview{margin-bottom:6px;}
.aeproject-body>.save-proj-save{width:100%;}
/* Pinned Projects */
.pin-proj{display:flex;gap:6px;flex-wrap:wrap;}
.pin-proj .btn{flex:1 1 auto;}
#pinProjFilter{width:100%;box-sizing:border-box;margin-top:6px;}
.pin-proj-list{margin-top:6px;display:grid;grid-template-columns:1fr 1fr;gap:4px;align-items:stretch;}
/* One column when the panel is too narrow to keep two readable. */
@media (max-width:340px){ .pin-proj-list{grid-template-columns:1fr;} }
.pin-proj-row{display:flex;gap:4px;align-items:stretch;min-width:0;}
.pin-proj-open{flex:1 1 auto;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pin-proj-del{flex:0 0 auto;width:26px;text-align:center;padding-left:0;padding-right:0;color:#c98a8a;}
.pin-proj-empty{margin-top:6px;font-size:10.5px;color:#9a9a9a;opacity:.7;}
.fav-fx-search>input{width:100%;box-sizing:border-box;}
.fav-fx-results{position:absolute;left:0;right:0;top:100%;z-index:50;max-height:260px;overflow:auto;background:#1e1e1e;border:1px solid rgba(255,255,255,.14);border-radius:6px;margin-top:3px;box-shadow:0 8px 22px rgba(0,0,0,.5);}
.fav-fx-hit{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 9px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05);}
.fav-fx-hit:hover{background:rgba(224,178,60,.16);}
.fav-fx-hit-name{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fav-fx-hit-cat{font-size:9.5px;color:#8a8a8a;white-space:nowrap;flex:0 0 auto;}
.fav-fx-nohit,.fav-fx-empty{padding:8px 4px;font-size:10.5px;color:#9a9a9a;}
.fav-fx-empty{opacity:.7;}
.fav-fx-list{margin-top:8px;display:flex;flex-direction:column;gap:5px;}
.fav-fx-item{display:flex;gap:4px;align-items:stretch;flex-wrap:wrap;}
.fav-fx-add{flex:1 1 100px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:80px;}
.fav-fx-preset{flex:0 1 auto;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-color:var(--accent,#e0b23c)!important;color:var(--accent,#e0b23c);}
.fav-fx-plus,.fav-fx-del{flex:0 0 auto;width:26px;text-align:center;padding-left:0;padding-right:0;}
.fav-fx-pmenu{flex:0 0 auto;width:20px;text-align:center;padding-left:0;padding-right:0;opacity:.75;}
.fav-fx-pmenu:hover{opacity:1;}
.fav-fx-del{color:#c98a8a;}
#favFxFilter{width:100%;box-sizing:border-box;margin-bottom:6px;}
.fav-fx-popover{position:fixed;z-index:100002;background:#232323;border:1px solid rgba(255,255,255,.16);border-radius:7px;box-shadow:0 10px 26px rgba(0,0,0,.55);padding:4px;min-width:180px;}
.fav-fx-pop-btn{display:block;width:100%;text-align:left;background:transparent;border:0;color:#e6e6e6;font-size:11.5px;padding:8px 10px;border-radius:5px;cursor:pointer;}
.fav-fx-pop-btn:hover{background:rgba(224,178,60,.18);}
.fav-fx-pop-danger{color:#e58a8a;}
.fav-fx-pop-danger:hover{background:rgba(229,138,138,.16);}
.sr-modal{max-width:380px;border:1px solid #6b4a1f;box-shadow:0 0 0 1px rgba(240,170,60,.18),0 18px 48px rgba(0,0,0,.6);}
.sr-modal.sr-critical{border-color:#7a2f2f;box-shadow:0 0 0 1px rgba(255,90,90,.22),0 18px 48px rgba(0,0,0,.6);}
.sr-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.sr-icon{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;background:#3a2c12;color:#f0aa3c;}
.sr-modal.sr-critical .sr-icon{background:#3a1717;color:#ff6b6b;}
.sr-titles{flex:1 1 auto;min-width:0;}
.sr-title{font-size:13px;font-weight:700;color:#f2f2f2;}
.sr-sub{font-size:10.5px;color:#9a9a9a;margin-top:2px;}
.sr-body{color:#ddd;font-size:12px;line-height:1.5;background:#181818;border:1px solid #3a3a3a;border-radius:8px;padding:10px;}
.sr-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.sr-chip{font-size:10px;font-weight:700;color:#c9c9c9;background:#232323;border:1px solid #3a3a3a;border-radius:10px;padding:2px 8px;}
.sr-actions{margin-top:11px;display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;}
.sr-actions .primary{background:#4b79ff;color:#fff;border-color:#4b79ff;}
.sr-actions .primary:hover{background:#5d88ff;}
.guides-body{display:flex;flex-direction:column;gap:5px;}
.gd-group-title{font-size:10px;font-weight:700;color:#8f8f8f;letter-spacing:.4px;text-transform:uppercase;margin-top:1px;display:flex;align-items:center;gap:6px;}
/* One row per group, split into equal columns.
   Grid (not flex) on purpose: with `flex:1 1 0` Chromium resolves the basis
   against the CONTENT box and then adds each control's own padding/border, so a
   select, a number input and a button end up several pixels apart. `1fr` grid
   tracks are exactly equal whatever the padding. `min-width:0` stops a long
   option label or button caption from widening its own track. */
.gd-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;gap:5px;}
.gd-row > *{min-width:0;}
.gd-row .btn{width:100%;padding-left:4px;padding-right:4px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gd-select{width:100%;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#e6e6e6;font-size:11px;padding:4px 3px;}
.gd-select:focus,.gd-num:focus,.gd-text:focus{outline:none;border-color:#4b79ff;}
.gd-num{width:100%;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#e6e6e6;font-size:11px;padding:4px 6px;}
.gd-text{width:100%;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#e6e6e6;font-size:11px;padding:4px 6px;}
/* The View checkboxes are labels of very different widths; equal columns would
   look broken, so they keep their natural size and may wrap. */
.gd-row.gd-toggles{display:flex;flex-wrap:wrap;gap:10px;}
.gd-row.gd-toggles > *{flex:0 0 auto;}
.gd-check{display:flex;align-items:center;gap:5px;font-size:10.5px;color:#ccc;cursor:pointer;}
.gd-check input{cursor:pointer;}
.gd-count{font-size:10px;font-weight:700;color:#8f8f8f;background:#232323;border:1px solid #383838;border-radius:10px;padding:1px 7px;text-transform:none;letter-spacing:0;}
.gd-list{display:flex;flex-direction:column;gap:3px;max-height:130px;overflow-y:auto;}
.gd-item{display:flex;align-items:center;gap:7px;padding:4px 7px;background:#1a1a1a;border:1px solid #2f2f2f;border-radius:6px;font-size:11px;color:#ddd;}
.gd-badge{flex:0 0 auto;width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;background:#26304a;color:#8fa8ff;}
.gd-badge.h{background:#2a3a28;color:#8fd08a;}
.gd-item-pos{flex:1 1 auto;min-width:0;}
.gd-item-pct{flex:0 0 auto;color:#8a8a8a;font-size:10px;}
.gd-del{flex:0 0 auto;border:none;background:transparent;color:#9a9a9a;cursor:pointer;font-size:12px;padding:0 4px;border-radius:4px;}
.gd-del:hover{background:#3a2020;color:#ff8a8a;}
.gd-preset-list{display:flex;flex-direction:column;gap:3px;max-height:130px;overflow-y:auto;}
.gd-preset{display:flex;align-items:center;gap:6px;padding:4px 7px;background:#1a1a1a;border:1px solid #2f2f2f;border-radius:6px;font-size:11px;color:#ddd;}
.gd-preset-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gd-preset-count{flex:0 0 auto;font-size:10px;color:#8a8a8a;}
.gd-empty{padding:8px;text-align:center;color:#8a8a8a;font-size:10.5px;}
.gd-hint{font-size:10px;color:#7f7f7f;line-height:1.45;}
.notes-empty{padding:14px 8px;text-align:center;color:#8a8a8a;font-size:11.5px;}
.notes-empty.small{padding:8px;font-size:10.5px;}
.notes-editor-top{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.note-title-input{flex:1 1 auto;min-width:0;padding:7px 9px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:7px;color:#f0f0f0;font-size:calc(var(--note-font-size,12px) * 1.08);font-weight:700;}
.note-title-input:focus{outline:none;border-color:#4b79ff;}
.note-blocks{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;}
.note-block{display:flex;align-items:flex-start;gap:6px;padding:2px 2px 2px 0;border-radius:6px;position:relative;}
.note-block:hover{background:#1d1d1f;}
.note-block-grip{display:flex;flex-direction:column;gap:1px;opacity:0;transition:opacity .12s;flex:0 0 auto;padding-top:2px;}
.note-block:hover .note-block-grip{opacity:1;}
.note-grip-btn{width:14px;height:11px;line-height:9px;font-size:7px;padding:0;background:#262626;border:1px solid #3a3a3a;border-radius:3px;color:#9a9a9a;cursor:pointer;}
.note-grip-btn:hover{color:#fff;border-color:#4b79ff;}
.note-lead{flex:0 0 auto;color:#b9b9b9;font-size:calc(var(--note-font-size,12px) + 0.5px);padding-top:3px;min-width:14px;text-align:right;}
.note-lead-num{color:#8B5CF6;font-weight:700;font-size:calc(var(--note-font-size,12px) - 0.5px);}
.note-todo-check{flex:0 0 auto;margin-top:5px;accent-color:#8B5CF6;cursor:pointer;}
.note-block-input{flex:1 1 auto;min-width:0;resize:none;overflow:hidden;background:transparent;border:none;color:#e2e2e2;font-size:var(--note-font-size,12px);line-height:1.45;padding:3px 2px;font-family:inherit;}
.note-block-input:focus{outline:none;}
.note-block-h .note-block-input{font-size:calc(var(--note-font-size,12px) * 1.22);font-weight:800;color:#f4f4f4;}
.note-block-input.done{text-decoration:line-through;color:#7c7c7c;}
.note-divider-line{flex:1 1 auto;height:1px;background:#3a3a3a;margin:9px 0;}
.note-block-del{flex:0 0 auto;width:16px;height:16px;line-height:14px;padding:0;margin-top:3px;background:transparent;border:none;color:#5c5c5c;font-size:13px;cursor:pointer;opacity:0;transition:opacity .12s;}
.note-block:hover .note-block-del{opacity:1;}
.note-block-del:hover{color:#e07777;}
.note-add-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;}
.note-add-row .btn{flex:1 1 auto;font-size:10px;}
.note-save-state{font-size:10px;color:#7fae7f;min-height:14px;text-align:right;}
.note-block[class*="note-indent-"]{border-left:2px solid #2e2e33;padding-left:4px;}
.note-block[dir="rtl"][class*="note-indent-"]{border-left:none;border-right:2px solid #2e2e33;padding-left:0;padding-right:4px;margin-left:0 !important;}
.note-block[dir="rtl"].note-indent-1{margin-right:18px;}
.note-block[dir="rtl"].note-indent-2{margin-right:36px;}
.note-block[dir="rtl"].note-indent-3{margin-right:54px;}
.note-image-wrap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;padding:2px 0;}
.note-image{max-width:100%;border-radius:8px;border:1px solid #333;display:block;}
.note-image.missing{min-height:44px;background:#241d1d;border-color:#5a3030;}
.note-image-caption{background:transparent;border:none;color:#9a9a9a;font-size:calc(var(--note-font-size,12px) - 1.5px);padding:1px 2px;font-family:inherit;}
.note-image-caption:focus{outline:none;color:#c9c9c9;}
.note-toggle-arrow{flex:0 0 auto;width:18px;height:18px;line-height:16px;margin-top:2px;padding:0;background:transparent;border:none;color:#b9b9b9;font-size:11px;cursor:pointer;text-align:center;transition:transform .15s ease;border-radius:4px;}
.note-toggle-arrow:hover{background:#26262c;color:#fff;}
.note-toggle-arrow.collapsed{transform:rotate(-90deg);}
.note-block-toggle .note-block-input{font-weight:700;color:#eee;}
.note-block[dir="rtl"] .note-toggle-arrow.collapsed{transform:rotate(90deg);}
/* RTL rows: direction on the row flips the flex order (grip/lead/input/del) automatically. */
.note-block[dir="rtl"] .note-lead{text-align:left;}
.note-block[dir="rtl"] .note-block-input{text-align:right;}
.note-title-input[dir="rtl"]{text-align:right;}
.note-row-title[dir="rtl"],.note-row-sub[dir="rtl"]{text-align:right;}
.asset-options-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;padding:8px 10px;background:#1c1c1c;border:1px solid #363636;border-radius:8px;color:#dcdcdc;font-size:11.5px;font-weight:700;letter-spacing:.2px;cursor:pointer;text-align:left;}
.asset-options-toggle:hover{border-color:#4b79ff;background:#20222c;}
.asset-options-chevron{font-size:11px;color:#9a9a9a;transition:transform .18s ease;}
.asset-options-toggle.collapsed .asset-options-chevron{transform:rotate(-90deg);}
.asset-options-body{padding-top:8px;}
/* ── Beat markers from audio ─────────────────────────────────────── */
.beat-audio-box{background:#171717;border:1px solid #2e2e2e;border-radius:8px;padding:9px;margin-bottom:6px;}
.beat-audio-box .beat-row{display:flex;align-items:center;gap:7px;margin-bottom:7px;}
.beat-audio-box .beat-label{font-size:11px;color:#c0c0c0;flex:0 0 auto;}
.beat-audio-box .beat-range-label{margin-left:4px;}
.beat-audio-box #beatThresholdSlider{flex:1 1 auto;accent-color:#8B5CF6;}
.beat-audio-box .beat-readout{font-size:11px;color:#8B5CF6;font-weight:600;flex:0 0 auto;min-width:38px;text-align:right;cursor:text;padding:2px 3px;border-radius:4px;}
.beat-audio-box .beat-readout:hover{background:#232130;color:#a98bff;}
.beat-audio-box .beat-thr-input{width:52px;flex:0 0 auto;padding:4px 6px;background:#1c1c1c;border:1px solid #8B5CF6;border-radius:6px;color:#eee;font-size:12px;text-align:center;}
.beat-audio-box .beat-thr-input:focus{outline:none;border-color:#8B5CF6;}
.beat-audio-box .beat-gap-input{width:56px;flex:0 0 auto;padding:5px 6px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#eee;font-size:12px;text-align:center;}
.beat-audio-box .beat-gap-input:focus{outline:none;border-color:#8B5CF6;}
.beat-audio-box .beat-gap-unit-select{width:72px;flex:0 0 auto;padding:5px 4px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#eee;font-size:10.5px;}
.beat-audio-box .beat-unit{font-size:11px;color:#8a8a8a;flex:0 0 auto;}
.beat-audio-box .beat-unit-select{flex:0 0 auto;width:52px;padding:4px 4px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#eee;font-size:11px;}
.beat-audio-box .beat-range-select{flex:1 1 auto;padding:5px 6px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#eee;font-size:11.5px;}
.beat-audio-box .beat-toggle{display:flex;align-items:center;gap:6px;font-size:11px;color:#cfcfcf;cursor:pointer;margin-bottom:9px;}
.beat-audio-box .beat-probe-row{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.beat-audio-box .beat-probe-row .btn{flex:0 0 auto;}
.beat-audio-box .beat-probe-readout{flex:1 1 auto;font-size:11px;font-weight:600;color:#8B5CF6;text-align:center;}
.beat-audio-box .beat-actions{display:flex;gap:6px;}
.beat-audio-box .beat-actions .btn{flex:1 1 auto;}
/* ── Speed Ramp panel ─────────────────────────────────────────────── */
#graphRampPanel{padding:2px 0 0;}
#graphRampPanel .ramp-note{font-size:11px;color:#9a9a9a;line-height:1.35;margin:2px 0 8px;}
#graphRampPanel .ramp-curves{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
#graphRampPanel .ramp-curve-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 4px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:8px;cursor:pointer;color:#cfcfcf;transition:border-color .12s,background .12s;}
#graphRampPanel .ramp-curve-btn:hover{border-color:#8B5CF6;background:#232130;}
#graphRampPanel .ramp-curve-btn svg{width:100%;height:34px;}
#graphRampPanel .ramp-curve-btn .rc-line{fill:none;stroke:#f0872b;stroke-width:3;stroke-linecap:round;}
#graphRampPanel .ramp-curve-btn span{font-size:9.5px;color:#a7a7a7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
#graphRampPanel .ramp-save-row{margin:8px 0 6px;}
#graphRampPanel .ramp-save-row .btn{width:100%;}
#graphRampPanel .ramp-custom-curves{margin-top:2px;}
#graphRampPanel .ramp-custom-btn{position:relative;}
#graphRampPanel .ramp-del{position:absolute;top:-6px;right:-6px;width:15px;height:15px;line-height:14px;text-align:center;border-radius:50%;background:#3a1c1c;border:1px solid #6a2e2e;color:#e79b9b;font-size:11px;cursor:pointer;z-index:2;}
#graphRampPanel .ramp-del:hover{background:#7a2626;color:#fff;}
#graphRampPanel .ramp-sep{height:1px;background:#2c2c2c;margin:12px 0 10px;}#graphRampPanel .ramp-heading{font-size:11px;font-weight:600;color:#c7c7c7;margin:0 0 8px;}
#graphRampPanel .ramp-heading .ramp-sub{font-weight:400;color:#8a8a8a;}
#graphRampPanel .ramp-tr-row{margin-bottom:7px;}
#graphRampPanel .ramp-tr-row > .btn{width:100%;}
#graphRampPanel .ramp-tr-toprow{display:flex;gap:6px;}
#graphRampPanel .ramp-tr-toprow > .btn{flex:1 1 0;width:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:4px;padding-right:4px;font-size:10px;}
#graphRampPanel .ramp-tr-addrow{display:flex;gap:6px;align-items:center;}
#graphRampPanel .ramp-tr-addrow > .btn{flex:1 1 auto;white-space:nowrap;}
#graphRampPanel .ramp-pct-input{width:52px;flex:0 0 auto;padding:5px 6px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#eee;font-size:12px;text-align:center;}
#graphRampPanel .ramp-pct-input:focus{outline:none;border-color:#8B5CF6;}
#graphRampPanel .ramp-tr-value{background:#171717;border:1px solid #2e2e2e;border-radius:8px;padding:8px;margin:8px 0 8px;}
#graphRampPanel .ramp-tr-value-head{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:#a7a7a7;margin-bottom:6px;}
#graphRampPanel .ramp-tr-value-head #rampKeyValueReadout{color:#8B5CF6;font-weight:600;}
#graphRampPanel .ramp-tr-value-ctrl{display:flex;gap:8px;align-items:center;}
#graphRampPanel .ramp-tr-value-ctrl input[type=range]{flex:1 1 auto;accent-color:#8B5CF6;}
#graphRampPanel .ramp-tr-value-ctrl .btn{flex:0 0 auto;}
.create-options-presets{display:flex;gap:6px;align-items:center;margin:8px 0;flex-wrap:wrap;}
.create-preset-select{flex:1 1 110px;min-width:100px;padding:5px 6px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#eee;font-size:12px;}
.create-preset-name{flex:1 1 110px;min-width:90px;padding:5px 7px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#eee;font-size:12px;}
.create-preset-select:focus,.create-preset-name:focus{outline:none;border-color:#8B5CF6;}
.status.status-error { color: #ff6b6b; border-color: #6b2b2b; background: #1a0e0e; }

.shape-contents-search-row { margin: 6px 0 7px; }
.shape-contents-search-row input { width: 100%; font-size: 11.5px; padding: 7px 8px; }
.shape-contents-flat-grid .shape-filter-hidden { display: none !important; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 12px; z-index: 99; }
.hidden { display: none; }
.modal { width: 100%; max-width: 320px; max-height: 92vh; overflow-y: auto; background: #262626; border: 1px solid #4a4a4a; border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
h2 { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; }
.grid2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; align-items: center; }
.grid2 label { color: #d7d7d7; font-size: 11.5px; }
.modal-actions { justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }

.ut-dialog-overlay { z-index: 100000; }
.ut-dialog-modal { max-width: 390px; }
.ut-text-lines-modal { width: 340px; max-width: calc(100vw - 24px); min-height: 0; max-height: calc(100vh - 24px); overflow: auto; padding: 16px; }
.ut-text-lines-modal h2 { font-size: 15px; margin: 0; }
.ut-text-lines-modal label { display: block; margin-bottom: 6px; font-size: 12px; }
.ut-text-lines-modal .small { font-size: 11px; line-height: 1.5; margin: 10px 0; color: #aaa; }
.ut-text-lines-modal .ut-dialog-input { width: 100%; box-sizing: border-box; }
.ut-text-lines-error { color: #ff9c93; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.ut-text-lines-error:empty { display: none; }
.ut-dialog-message { color: #ddd; font-size: 12px; line-height: 1.45; background: #181818; border: 1px solid #3a3a3a; border-radius: 8px; padding: 10px; max-height: 180px; overflow-y: auto; }
.ut-dialog-input { margin-top: 9px; width: 100%; box-sizing: border-box; background: #181818; color: #f4f4f4; border: 1px solid #4b79ff; border-radius: 8px; padding: 8px; outline: none; }
.ut-dialog-input:focus { box-shadow: 0 0 0 2px rgba(75,121,255,.28); }
.ut-dialog-actions .primary { background: #4b79ff; color: #fff; border-color: #4b79ff; }
.ut-dialog-actions .primary:hover { background: #5d88ff; }
.ut-ring-input-label { display:block; margin:10px 0 6px; font-size:12px; color:#ddd; }
.ut-ring-name-modal { width:440px; max-width:calc(100vw - 24px); }
.ut-ring-name-modal h3 { margin:0 0 12px; }
.ut-ring-name-modal .ut-dialog-input { margin-top:0; }

/* ── Scripts Section ─────────────────────────────────── */
.sc-search-wrap { margin-bottom: 6px; }
.sc-search-wrap input { font-size: 11.5px; }
.sc-list { width: 100%; min-height: 130px; max-height: 175px; overflow-y: auto; overflow-x: hidden; background: #181818; border: 1px solid #444; border-radius: 8px; padding: 4px; scroll-behavior: auto; overscroll-behavior: contain; }
.sc-item { display: grid; grid-template-columns: 1fr 26px 26px; gap: 4px; align-items: center; margin-bottom: 3px; }
.sc-name-btn { border: 0; border-radius: 7px; padding: 7px 8px; background: #303030; color: #fff; text-align: left; cursor: pointer; font-weight: 700; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.sc-name-btn:hover  { background: #3f3f3f; }
.sc-name-btn.selected { background: #4b79ff; }
.sc-fav-btn { border: 0; border-radius: 7px; padding: 6px 0; background: #2a2a2a; color: #ffcc44; cursor: pointer; font-size: 13px; text-align: center; }
.sc-fav-btn:hover { background: #383820; }
.sc-fav-btn.active { color: #ffcc44; background: #3a3510; }
.sc-run-inline { border: 0; border-radius: 7px; padding: 6px 0; background: #1a3a1a; color: #5dbb5d; cursor: pointer; font-size: 13px; text-align: center; }
.sc-run-inline:hover { background: #1e501e; }
.sc-section-head { color: #888; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 5px 4px 2px; }
.sc-empty { padding: 10px 8px; color: #888; font-size: 11.5px; }
.sc-actions { margin-top: 7px; flex-wrap: wrap; gap: 5px; }
/* Settings overlay */
.sc-set-row { margin-bottom: 8px; }
.sc-set-lbl { font-size: 11px; color: #aaa; display: block; margin-bottom: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.sc-folder-row { flex-wrap: nowrap; }
.sc-folder-row input { flex: 1; min-width: 0; font-size: 11px; }
.sc-toggles { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.sc-toggle-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #d7d7d7; cursor: pointer; }
.sc-toggle-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: #4b79ff; cursor: pointer; }
/* Error overlay */
.sc-error-body { background: #111; border: 1px solid #5a2222; border-radius: 8px; padding: 10px; font-size: 11px; color: #ff8888; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; margin-bottom: 4px; line-height: 1.5; }

/* ── Composition saved projects ───────────────────────── */
.comp-list { min-height: 120px; max-height: 240px; margin-top: 7px; display: grid; grid-template-columns: 1fr; gap: 6px; }
.comp-card { display: grid; grid-template-columns: 1fr 28px; gap: 5px; align-items: stretch; margin-bottom: 0; }
.comp-thumb-wrap { position: relative; min-height: 62px; border: 0; border-radius: 8px; overflow: hidden; padding: 0; background: #111; cursor: pointer; text-align: left; }
.comp-thumb-wrap:hover { outline: 1px solid #4b79ff; }
.comp-thumb { width: 100%; height: 72px; display: block; object-fit: cover; background: #121212; }
.comp-thumb-empty { background: linear-gradient(135deg, #171717, #303030); }
.comp-card-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 7px; background: rgba(0,0,0,.68); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-add-btn { height: 100%; min-height: 62px; font-weight: 900; }

/* ── Composition saved projects v3.8 ─────────────────── */
.comp-view-controls { margin-top: 7px; gap: 6px; }
.comp-view-controls label { color: #aaa; font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.comp-view-controls input[type="range"] { flex: 1; min-width: 80px; accent-color: #4b79ff; }
.comp-list { --comp-card-size: 104px; min-height: 150px; max-height: 305px; margin-top: 7px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--comp-card-size), 1fr)); gap: 7px; align-content: start; }
.comp-list .sc-section-head { grid-column: 1 / -1; }
.comp-card { display: block; min-width: 0; }
.comp-thumb-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; min-height: 0; border: 0; border-radius: 8px; overflow: hidden; padding: 0; background: #101010; cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1px #333; }
.comp-thumb-wrap:hover { outline: 1px solid #4b79ff; }
.comp-thumb { width: 100%; height: 100%; display: block; object-fit: contain; background: #111; }
.comp-thumb-empty { background: linear-gradient(135deg, #171717, #303030); }
.comp-card-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 6px; background: rgba(0,0,0,.72); color: #fff; font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-add-btn { display: none; }


/* ── v3.19 requested UI additions ───────────────────────── */
.presets-menu-control { display:grid; grid-template-columns: 72px minmax(110px,1fr); gap:7px; align-items:center; padding:5px 6px; border-radius:8px; background:#222; border:1px solid #393939; color:#ddd; font-size:10.5px; font-weight:800; }
.presets-menu-control input[type="range"] { width:100%; min-width:110px; accent-color:#4b79ff; }
.newcomp-group-title { grid-column:1 / -1; color:#b8b8b8; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.45px; padding:4px 2px 0; }
.newcomp-user-item { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 26px; gap:4px; }
.newcomp-user-item .btn { min-width:0; }
.newcomp-delete-btn { border:1px solid #4a2c2c; border-radius:7px; background:#342020; color:#fff; cursor:pointer; font-size:13px; font-weight:900; padding:0; }
.newcomp-delete-btn:hover { background:#8a3030; }
.comp-preview { height:var(--comp-preview-height,142px); min-height:var(--comp-preview-height,142px); max-height:var(--comp-preview-height,142px); border:1px solid #3d3d3d; border-radius:10px; background:#141414; margin-top:7px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; box-sizing:border-box; transition:none !important; }
.comp-preview.empty { height:var(--comp-preview-height,142px); min-height:var(--comp-preview-height,142px); max-height:var(--comp-preview-height,142px); color:#858585; font-size:11px; font-weight:700; text-align:center; padding:8px; box-sizing:border-box; }
.comp-preview-stage { width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center; background:#101010; overflow:hidden; }
.comp-preview-media { width:100%; height:100%; max-height:100%; object-fit:contain; display:block; background:#101010; }
.comp-preview-media.comp-preview-pending { opacity:0; position:absolute; left:0; top:0; pointer-events:none; }
.comp-preview-media.comp-preview-visible { opacity:1; }
.comp-preview-head { position:absolute; left:0; right:0; top:0; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:5px 6px; background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0)); pointer-events:none; }
.comp-preview-title { color:#fff; font-size:10.5px; font-weight:900; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.comp-preview-close { pointer-events:auto; width:23px; height:23px; border:0; border-radius:7px; background:rgba(0,0,0,.72); color:#fff; cursor:pointer; font-weight:900; }
.comp-card-preview-btn { position:absolute; right:5px; top:5px; z-index:3; width:24px; height:24px; border:0; border-radius:7px; background:rgba(35,35,35,.92); color:#fff; cursor:pointer; font-size:11px; line-height:24px; padding:0; opacity:.84; }
.comp-card-preview-btn:hover { opacity:1; background:#4b79ff; }

/* ── v24 Your compositions preview controls ───────────────── */
.composition-accordion { position: relative; }
.composition-accordion-head { padding-right: 42px; }
.comp-header-menu-wrap { position: absolute; top: 6px; right: 8px; z-index: 6; }
.comp-header-menu { width: 190px; }
.comp-preview-size-control, .assets-preview-size-control { display:grid; gap:4px; padding:6px; border-radius:8px; background:#222; border:1px solid #393939; color:#d8d8d8; font-size:10.5px; font-weight:800; }
.comp-preview-size-label, .assets-preview-size-label { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.comp-preview-size-control input[type="range"], .assets-preview-size-control input[type="range"] { width:100%; min-width:0; accent-color:#4b79ff; }
.comp-preview-resize-handle { height:16px; margin:3px 0 6px; border:1px solid #333; border-radius:7px; background:#202020; color:#8d8d8d; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:900; letter-spacing:.15px; cursor:ns-resize; user-select:none; -webkit-user-select:none; }
.comp-preview-resize-handle:hover { color:#fff; background:#303030; border-color:#4b79ff; }
.comp-preview-resize-handle.dragging { color:#fff; background:#384f9e; border-color:#7292ff; }
.comp-preview.collapsed { display: none !important; }
.comp-preview.collapsed + .comp-preview-resize-handle { display:none !important; }

.assets-preview-resize-handle { height:16px; margin:3px 0 6px; border:1px solid #333; border-radius:7px; background:#202020; color:#8d8d8d; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:900; letter-spacing:.15px; cursor:ns-resize; user-select:none; -webkit-user-select:none; }
.assets-preview-resize-handle:hover { color:#fff; background:#303030; border-color:#4b79ff; }
.assets-preview-resize-handle.dragging { color:#fff; background:#384f9e; border-color:#7292ff; }
.assets-preview.collapsed + .assets-preview-resize-handle { display:none !important; }
.comp-card.has-preview { cursor: pointer; }
.comp-card.has-preview:hover .comp-thumb-wrap { outline: 1px solid #4b79ff; }
.comp-card-preview-btn.disabled { opacity: .35; cursor: not-allowed; }
.marker-manage-toolbar { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:6px; }
.marker-manage-list { max-height:170px; overflow:auto; display:grid; gap:4px; border:1px solid #3d3d3d; border-radius:8px; background:#171717; padding:5px; }
.marker-manage-empty { opacity:.72; font-size:11px; text-align:center; padding:8px; }
.marker-manage-row { display:grid; grid-template-columns:54px minmax(0,1fr) 34px 28px; gap:5px; align-items:center; padding:5px; border-radius:7px; background:#2b2b2b; border:1px solid #3b3b3b; }
.marker-manage-time { color:#f3c247; font-size:10px; font-weight:900; }
.marker-manage-info { min-width:0; display:grid; gap:1px; }
.marker-manage-name { color:#fff; font-size:10.5px; font-weight:900; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.marker-manage-scope { color:#aaa; font-size:9px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.marker-manage-row .btn { padding:5px 0; font-size:10px; min-height:24px; }
.safezone-main-actions-top { margin-bottom:6px; }

/* ── Quick Action / Graph / Arrange ───────────────────── */
.extend-row { margin-top: 7px; grid-template-columns: 1fr 70px; }
.extend-row input { max-width: 82px; text-align: center; }
.graph-panel-box { background: #1b1b1b; border: 1px solid #3f3f3f; border-radius: 8px; padding: 6px; }
.graph-preview { height: 92px; border: 1px solid #393939; border-radius: 6px; background: #101010; position: relative; overflow: hidden; margin-bottom: 6px; }
.graph-preview svg { position: absolute; left: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); height: 62px; }
.graph-grid { fill: none; stroke: #254050; stroke-width: .7; opacity: .75; }
.graph-curve { fill: none; stroke: #66bde9; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.graph-dot { fill: #ffb21a; stroke: none; }
.graph-label { position: absolute; top: 6px; font-size: 10px; color: #e5e5e5; }
.graph-label.out { left: 7px; }
.graph-label.in { right: 7px; }
.graph-buttons { gap: 5px; margin-bottom: 6px; }
.graph-buttons .btn { flex: 1; }
.graph-sliders { display: grid; gap: 5px; margin-bottom: 6px; }
.graph-sliders label { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 5px; color: #bbb; font-size: 10.5px; font-weight: 700; }
.graph-sliders input[type="range"] { width: 100%; accent-color: #4b79ff; }
.graph-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 5px 0; }
.graph-preset-btn { border: 1px solid #363636; border-radius: 6px; height: 34px; background: #252525; color: #ddd; cursor: pointer; font-size: 10px; font-weight: 700; overflow: hidden; }
.graph-preset-btn:hover { border-color: #4b79ff; }
.aa-title { color: #aaa; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .45px; margin: 8px 0 5px; }
.anchor-grid { display: grid; grid-template-columns: repeat(3, 32px); grid-auto-rows: 28px; gap: 4px; justify-content: center; background: #1b1b1b; border: 1px solid #3d3d3d; border-radius: 8px; padding: 6px; }
.anchor-grid button { border: 0; border-radius: 6px; background: #363636; cursor: pointer; position: relative; }
.anchor-grid button:hover { background: #4b79ff; }
.anchor-grid button::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffb21a; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.align-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }

/* ── v3.10 New Composition / Reorder / Blend / Graph ───── */
.newcomp-fields { display: grid; gap: 6px; margin-bottom: 7px; }
.newcomp-duration-row input { max-width: 90px; text-align: center; }
.newcomp-duration-row span { color: #aaa; font-size: 11px; font-weight: 700; }
.newcomp-toolbar { justify-content: flex-end; margin: 0 0 6px; }
.newcomp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.newcomp-grid .btn { background: #101010; border: 1px solid #424242; font-size: 11px; padding: 7px 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.newcomp-grid .btn:hover { background: #343434; border-color: #777; }
.newcomp-grid.reorder-mode .btn { cursor: move; outline: 1px dashed #ffb21a; }
.newcomp-grid .btn.dragging { opacity: .45; }
.newcomp-grid .btn.drop-before { border-left: 2px solid #ffb21a; }
.dash-inline { display: grid; grid-template-columns: 1fr 34px; gap: 5px; }
.btn.gear { padding: 8px 0; background: #363636; font-size: 13px; }
.quickaction-grid { grid-template-columns: 1fr 1fr; }
.quickaction-grid .dash-inline { grid-column: span 2; }
.comp-card { position: relative; }
.comp-delete-btn { position: absolute; left: 5px; bottom: 5px; z-index: 3; width: 24px; height: 24px; border: 0; border-radius: 7px; background: rgba(179,56,56,.92); color: #fff; cursor: pointer; font-size: 13px; line-height: 24px; padding: 0; opacity: .78; }
.comp-delete-btn:hover { opacity: 1; filter: brightness(1.12); }
.blend-list { width: 100%; min-height: 130px; max-height: 230px; overflow-y: auto; overflow-x: hidden; background: #181818; border: 1px solid #444; border-radius: 8px; padding: 4px; }
.blend-row { display: grid; grid-template-columns: 26px 1fr; gap: 4px; align-items: center; margin-bottom: 3px; }
.blend-fav { border: 0; border-radius: 7px; padding: 6px 0; background: #2a2a2a; color: #9a9a9a; cursor: pointer; font-size: 13px; text-align: center; }
.blend-fav.active { color: #ffcc44; background: #3a3510; }
.blend-mode-btn { border: 0; border-radius: 7px; padding: 7px 8px; background: #303030; color: #fff; text-align: left; cursor: pointer; font-weight: 700; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.blend-mode-btn:hover { background: #4b79ff; }
.arrange-mode .accordion { outline: 1px dashed #ffb21a; cursor: move; }
.arrange-mode .accordion-head::before { content: '↕ '; color: #ffb21a; }
.arrange-mode .accordion.dragging { opacity: .45; }
.arrange-mode .accordion.drop-before { border-top: 2px solid #ffb21a; }
.graph-sync-row { margin: -1px 0 6px; color: #ccc; font-size: 10.5px; font-weight: 700; }
.graph-sync-row input { vertical-align: middle; accent-color: #4b79ff; }
.graph-dot { cursor: grab; }
.graph-dot:active { cursor: grabbing; }
.graph-preset-wrap { position: relative; min-width: 0; }
.graph-preset-btn { position: relative; height: 42px; padding: 0; font-size: 9px; width: 100%; }
.graph-preset-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .95; }
.graph-preset-btn span { position: relative; z-index: 1; display: block; padding-top: 23px; color: #eee; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.graph-rename-btn { position: absolute; top: -4px; right: -4px; z-index: 4; width: 18px; height: 18px; border: 0; border-radius: 50%; background: #3b3b3b; color: #fff; cursor: pointer; font-size: 10px; line-height: 18px; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.graph-rename-btn:hover { background: #4b79ff; }


/* ── Presets header menu ─────────────────────────────── */
.presets-accordion { position: relative; }
.presets-accordion-head { padding-right: 42px; }
.presets-header-menu-wrap {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 7;
}
.presets-header-menu { width: 128px; }

/* ── v3.11 Your Assets ───────────────────────────────── */
.assets-accordion { position: relative; }
.assets-accordion-head { padding-right: 42px; }
.assets-header-menu-wrap {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 6;
}
.assets-header-menu-btn {
  width: 28px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  background: #383838;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 24px;
  font-weight: 900;
  padding: 0;
}
.assets-header-menu-btn:hover,
.assets-header-menu-btn.active { background: #444; }
.assets-header-menu {
  position: absolute;
  top: 28px;
  right: 0;
  width: 158px;
  background: #252525;
  border: 1px solid #4a4a4a;
  border-radius: 9px;
  padding: 5px;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.assets-header-menu .btn {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 4px;
  background: #484848;
}
.assets-header-menu .btn.primary { background: #484848; }
.assets-header-menu .btn:last-child { margin-bottom: 0; }
.assets-list { width: 100%; min-height: 150px; max-height: 300px; overflow-y: auto; overflow-x: hidden; background: #181818; border: 1px solid #444; border-radius: 8px; padding: 4px; scroll-behavior: auto; overscroll-behavior: contain; }
.assets-folder { margin-bottom: 5px; border-radius: 8px; overflow: hidden; background: #202020; border: 1px solid #343434; }
.assets-folder-head { display: grid; grid-template-columns: 24px 1fr 28px 28px; gap: 4px; align-items: center; padding: 4px; background: #282828; }
.assets-folder-title { border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer; font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 2px; }
.assets-caret, .assets-mini-btn { border: 0; border-radius: 6px; background: #383838; color: #fff; cursor: pointer; height: 24px; font-size: 11px; font-weight: 900; padding: 0; }
.assets-mini-btn:hover, .assets-caret:hover { background: #4b79ff; }
.assets-mini-btn.danger:hover { background: #b33838; }
.assets-folder-files { padding: 3px; }
.assets-file-row { display: grid; grid-template-columns: 24px 1fr 26px; gap: 4px; align-items: center; margin-bottom: 3px; }
.assets-file-btn { border: 0; border-radius: 7px; padding: 7px 8px; background: #303030; color: #fff; text-align: left; cursor: pointer; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assets-file-btn:hover { background: #4b79ff; }
.assets-icon { text-align: center; color: #aaa; font-size: 13px; }
.assets-empty { padding: 9px 8px; color: #888; font-size: 11.5px; line-height: 1.35; }
.assets-reorder-mode .assets-folder-head, .assets-reorder-mode .assets-file-row { outline: 1px dashed #ffb21a; cursor: move; }
.assets-folder.dragging, .assets-file-row.dragging { opacity: .45; }
.assets-folder.drop-before, .assets-file-row.drop-before { border-top: 2px solid #ffb21a; }
.assets-file-row.missing .assets-file-btn { color: #8f8f8f; text-decoration: line-through; }

/* ── v3.12 refinements ───────────────────────────────── */
.newcomp-inline-fields { grid-template-columns: 1fr 68px 24px; align-items: center; gap: 5px; }
.newcomp-inline-fields input[type="number"] { text-align: center; padding-left: 4px; padding-right: 4px; }
.newcomp-inline-fields .duration-label { color: #aaa; font-size: 10.5px; font-weight: 800; }
.newcomp-inline-fields .reorder-icon { padding: 7px 0; font-size: 14px; }

.graph-preview { background: #111820; border-color: #303943; box-shadow: inset 0 0 0 1px #0a0f14; }
.graph-grid { stroke: #293846; stroke-width: .75; opacity: .92; }
.graph-fill { fill: rgba(102,189,233,.12); }
.graph-curve { stroke: #65c7f2; stroke-width: 2.6; filter: drop-shadow(0 0 2px rgba(101,199,242,.45)); }
.graph-handle-line { stroke: #e7a51b; stroke-width: 1.1; opacity: .95; vector-effect: non-scaling-stroke; }
.graph-key { fill: #111820; stroke: #f4b321; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.graph-dot { fill: #ffb21a; stroke: #111820; stroke-width: 1; }
.graph-delete-btn { position: absolute; top: -4px; left: -4px; z-index: 4; width: 18px; height: 18px; border: 0; border-radius: 50%; background: #6f2727; color: #fff; cursor: pointer; font-size: 12px; line-height: 18px; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.graph-delete-btn:hover { background: #b33838; }

.assets-view-thumb .assets-folder-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; padding: 6px; }
.assets-view-thumb .assets-file-row { display: grid; grid-template-columns: 1fr 24px; grid-template-rows: 68px auto; gap: 3px; align-items: stretch; margin: 0; background: #262626; border: 1px solid #373737; border-radius: 8px; padding: 4px; overflow: hidden; }
.assets-view-thumb .assets-icon { display: none; }
.assets-thumb-box { grid-column: 1 / 3; width: 100%; height: 68px; display: flex; align-items: center; justify-content: center; background: #111; border-radius: 6px; color: #aaa; font-size: 22px; overflow: hidden; }
.assets-thumb-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.assets-view-thumb .assets-file-btn { padding: 5px; font-size: 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assets-view-thumb .assets-mini-btn { height: 24px; }
.assets-view-thumb.assets-reorder-mode .assets-file-row { cursor: move; }

/* ── v3.14 colors / internal reorder / graph refinement ───────────── */
.action-reorder-toolbar { justify-content: flex-end; margin-bottom: 6px; }
.action-grid.action-reorder-mode { outline: 1px dashed #ffb21a; border-radius: 8px; padding: 4px; background: rgba(255,178,26,.04); }
.action-grid.action-reorder-mode .action-item { cursor: move !important; outline: 1px dashed #ffb21a; position: relative; }
.action-grid.action-reorder-mode .action-item::before { content: '↕'; position: absolute; left: 5px; top: 5px; z-index: 4; color: #ffb21a; font-size: 11px; font-weight: 900; pointer-events: none; text-shadow: 0 1px 2px #000; }
.action-grid .action-item.dragging { opacity: .45; }
.action-item.has-ic{display:flex;align-items:center;justify-content:center;gap:7px;}
.action-item.has-ic .ai-ic{flex:0 0 auto;display:inline-flex;align-items:center;color:#b7b7c0;}
.action-item.has-ic .ai-ic .ut-svg-ic{width:15px;height:15px;display:block;}
.action-item.has-ic .ai-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.action-item.has-ic:hover .ai-ic{color:#8B5CF6;}
/* Arrange & Align: add the icon INLINE without changing each button's display/size
   (prevents the align grid — especially the X/Y buttons — from shifting) */
.btn.small.has-ic .ai-ic{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px;color:#b7b7c0;}
.btn.small.has-ic .ai-ic .ut-svg-ic{width:13px;height:13px;display:block;}
.btn.small.has-ic .ai-lbl{vertical-align:middle;}
.btn.small.has-ic:hover .ai-ic{color:#8B5CF6;}
.precompose-pair { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.extend-row.action-item { grid-column: span 2; display: grid; grid-template-columns: 1fr 54px; gap: 6px; margin: 0; }
.extend-row.action-item input { width: 100%; text-align: center; }

.graph-preview { background: #0f151b; border-color: #2d3740; }
.graph-preview svg { height: 64px; bottom: 7px; }
.graph-grid { stroke: #2b3e4b; stroke-width: .65; opacity: .78; }
.graph-curve { stroke: #65c7f2; stroke-width: 2.4; filter: drop-shadow(0 0 1.5px rgba(101,199,242,.55)); }
.graph-fill, .graph-dot, .graph-handle-line { display: none !important; }
.graph-key { fill: #0f151b; stroke: #f4b321; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.graph-rename-btn, .graph-delete-btn { opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; transform: scale(.9); }
.graph-preset-wrap:hover .graph-rename-btn, .graph-preset-wrap:hover .graph-delete-btn { opacity: 1; pointer-events: auto; transform: scale(1); }
.graph-preset-btn svg path:nth-child(2) { filter: drop-shadow(0 0 1.3px rgba(102,189,233,.5)); }

.colors-toolbar { flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.colors-toolbar .btn { flex: 1 1 auto; }
.color-hex-box { margin: 0 0 12px; display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(84px, max-content); gap: 8px; align-items: center; }
.color-hex-box input[type="text"] { box-sizing: border-box; width: 100%; min-width: 0; height: 34px; font-size: 10.5px; padding: 7px 8px; border-radius: 7px; }
.color-hex-box .btn { box-sizing: border-box; height: 34px; min-width: 84px; padding: 7px 12px; white-space: nowrap; }
.hex-live-preview { width: 34px; height: 34px; display: block; box-sizing: border-box; border-radius: 8px; border: 1px solid #444; background: linear-gradient(135deg, #2a2a2a 25%, #1f1f1f 25%, #1f1f1f 50%, #2a2a2a 50%, #2a2a2a 75%, #1f1f1f 75%); background-size: 10px 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.hex-live-preview[data-valid="1"] { border-color: rgba(255,255,255,.34); box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.18); }
.color-api-box { margin: 0 0 7px; padding: 7px; border-radius: 8px; background: #202020; border: 1px solid #353535; display: grid; gap: 5px; }
.color-api-title { color: #d6d6d6; font-size: 10.5px; font-weight: 800; letter-spacing: .2px; }
.color-api-box input[type="text"], .color-api-box input[type="password"] { font-size: 10.5px; padding: 6px; }
.color-api-row { justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.color-api-row label { color: #bbb; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.color-api-row input[type="number"] { width: 48px; padding: 4px; text-align: center; font-size: 10.5px; }
.color-api-row input[type="checkbox"] { width: 13px; height: 13px; accent-color: #4b79ff; }

.colors-list { width: 100%; min-height: 120px; max-height: 300px; overflow-y: auto; overflow-x: hidden; background: #181818; border: 1px solid #444; border-radius: 8px; padding: 4px; }
.color-group { margin-bottom: 5px; border-radius: 8px; overflow: hidden; background: #202020; border: 1px solid #343434; }
.color-group.active { border-color: #4b79ff; box-shadow: 0 0 0 1px rgba(75,121,255,.35); }
.color-group-head { display: grid; grid-template-columns: 24px 1fr 28px 28px; gap: 4px; align-items: center; padding: 4px; background: #282828; }
.color-group-title { border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer; font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 2px; }
.color-caret, .color-mini-btn { border: 0; border-radius: 6px; background: #383838; color: #fff; cursor: pointer; height: 24px; font-size: 11px; font-weight: 900; padding: 0; }
.color-mini-btn:hover, .color-caret:hover { background: #4b79ff; }
.color-mini-btn.danger:hover { background: #b33838; }
.color-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 6px; padding: 7px; }
.color-swatch-wrap { position: relative; height: 34px; }
.color-swatch-wrap:hover,.color-swatch-wrap:focus-within{z-index:3}
#compMogrtToAepBtn{margin-top:8px}
.color-swatch { width: 100%; height: 34px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.color-swatch:hover { outline: 2px solid #4b79ff; outline-offset: 1px; }
.color-remove { position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: #6f2727; color: #fff; line-height: 16px; text-align: center; font-size: 11px; cursor: pointer; opacity: 0; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.color-swatch-wrap:hover .color-remove { opacity: 1; }
.colors-empty { grid-column: 1 / -1; padding: 8px; color: #888; font-size: 11.5px; line-height: 1.35; }

.assets-reorder-mode { outline: 1px dashed #ffb21a; background: rgba(255,178,26,.035); }
.assets-reorder-mode .assets-folder-head::before { content: '↕'; color: #ffb21a; font-weight: 900; text-align: center; line-height: 24px; }
.assets-reorder-mode .assets-folder-head { grid-template-columns: 24px 1fr 28px 28px; }
.assets-reorder-mode .assets-caret { display: none; }
.assets-reorder-mode .assets-folder-head, .assets-reorder-mode .assets-file-row { outline: 1px dashed #ffb21a; cursor: move; }
.newcomp-grid.reorder-mode { outline: 1px dashed #ffb21a; border-radius: 8px; padding: 4px; background: rgba(255,178,26,.04); }

/* ── v3.14 refinements ───────────────────────────────── */
.quickaction-grid { grid-template-columns: 1fr 1fr; }
.quickaction-grid .precompose-pair,
.quickaction-grid .dash-inline,
.quickaction-grid .extend-row { grid-column: span 2; }
.assets-file-row { cursor: pointer; }
.assets-file-row:hover .assets-file-btn { background: #4b79ff; }
.assets-reorder-mode .assets-file-row { cursor: move; }
.color-swatch[title] { cursor: pointer; }

.ae-speed-preview { height: 118px; background: #252525; border-color: #181818; box-shadow: inset 0 0 0 1px #333; }
.ae-speed-preview svg { left: 5px; right: 5px; bottom: 5px; width: calc(100% - 10px); height: 100px; }
.ae-graph-bg { fill: #262626; }
.ae-y-label { fill: #b7bec7; font-size: 9px; font-family: Arial, Helvetica, sans-serif; }
.graph-zero { fill: none; stroke: #8d8d8d; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.graph-dotted { fill: none; stroke: #d52518; stroke-width: 1.2; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.ae-speed-preview .graph-grid { stroke: #0f0f0f; stroke-width: .9; opacity: 1; vector-effect: non-scaling-stroke; }
.ae-speed-preview .graph-curve { stroke: #d52518; stroke-width: 2.2; fill: none; filter: none; vector-effect: non-scaling-stroke; }
.ae-speed-preview .graph-key { fill: #ffffff; stroke: #d7d7d7; stroke-width: .9; vector-effect: non-scaling-stroke; }
.ae-speed-preview .graph-handle-line { display: block !important; stroke: #cfbd21; stroke-width: 1.2; opacity: .95; vector-effect: non-scaling-stroke; }
.ae-speed-preview .graph-handle-dot { fill: #cfbd21; stroke: none; }
.graph-empty { grid-column: 1 / -1; color: #888; font-size: 10.5px; padding: 7px; border: 1px dashed #3a3a3a; border-radius: 7px; text-align: center; }
.graph-presets { grid-template-columns: repeat(3, 1fr); }
.graph-preset-btn svg path:nth-child(2) { filter: none; }
.graph-preset-btn span { padding-top: 24px; }

/* ── v3.31 AE-like Graph Editor preview ───────────────── */
.ae-speed-preview {
  height: 130px;
  background: #242424;
  border-color: #101010;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #343434, inset 0 10px 0 rgba(255,255,255,.025);
}
.ae-speed-preview svg {
  left: 5px;
  right: 5px;
  bottom: 4px;
  width: calc(100% - 10px);
  height: 104px;
}
.ae-graph-title {
  position: absolute;
  left: 50%;
  top: 5px;
  transform: translateX(-50%);
  color: #b8b8b8;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2px;
  pointer-events: none;
}
.ae-speed-preview .graph-label {
  top: 5px;
  color: #d2d2d2;
  font-size: 9.5px;
  font-weight: 700;
}
.ae-speed-preview .graph-label.out { left: 8px; }
.ae-speed-preview .graph-label.in { right: 8px; }
.ae-speed-preview .ae-graph-bg { fill: #262626; }
.ae-speed-preview .ae-y-label {
  fill: #a9a9a9;
  font-size: 8.5px;
  font-family: Arial, Helvetica, sans-serif;
}
.ae-speed-preview .graph-grid {
  stroke: #101010;
  stroke-width: 1;
  opacity: 1;
  vector-effect: non-scaling-stroke;
}
.ae-speed-preview .graph-zero {
  stroke: #969696;
  stroke-width: 1.1;
  opacity: .95;
  vector-effect: non-scaling-stroke;
}
.graph-key-guide {
  stroke: #c6b12a;
  stroke-width: .8;
  opacity: .45;
  vector-effect: non-scaling-stroke;
}
.ae-speed-preview .graph-curve {
  stroke: #d52417;
  stroke-width: 2.05;
  fill: none;
  filter: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ae-speed-preview .graph-dotted {
  stroke: #d52417;
  stroke-width: 1.15;
  stroke-dasharray: 2 2;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.ae-speed-preview .graph-key {
  fill: #f2f2f2;
  stroke: #d7d7d7;
  stroke-width: .9;
  vector-effect: non-scaling-stroke;
}
.ae-speed-preview .graph-handle-line {
  display: block !important;
  stroke: #c9b91e;
  stroke-width: 1.15;
  opacity: .95;
  vector-effect: non-scaling-stroke;
}
.ae-speed-preview .graph-handle-dot {
  fill: #c9b91e;
  stroke: #111;
  stroke-width: .35;
  vector-effect: non-scaling-stroke;
}
.graph-preset-btn {
  border-radius: 3px;
  background: #262626;
  border-color: #151515;
}
.graph-preset-btn:hover { border-color: #c9b91e; }
.graph-preset-btn span {
  background: rgba(0,0,0,.45);
  padding-top: 25px;
}

/* ── v3.32 Graph panel: reference-style AE Graph preview ───────────── */
.ae-graph-fieldset {
  position: relative;
  background: #191919;
  border: 1px solid #343434;
  border-radius: 3px;
  padding: 9px 6px 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.graph-panel-legend {
  position: absolute;
  top: -8px;
  left: 8px;
  padding: 0 4px;
  background: #191919;
  color: #c9c9c9;
  font-size: 10px;
  line-height: 12px;
  pointer-events: none;
}
.ae-graph-fieldset .ae-speed-preview {
  height: 82px;
  margin-bottom: 6px;
  background: #151515;
  border: 1px solid #343434;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.65);
}
.ae-graph-fieldset .ae-speed-preview svg {
  left: 4px;
  right: 4px;
  bottom: 3px;
  width: calc(100% - 8px);
  height: 64px;
}
.ae-graph-fieldset .ae-speed-preview .graph-label {
  top: 5px;
  color: #e1e1e1;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
}
.ae-graph-fieldset .ae-speed-preview .graph-label.out { left: 6px; }
.ae-graph-fieldset .ae-speed-preview .graph-label.in { right: 6px; }
.ae-graph-fieldset .ae-graph-title,
.ae-graph-fieldset .ae-y-label,
.ae-graph-fieldset .graph-key-guide {
  display: none !important;
}
.ae-graph-fieldset .ae-speed-preview .ae-graph-bg { fill: #151515; }
.ae-graph-fieldset .ae-speed-preview .graph-grid {
  stroke: #282828;
  stroke-width: .9;
  opacity: 1;
  vector-effect: non-scaling-stroke;
}
.ae-graph-fieldset .ae-speed-preview .graph-zero {
  stroke: #455158;
  stroke-width: 1;
  opacity: .9;
  vector-effect: non-scaling-stroke;
}
.ae-graph-fieldset .ae-speed-preview .graph-curve {
  stroke: #58bdec;
  stroke-width: 2.2;
  fill: none;
  filter: drop-shadow(0 0 1px rgba(88,189,236,.45));
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ae-graph-fieldset .ae-speed-preview .graph-dotted {
  stroke: #d9a72a;
  stroke-width: 1;
  stroke-dasharray: none;
  opacity: .95;
  vector-effect: non-scaling-stroke;
}
.ae-graph-fieldset .ae-speed-preview .graph-handle-line {
  display: block !important;
  stroke: #d9a72a;
  stroke-width: 1.1;
  opacity: .95;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.ae-graph-fieldset .ae-speed-preview .graph-handle-dot {
  display: block !important;
  fill: #f0aa18;
  stroke: #0d0d0d;
  stroke-width: .3;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.ae-graph-fieldset .ae-speed-preview .graph-key {
  fill: #151515;
  stroke: #d9a72a;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}
.ae-graph-fieldset .graph-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 5px;
}
.graph-peak-row { margin: 0 0 8px; }
.graph-peak-row .btn { width: 100%; min-height: 28px; }
.ae-graph-fieldset .graph-buttons .btn {
  min-width: 0;
  height: 24px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
  background: #242424;
  border-color: #3c3c3c;
  color: #e0e0e0;
}
.ae-graph-fieldset .graph-buttons #graphDuplicateLastKeysBtn {
  grid-column: 1 / -1;
  height: auto;
  min-height: 28px;
  padding: 5px 4px;
  white-space: normal;
}
.ae-graph-fieldset .graph-buttons .btn:hover,
.ae-graph-fieldset .graph-plus-btn:hover {
  border-color: #d9a72a;
}
.ae-graph-fieldset .graph-sliders.compact {
  display: grid;
  gap: 6px;
  margin: 0 0 6px;
  padding: 6px;
  background: #151515;
  border: 1px solid #343434;
  border-radius: 3px;
}
.ae-graph-fieldset .graph-slider-row {
  display: grid;
  grid-template-columns: 24px 1fr 34px;
  align-items: center;
  gap: 6px;
}
.ae-graph-fieldset .graph-slider-name {
  color: #d7d7d7;
  font-size: 10px;
  font-weight: 700;
}
.ae-graph-fieldset .graph-slider-value {
  color: #e0e0e0;
  font-size: 9.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ae-graph-fieldset .graph-slider-row input[type="range"] {
  width: 100%;
  height: 14px;
  margin: 0;
  accent-color: #d9a72a;
}
.ae-graph-fieldset .graph-sync-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #cfcfcf;
  font-size: 10px;
  font-weight: 700;
}
.ae-graph-fieldset .graph-sync-row input {
  accent-color: #d9a72a;
}
.graph-preset-row {
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 5px;
  align-items: stretch;
}
.ae-graph-fieldset .graph-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 0;
}
.ae-graph-fieldset .graph-preset-wrap {
  min-width: 0;
}
.ae-graph-fieldset .graph-preset-btn {
  height: 39px;
  width: 100%;
  border-radius: 2px;
  background: #151515;
  border: 1px solid #343434;
  overflow: hidden;
}
.ae-graph-fieldset .graph-preset-btn svg {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}
.ae-graph-fieldset .graph-preset-btn span {
  display: none;
}
.ae-graph-fieldset .graph-empty {
  display: none;
}
.ae-graph-fieldset .graph-plus-btn {
  height: 39px;
  width: 34px;
  padding: 0;
  border-radius: 3px;
  background: #242424;
  border: 1px solid #3c3c3c;
  color: #e8e8e8;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}


/* ── v3.34 Graph slider-only control ─────────────────────────────── */
.ae-graph-fieldset .ae-speed-preview .graph-handle-line,
.ae-graph-fieldset .ae-speed-preview .graph-handle-dot {
  cursor: default !important;
  pointer-events: none !important;
}

/* ── v3.35 Graph library: manual values + editable collapsible lists ── */
.ae-graph-fieldset {
  padding-top: 6px;
}
.ae-graph-fieldset .graph-panel-legend {
  display: none !important;
}
.ae-graph-fieldset .graph-slider-row {
  grid-template-columns: 24px 1fr 44px;
}
.ae-graph-fieldset .graph-number {
  width: 44px;
  height: 19px;
  padding: 0 3px;
  box-sizing: border-box;
  background: #242424;
  border: 1px solid #3c3c3c;
  border-radius: 3px;
  color: #e8e8e8;
  font-size: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.ae-graph-fieldset .graph-number:focus {
  border-color: #d9a72a;
}
.graph-library-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  margin: 0 0 6px;
}
.graph-library-toolbar .btn {
  height: 24px;
  min-width: 0;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
  background: #242424;
  border-color: #3c3c3c;
  color: #e0e0e0;
}
.graph-library-toolbar .btn:hover,
.graph-library-toolbar .btn.active {
  border-color: #d9a72a;
}
.ae-graph-fieldset .graph-presets.graph-groups {
  display: block;
  margin: 0;
}
.graph-group {
  border: 1px solid #343434;
  background: #151515;
  border-radius: 3px;
  margin-bottom: 5px;
  overflow: hidden;
}
.graph-group.active {
  border-color: #5a4d1a;
}
.graph-group-head {
  display: grid;
  grid-template-columns: 18px 1fr auto auto auto auto;
  align-items: center;
  gap: 3px;
  min-height: 24px;
  background: #202020;
  border-bottom: 1px solid #303030;
  padding: 2px 3px;
}
.graph-group-caret,
.graph-group-title,
.graph-mini-edit-btn {
  height: 20px;
  border: 1px solid transparent;
  background: transparent;
  color: #e0e0e0;
  font-size: 10px;
  border-radius: 2px;
  cursor: pointer;
}
.graph-group-caret {
  padding: 0;
  color: #d9a72a;
}
.graph-group-title {
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 3px;
  font-weight: 700;
}
.graph-group-caret:hover,
.graph-group-title:hover,
.graph-mini-edit-btn:hover {
  border-color: #d9a72a;
  background: #292929;
}
.graph-mini-edit-btn {
  width: 20px;
  padding: 0;
  background: #262626;
  border-color: #373737;
}
.graph-mini-edit-btn.danger,
.graph-preset-tool.danger {
  color: #ffd8d8;
  border-color: #653232;
}
.graph-mini-edit-btn.danger:hover,
.graph-preset-tool.danger:hover {
  background: #743030;
  border-color: #b34747;
}
.graph-group-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 5px;
}
.ae-graph-fieldset .graph-group-body .graph-empty {
  display: block;
  grid-column: 1 / -1;
  height: auto;
  color: #888;
  font-size: 10px;
  padding: 7px;
  border: 1px dashed #3a3a3a;
  border-radius: 3px;
  text-align: center;
}
.ae-graph-fieldset .graph-group-body .graph-preset-wrap {
  position: relative;
  min-width: 0;
}
.ae-graph-fieldset .graph-group-body .graph-preset-btn {
  height: 39px;
  width: 100%;
}
.graph-preset-edit-tools {
  position: absolute;
  inset: 2px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 2px;
  background: rgba(0,0,0,.72);
  border-radius: 2px;
}
.graph-preset-tool {
  min-width: 0;
  height: 100%;
  padding: 0;
  border-radius: 2px;
  border: 1px solid #494949;
  background: #242424;
  color: #e8e8e8;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
.graph-preset-tool:hover {
  border-color: #d9a72a;
  background: #303030;
}
.ae-graph-fieldset .graph-plus-btn {
  min-height: 24px;
  height: auto;
}


/* ── v3.36 Graph group selector + quick edit/delete ───────────────── */
.graph-target-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 5px;
  align-items: center;
  margin: 0 0 6px;
}
.graph-target-label {
  color: #cfcfcf;
  font-size: 10px;
  font-weight: 700;
  text-align: left;
}
.graph-group-select {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 4px;
  box-sizing: border-box;
  background: #242424;
  border: 1px solid #3c3c3c;
  border-radius: 3px;
  color: #e8e8e8;
  font-size: 10px;
  outline: none;
}
.graph-group-select:focus {
  border-color: #d9a72a;
}
.graph-preset-quick-tools {
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(2, 18px);
  gap: 2px;
}
.graph-preset-quick-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 2px;
  border: 1px solid #494949;
  background: rgba(24,24,24,.95);
  color: #ececec;
  font-size: 10px;
  line-height: 16px;
  cursor: pointer;
}
.graph-preset-quick-btn:hover {
  border-color: #d9a72a;
  background: #303030;
}
.graph-preset-quick-btn.danger {
  color: #ffd8d8;
  border-color: #653232;
}
.graph-preset-quick-btn.danger:hover {
  background: #743030;
  border-color: #b34747;
}
.graph-preset-edit-tools {
  top: auto;
  bottom: 2px;
  left: 2px;
  right: 2px;
  inset: auto 2px 2px 2px;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(0,0,0,.62);
}


/* ── v3.38 Graph: collapsible groups without group dropdown ─────── */
.graph-target-row, .graph-group-select, .graph-target-label { display: none !important; }
.graph-group.closed .graph-group-head { border-bottom: 0; }
.graph-group.closed { background: #181818; }
.graph-group.open .graph-group-head { border-bottom: 1px solid #303030; }
.graph-group-caret { font-weight: 900; }
.graph-group.closed .graph-group-title { color: #bfbfbf; }
.graph-group.closed .graph-group-caret { color: #f0c044; }

/* ── v3.40 Graph modes, properties, and sidebar navigation ───────── */
.graph-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  margin-bottom: 6px;
}
.graph-mode-switch .btn {
  height: 24px;
  padding: 0 3px;
  background: #242424;
  border: 1px solid #3c3c3c;
  border-radius: 3px;
  color: #dcdcdc;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.graph-mode-switch .btn.active {
  background: #3a3418;
  border-color: #d9a72a;
  color: #fff;
}
.ae-speed-preview.value-mode .graph-dotted { display: none !important; }
.ae-speed-preview.value-mode .graph-curve { stroke: #d52518; }
.ae-speed-preview.value-mode .graph-grid { stroke: #121212; }
.properties-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.properties-grid .btn { min-height: 31px; }

.section-sidebar {
  position: fixed;
  left: 5px;
  top: 44px;
  z-index: 30;
  width: 148px;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
  border: 1px solid #343434;
  border-radius: 9px;
  background: rgba(30,30,30,.96);
  box-shadow: 0 8px 22px rgba(0,0,0,.42);
  transition: width .16s ease;
}
.section-sidebar.collapsed { width: 36px; }
.section-sidebar-toggle {
  width: 100%;
  height: 24px;
  margin-bottom: 4px;
  border: 0;
  border-radius: 6px;
  background: #333;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
}
.section-sidebar-list { display: grid; gap: 4px; }
.section-side-btn {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 26px;
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #252525;
  color: #efefef;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
  text-align: left;
}
.section-side-btn:hover,
.section-side-btn.active {
  border-color: #d9a72a;
  background: #303030;
}
.section-side-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  color: #f0c044;
  font-size: 11px;
  font-weight: 900;
}
.section-side-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* SVG sidebar icons: neutral gray by default, brand violet when the section is active/hovered */
.section-side-icon .ut-svg-ic { width: 17px; height: 17px; display: block; }
.section-side-icon { color: #b7b7c0 !important; }
.section-side-btn:hover .section-side-icon { color: #8B5CF6 !important; }
.section-side-btn.active .section-side-icon { color: #8B5CF6 !important; }
.section-sidebar.collapsed .section-side-btn { grid-template-columns: 1fr; padding: 2px; justify-items: center; }
.section-sidebar.collapsed .section-side-label { display: none; }
.section-sidebar.collapsed .section-side-icon { min-width: 0; width: 100%; }
.app { padding-left: 44px; }

/* ── v3.41 true side navigation + grouped Properties ───────────── */
.app.side-ui {
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  transition: padding-left .16s ease;
}
.app.side-ui.sidebar-collapsed { padding-left: 49px !important; }
.app.side-ui.sidebar-expanded { padding-left: 158px !important; }
.app.side-ui > .accordion[data-section] { display: none; }
.app.side-ui > .accordion[data-section].side-active { display: block; }
.app.side-ui > .accordion.side-active {
  margin-bottom: 0;
  min-height: calc(100vh - 58px);
}
.app.side-ui > .accordion.side-active .accordion-head {
  background: #202020;
  border-bottom: 1px solid #343434;
}
.app.side-ui > .accordion.side-active .accordion-body { display: block; }
.section-sidebar {
  left: 6px;
  top: 41px;
  bottom: 8px;
  max-height: none;
  transition: width .16s ease, box-shadow .16s ease;
}
.section-sidebar:not(.collapsed) {
  width: 145px;
}
.section-sidebar.collapsed {
  width: 36px;
}
.section-sidebar.collapsed .section-sidebar-toggle { font-size: 0; }
.section-sidebar.collapsed .section-sidebar-toggle::before { content: '☰'; font-size: 13px; }
.section-side-btn.active .section-side-icon { color: #fff; }
.properties-panel { display: grid; gap: 7px; }
.properties-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 6px;
  margin-bottom: 2px;
}
.properties-grid .btn { min-height: 30px; font-size: 10.5px; }
.prop-section-title {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
  align-items: center;
  margin: 2px 0 0;
  color: #d6d6d6;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .25px;
  text-transform: uppercase;
}
.prop-section-title::after {
  content: '';
  height: 1px;
  background: #454545;
  display: block;
}

/* ── v3.42 sidebar/order/properties refinements ───────────────── */
.accordion-head span { display: none !important; }
.section-side-icon { color: #b7b7c0 !important; }
.section-side-btn:hover .section-side-icon { color: #8B5CF6 !important; }
.section-side-btn.active .section-side-icon { color: #8B5CF6 !important; }
.section-sidebar.reorder-mode { outline: 1px dashed #f0c044; }
.section-sidebar.reorder-mode .section-side-btn { cursor: move; outline: 1px dashed rgba(240,192,68,.45); }
.section-sidebar.reorder-mode .section-side-btn::before { content: '↕'; color: #f0c044; font-size: 10px; font-weight: 900; }
.section-sidebar.reorder-mode:not(.collapsed) .section-side-btn { grid-template-columns: 12px 24px 1fr; }
.section-sidebar.reorder-mode.collapsed .section-side-btn { grid-template-columns: 1fr; }
.section-sidebar.reorder-mode.collapsed .section-side-btn::before { display: none; }
.section-sidebar.reorder-mode .section-side-btn.dragging { opacity: .45; }
.section-sidebar.reorder-mode .section-sidebar-toggle { background: #d9a72a; color: #111; }
.section-sidebar.reorder-mode.collapsed .section-sidebar-toggle::before { content: '✓'; font-size: 14px; color: #111; }
.section-sidebar.reorder-mode:not(.collapsed) .section-sidebar-toggle::before { content: '✓ '; }
.section-sidebar.reorder-mode:not(.collapsed) .section-sidebar-toggle { font-size: 0; }
.section-sidebar.reorder-mode:not(.collapsed) .section-sidebar-toggle::before { font-size: 14px; }


/* ── v3.54 Graph saved-preset tools appear on hover only ───────────── */
.graph-preset-quick-tools {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, visibility .12s ease;
}
.graph-preset-wrap:hover .graph-preset-quick-tools,
.graph-preset-wrap:focus-within .graph-preset-quick-tools {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.graph-preset-edit-tools {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, visibility .12s ease;
}
.graph-preset-wrap:hover .graph-preset-edit-tools,
.graph-preset-wrap:focus-within .graph-preset-edit-tools {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ── v3.55 Your Assets stable audio/video preview ─────────────── */
.assets-preview {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 7px;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  background: #141414;
  color: #aaa;
  font-size: 10.5px;
  line-height: 1.35;
  padding: 7px;
  min-height: 232px;
  overflow: hidden;
  transition: none;
}
.assets-preview.empty {
  border-style: dashed;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.assets-preview-placeholder {
  padding: 8px;
  color: #8f8f8f;
}
.assets-preview.active {
  border-color: #3a3a3a;
  background: #171717;
}
.assets-preview-head {
  display: grid;
  grid-template-columns: 1fr 22px;
  gap: 5px;
  align-items: center;
  margin-bottom: 6px;
}
.assets-preview-title {
  min-width: 0;
  color: #f0f0f0;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assets-preview-close {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 5px;
  background: #333;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  line-height: 20px;
  padding: 0;
}
.assets-preview-close:hover { background: #b33838; }
.assets-preview-stage {
  width: 100%;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050505;
  border-radius: 6px;
  overflow: hidden;
}
.assets-preview-media {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border-radius: 6px;
  background: #050505;
  outline: none;
  object-fit: contain;
}
.assets-preview.audio-preview .assets-preview-media {
  height: 34px;
  border-radius: 4px;
}

.assets-preview.image-preview .assets-preview-media {
  object-fit: contain;
}
.assets-file-row.has-preview { grid-template-columns: 24px 1fr 26px 26px; }
.assets-preview-btn { color: #f7d15b; }
.assets-preview-btn:hover { background: #5a4d1a; }
.assets-preview-btn:disabled { opacity: .35; cursor: not-allowed; }
.assets-view-thumb .assets-file-row.has-preview { grid-template-columns: 1fr 24px 24px; }
.assets-view-thumb .assets-file-row.has-preview .assets-thumb-box { grid-column: 1 / 4; }
.assets-view-thumb .assets-file-row.has-preview .assets-file-btn { grid-column: 1 / 2; }
.assets-preview-btn.disabled { opacity: .35; cursor: not-allowed; }

/* ── Markers Section ─────────────────────────────────── */
.markers-body { padding-top: 7px; }
.marker-scope-row { display: grid; grid-template-columns: 48px 1fr 1fr; gap: 5px; align-items: center; margin-bottom: 7px; }
.marker-scope-label { color: #aaa; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .45px; }
.marker-section-title { color: #aaa; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .45px; margin: 8px 0 5px; }
.marker-grid { grid-template-columns: 1fr 1fr; gap: 5px; }
.marker-grid .marker-layer-edges-btn { grid-column: 1 / -1; }
.marker-boundary-grid { display: grid; grid-template-columns: 62px 1fr 1fr; gap: 5px; align-items: center; }
.marker-boundary-grid input[type="number"] { min-width: 0; text-align: center; padding-left: 4px; padding-right: 4px; }
.marker-boundary-grid .btn, .marker-grid .btn { min-width: 0; white-space: normal; line-height: 1.15; }

/* ── Markers header menu + controls ─────────────────── */
.markers-accordion { position: relative; }
.markers-accordion-head { padding-right: 42px; }
.markers-header-menu-wrap {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 7;
}
.markers-header-menu { width: 150px; }
.marker-name-row { margin: 7px 0; }
.marker-section-title em { color: #a8a8a8; font-style: normal; font-size: 10px; font-weight: 700; }
.marker-shift-grid { display: grid; grid-template-columns: 58px 1fr 1fr; gap: 6px; align-items: center; }
.marker-shift-grid input { grid-row: span 2; min-width: 0; text-align: center; padding-left: 4px; padding-right: 4px; }
.marker-shift-grid .btn { min-width: 0; white-space: normal; line-height: 1.15; padding-left: 5px; padding-right: 5px; }
.marker-clipboard-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.marker-delete-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.marker-delete-grid .btn { min-width: 0; white-space: normal; line-height: 1.15; padding-left: 5px; padding-right: 5px; }


/* ── Markers help window ─────────────────────────────── */
.markers-help-modal { max-width: 380px; }
.markers-help-text { background: #111; border: 1px solid #3f3f3f; border-radius: 8px; padding: 10px; font-size: 11.5px; line-height: 1.55; color: #e6e6e6; white-space: pre-wrap; max-height: 68vh; overflow-y: auto; user-select: text; }

/* ── v3.72 Ultimate Tools refinements ───────────────────────── */
.panel-menu-sep { height: 1px; background: #3b3b3b; margin: 5px 2px; }
.section-header-menu-wrap { position: absolute; top: 5px; right: 7px; z-index: 15; }
.section-header-menu { width: 150px; }
.app.side-ui > .accordion.side-active { position: relative; }
.generic-help-modal { max-width: 390px; }

.preset-section-head { color: #d9a72a; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .45px; padding: 6px 5px 4px; border-bottom: 1px solid #333; margin-top: 3px; }
.preset-empty.small { font-size: 10.5px; padding: 6px; }
.preset-source-default .preset-button { background: #2d2a1b; border: 1px solid rgba(217,167,42,.32); }
.preset-delete.disabled { opacity: .35; cursor: not-allowed; background: #333; }

.assets-thumb-mini { width: 24px; height: 24px; border-radius: 6px; background: #111; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 12px; }
.assets-thumb-mini img, .assets-thumb-mini video, .assets-thumb-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.assets-thumb-box video { background: #070707; }
.assets-preview.collapsed { display: none !important; }
.assets-preview-close::after { content: ''; }

.colors-tools-row { flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.colors-tools-row .btn { flex: 1 1 120px; }
.color-replace-modal { max-width: 390px; }
.color-replace-row { display: grid; gap: 4px; margin-bottom: 8px; }
.color-replace-row label { color: #d9a72a; font-size: 10.5px; font-weight: 900; text-transform: uppercase; }
.color-replace-input-row { display: grid; grid-template-columns: 1fr 70px; gap: 6px; align-items: center; }
.color-choice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; margin: 3px 0 8px; }
.color-choice-btn { border: 1px solid rgba(255,255,255,.25); border-radius: 7px; min-height: 30px; color: #fff; font-weight: 900; font-size: 10px; text-shadow: 0 1px 2px #000; cursor: pointer; }

/* Sidebar position controls */
.app.side-ui.sidebar-pos-left.sidebar-collapsed { padding-left: 49px !important; padding-right: 8px !important; }
.app.side-ui.sidebar-pos-left.sidebar-expanded { padding-left: 158px !important; padding-right: 8px !important; }
.section-sidebar.sidebar-pos-left { left: 6px; right: auto; top: 41px; bottom: 8px; width: 145px; }

.app.side-ui.sidebar-pos-right.sidebar-collapsed { padding-right: 49px !important; padding-left: 8px !important; }
.app.side-ui.sidebar-pos-right.sidebar-expanded { padding-right: 158px !important; padding-left: 8px !important; }
.section-sidebar.sidebar-pos-right { right: 6px; left: auto; top: 41px; bottom: 8px; width: 145px; }

.app.side-ui.sidebar-pos-top { padding-left: 8px !important; padding-right: 8px !important; padding-top: 52px !important; }
.section-sidebar.sidebar-pos-top { left: 8px; right: 8px; top: 8px; bottom: auto; width: auto !important; max-height: 38px; display: grid; grid-template-columns: 32px 1fr; overflow: hidden; }
.section-sidebar.sidebar-pos-top .section-sidebar-list { display: flex; overflow-x: auto; overflow-y: hidden; gap: 4px; }
.section-sidebar.sidebar-pos-top .section-side-btn { min-width: 36px; width: auto; }
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-side-btn { min-width: 92px; }
.section-sidebar.sidebar-pos-top.collapsed .section-side-label { display: none; }

.app.side-ui.sidebar-pos-bottom { padding-left: 8px !important; padding-right: 8px !important; padding-bottom: 52px !important; }
.section-sidebar.sidebar-pos-bottom { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto !important; max-height: 38px; display: grid; grid-template-columns: 32px 1fr; overflow: hidden; }
.section-sidebar.sidebar-pos-bottom .section-sidebar-list { display: flex; overflow-x: auto; overflow-y: hidden; gap: 4px; }
.section-sidebar.sidebar-pos-bottom .section-side-btn { min-width: 36px; width: auto; }
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-side-btn { min-width: 92px; }
.section-sidebar.sidebar-pos-bottom.collapsed .section-side-label { display: none; }

/* ── v3.73 requested refinements ─────────────────────── */
.panel-menu { width: 170px; }
.panel-submenu-wrap { position: relative; }
.panel-submenu { margin: 3px 0 3px 10px; padding: 4px; border-left: 1px solid #454545; background: #202020; border-radius: 7px; }
.panel-submenu button { font-size: 10.5px; padding: 6px; }
.assets-submenu-wrap { position: relative; display: block; width: 100%; }
.assets-submenu { margin: 3px 0 4px 10px; padding: 4px; border-left: 1px solid #484848; background: #202020; border-radius: 7px; }
.assets-submenu .btn { margin-bottom: 3px; }

/* Keep Your assets preview visually stable while moving between items and allow drag resizing. */
.assets-preview { min-height: var(--assets-preview-height,142px); height: var(--assets-preview-height,142px); max-height: var(--assets-preview-height,142px); overflow: hidden; transition: none !important; }
.assets-preview.active { min-height: var(--assets-preview-height,142px); height: var(--assets-preview-height,142px); max-height: var(--assets-preview-height,142px); }
.assets-preview.empty { min-height: var(--assets-preview-height,142px); height: var(--assets-preview-height,142px); max-height: var(--assets-preview-height,142px); }
.assets-preview-stage { height: calc(var(--assets-preview-height,142px) - 44px); min-height: 44px; max-height: calc(var(--assets-preview-height,142px) - 44px); }
.assets-preview-media { max-height: calc(var(--assets-preview-height,142px) - 44px); }
.assets-file-row, .assets-file-row * { transition: none !important; }
.assets-file-row:hover .assets-file-btn { background: #3b5fcf; }
.assets-thumb-mini video, .assets-thumb-box video { pointer-events: none; }

/* Preset collapsible groups. */
.preset-group { margin-bottom: 5px; border: 1px solid #333; border-radius: 8px; overflow: hidden; background: #202020; }
.preset-section-head.preset-collapsible-head { width: 100%; border: 0; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 4px; cursor: pointer; text-align: left; background: #252525; margin: 0; }
.preset-section-head.preset-collapsible-head:hover { background: #303030; }
.preset-section-head.preset-collapsible-head em { font-style: normal; color: #aaa; font-size: 10px; }
.preset-group-body { padding: 4px; }

/* Smaller collapsed side list, and wrapped top/bottom layouts. */
.section-sidebar.collapsed { width: 25px !important; padding: 3px !important; }
.section-sidebar.collapsed .section-sidebar-toggle { width: 19px !important; height: 20px !important; line-height: 20px !important; }
.section-sidebar.collapsed .section-side-btn { min-height: 21px !important; height: 21px !important; padding: 1px !important; border-radius: 5px !important; }
.section-sidebar.collapsed .section-side-icon { font-size: 9px !important; line-height: 18px !important; height: 18px !important; width: 18px !important; }
.app.side-ui.sidebar-pos-left.sidebar-collapsed { padding-left: 34px !important; padding-right: 8px !important; }
.app.side-ui.sidebar-pos-right.sidebar-collapsed { padding-right: 34px !important; padding-left: 8px !important; }
.section-sidebar.sidebar-pos-left.collapsed { left: 5px !important; width: 25px !important; }
.section-sidebar.sidebar-pos-right.collapsed { right: 5px !important; width: 25px !important; }
.app.side-ui.sidebar-pos-top { padding-top: 78px !important; }
.app.side-ui.sidebar-pos-bottom { padding-bottom: 78px !important; }
.section-sidebar.sidebar-pos-top,
.section-sidebar.sidebar-pos-bottom { max-height: 66px !important; height: 66px !important; grid-template-columns: 25px 1fr !important; align-items: start; }
.section-sidebar.sidebar-pos-top .section-sidebar-list,
.section-sidebar.sidebar-pos-bottom .section-sidebar-list { display: flex !important; flex-wrap: wrap !important; align-content: flex-start !important; overflow: hidden !important; gap: 3px !important; max-height: 60px !important; }
.section-sidebar.sidebar-pos-top .section-side-btn,
.section-sidebar.sidebar-pos-bottom .section-side-btn { min-width: 30px !important; height: 26px !important; padding: 2px 4px !important; }
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-side-btn,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-side-btn { min-width: 72px !important; max-width: 110px !important; }
.section-sidebar.sidebar-pos-top.collapsed .section-side-label,
.section-sidebar.sidebar-pos-bottom.collapsed .section-side-label { display: none !important; }
.section-sidebar.sidebar-pos-top.collapsed .section-side-btn,
.section-sidebar.sidebar-pos-bottom.collapsed .section-side-btn { min-width: 22px !important; width: 22px !important; }

/* ── v3.74 sidebar layout stability fixes ─────────────────────────
   Fixes collapsed icon visibility, right-position scrollbar overlap,
   and top/bottom icon rows when the section sidebar is opened/closed. */
.section-sidebar {
  box-sizing: border-box !important;
}

/* Left / Right: keep a natural compact rail with visible icon boxes. */
.section-sidebar.sidebar-pos-left,
.section-sidebar.sidebar-pos-right {
  width: 145px !important;
  min-width: 145px !important;
  top: 41px !important;
  bottom: 8px !important;
  max-height: none !important;
  height: auto !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.section-sidebar.sidebar-pos-left { left: 6px !important; right: auto !important; }
.section-sidebar.sidebar-pos-right { right: 18px !important; left: auto !important; }

.section-sidebar.sidebar-pos-left.collapsed,
.section-sidebar.sidebar-pos-right.collapsed {
  width: 42px !important;
  min-width: 42px !important;
  padding: 4px !important;
}
.section-sidebar.sidebar-pos-left.collapsed { left: 6px !important; }
.section-sidebar.sidebar-pos-right.collapsed { right: 18px !important; }

.section-sidebar.sidebar-pos-left.collapsed .section-sidebar-toggle,
.section-sidebar.sidebar-pos-right.collapsed .section-sidebar-toggle {
  width: 32px !important;
  height: 26px !important;
  line-height: 26px !important;
  margin-bottom: 5px !important;
  border-radius: 7px !important;
}
.section-sidebar.sidebar-pos-left.collapsed .section-sidebar-list,
.section-sidebar.sidebar-pos-right.collapsed .section-sidebar-list {
  display: grid !important;
  gap: 4px !important;
  overflow: visible !important;
}
.section-sidebar.sidebar-pos-left.collapsed .section-side-btn,
.section-sidebar.sidebar-pos-right.collapsed .section-side-btn {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 2px !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 7px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  overflow: visible !important;
}
.section-sidebar.sidebar-pos-left.collapsed .section-side-icon,
.section-sidebar.sidebar-pos-right.collapsed .section-side-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 22px !important;
  line-height: 22px !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.section-sidebar.sidebar-pos-left.collapsed .section-side-label,
.section-sidebar.sidebar-pos-right.collapsed .section-side-label {
  display: none !important;
}

.app.side-ui.sidebar-pos-left.sidebar-collapsed { padding-left: 54px !important; padding-right: 8px !important; }
.app.side-ui.sidebar-pos-left.sidebar-expanded { padding-left: 158px !important; padding-right: 8px !important; }
.app.side-ui.sidebar-pos-right.sidebar-collapsed { padding-right: 66px !important; padding-left: 8px !important; }
.app.side-ui.sidebar-pos-right.sidebar-expanded { padding-right: 174px !important; padding-left: 8px !important; }

/* Top / Bottom: two clean icon rows, never sitting over the panel scrollbar. */
.app.side-ui.sidebar-pos-top {
  padding-left: 8px !important;
  padding-right: 8px !important;
  padding-top: 92px !important;
  padding-bottom: 8px !important;
}
.app.side-ui.sidebar-pos-bottom {
  padding-left: 8px !important;
  padding-right: 8px !important;
  padding-top: 8px !important;
  padding-bottom: 92px !important;
}
.section-sidebar.sidebar-pos-top,
.section-sidebar.sidebar-pos-bottom,
.section-sidebar.sidebar-pos-top.collapsed,
.section-sidebar.sidebar-pos-bottom.collapsed {
  left: 8px !important;
  right: 18px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  padding: 5px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 5px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
.section-sidebar.sidebar-pos-top,
.section-sidebar.sidebar-pos-top.collapsed {
  top: 8px !important;
  bottom: auto !important;
}
.section-sidebar.sidebar-pos-bottom,
.section-sidebar.sidebar-pos-bottom.collapsed {
  top: auto !important;
  bottom: 8px !important;
}
.section-sidebar.sidebar-pos-top .section-sidebar-toggle,
.section-sidebar.sidebar-pos-bottom .section-sidebar-toggle,
.section-sidebar.sidebar-pos-top.collapsed .section-sidebar-toggle,
.section-sidebar.sidebar-pos-bottom.collapsed .section-sidebar-toggle {
  width: 30px !important;
  height: 66px !important;
  line-height: 66px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  align-self: stretch !important;
}
.section-sidebar.sidebar-pos-top .section-sidebar-list,
.section-sidebar.sidebar-pos-bottom .section-sidebar-list,
.section-sidebar.sidebar-pos-top.collapsed .section-sidebar-list,
.section-sidebar.sidebar-pos-bottom.collapsed .section-sidebar-list {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(24px, 1fr)) !important;
  grid-template-rows: repeat(2, 30px) !important;
  grid-auto-flow: row !important;
  gap: 4px !important;
  width: 100% !important;
  height: 64px !important;
  max-height: 64px !important;
  min-height: 64px !important;
  align-content: start !important;
  overflow: hidden !important;
}
.section-sidebar.sidebar-pos-top .section-side-btn,
.section-sidebar.sidebar-pos-bottom .section-side-btn,
.section-sidebar.sidebar-pos-top.collapsed .section-side-btn,
.section-sidebar.sidebar-pos-bottom.collapsed .section-side-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 2px !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 7px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  overflow: hidden !important;
}
.section-sidebar.sidebar-pos-top .section-side-icon,
.section-sidebar.sidebar-pos-bottom .section-side-icon,
.section-sidebar.sidebar-pos-top.collapsed .section-side-icon,
.section-sidebar.sidebar-pos-bottom.collapsed .section-side-icon {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.section-sidebar.sidebar-pos-top .section-side-label,
.section-sidebar.sidebar-pos-bottom .section-side-label,
.section-sidebar.sidebar-pos-top.collapsed .section-side-label,
.section-sidebar.sidebar-pos-bottom.collapsed .section-side-label {
  display: none !important;
}


/* ── v3.75 refinements: hover submenus, audio preview, sidebar spacing/labels ───────── */
.panel-submenu-wrap,
.assets-submenu-wrap { position: relative !important; }
.panel-submenu,
.assets-submenu {
  position: absolute !important;
  left: calc(100% + 6px) !important;
  top: 0 !important;
  margin: 0 !important;
  z-index: 80 !important;
  min-width: 120px !important;
  border-left: 0 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.35) !important;
}
.panel-submenu-wrap:hover .panel-submenu.hidden,
.assets-submenu-wrap:not(.presets-view-submenu-wrap):hover .assets-submenu { display: block !important; }
.assets-submenu-wrap:hover #assetsViewSubmenu { display: block !important; }

/* equal right/left spacing */
.app.side-ui.sidebar-pos-left.sidebar-collapsed { padding-left: 54px !important; padding-right: 8px !important; }
.app.side-ui.sidebar-pos-left.sidebar-expanded { padding-left: 158px !important; padding-right: 8px !important; }
.app.side-ui.sidebar-pos-right.sidebar-collapsed { padding-right: 54px !important; padding-left: 8px !important; }
.app.side-ui.sidebar-pos-right.sidebar-expanded { padding-right: 158px !important; padding-left: 8px !important; }
.section-sidebar.sidebar-pos-right,
.section-sidebar.sidebar-pos-right.collapsed { right: 6px !important; left: auto !important; }

/* top/bottom collapsed: icons only; expanded: icon with name under it */
.app.side-ui.sidebar-pos-top.sidebar-collapsed { padding-top: 84px !important; }
.app.side-ui.sidebar-pos-top.sidebar-expanded { padding-top: 114px !important; }
.app.side-ui.sidebar-pos-bottom.sidebar-collapsed { padding-bottom: 84px !important; }
.app.side-ui.sidebar-pos-bottom.sidebar-expanded { padding-bottom: 114px !important; }
.section-sidebar.sidebar-pos-top,
.section-sidebar.sidebar-pos-bottom,
.section-sidebar.sidebar-pos-top.collapsed,
.section-sidebar.sidebar-pos-bottom.collapsed {
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 5px !important;
  align-items: stretch !important;
  overflow: hidden !important;
  z-index: 18 !important;
}
.section-sidebar.sidebar-pos-top.collapsed,
.section-sidebar.sidebar-pos-bottom.collapsed { height: 76px !important; min-height: 76px !important; max-height: 76px !important; }
.section-sidebar.sidebar-pos-top:not(.collapsed),
.section-sidebar.sidebar-pos-bottom:not(.collapsed) { height: 104px !important; min-height: 104px !important; max-height: 104px !important; }
.section-sidebar.sidebar-pos-top .section-sidebar-toggle,
.section-sidebar.sidebar-pos-bottom .section-sidebar-toggle { width: 30px !important; margin: 0 !important; border-radius: 7px !important; align-self: stretch !important; }
.section-sidebar.sidebar-pos-top.collapsed .section-sidebar-toggle,
.section-sidebar.sidebar-pos-bottom.collapsed .section-sidebar-toggle { height: 64px !important; line-height: 64px !important; }
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-sidebar-toggle,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-sidebar-toggle { height: 92px !important; line-height: 92px !important; }
.section-sidebar.sidebar-pos-top .section-sidebar-list,
.section-sidebar.sidebar-pos-bottom .section-sidebar-list {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(28px, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 4px !important;
  width: 100% !important;
  align-content: start !important;
  overflow: hidden !important;
}
.section-sidebar.sidebar-pos-top.collapsed .section-sidebar-list,
.section-sidebar.sidebar-pos-bottom.collapsed .section-sidebar-list { grid-template-rows: repeat(2, 30px) !important; height: 64px !important; max-height: 64px !important; }
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-sidebar-list,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-sidebar-list { grid-template-rows: repeat(2, 45px) !important; height: 92px !important; max-height: 92px !important; }
.section-sidebar.sidebar-pos-top .section-side-btn,
.section-sidebar.sidebar-pos-bottom .section-side-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 7px !important;
  overflow: hidden !important;
}
.section-sidebar.sidebar-pos-top.collapsed .section-side-btn,
.section-sidebar.sidebar-pos-bottom.collapsed .section-side-btn { height: 30px !important; min-height: 30px !important; padding: 2px !important; display: grid !important; place-items: center !important; }
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-side-btn,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-side-btn {
  height: 45px !important;
  min-height: 45px !important;
  padding: 3px 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
}
.section-sidebar.sidebar-pos-top .section-side-icon,
.section-sidebar.sidebar-pos-bottom .section-side-icon { width: 22px !important; min-width: 22px !important; height: 20px !important; line-height: 20px !important; font-size: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.section-sidebar.sidebar-pos-top.collapsed .section-side-label,
.section-sidebar.sidebar-pos-bottom.collapsed .section-side-label { display: none !important; }
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-side-label,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-side-label {
  display: block !important;
  max-width: 100% !important;
  font-size: 8.5px !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Make audio preview feel open/running by default. */
.assets-preview.audio-preview .assets-preview-stage { align-items: center !important; }
.assets-preview.audio-preview .assets-preview-media { height: 40px !important; min-height: 40px !important; }

/* ── v3.76 refinements: stable old-style submenus, preview loop, preset favorites ───── */
.panel-submenu-wrap,
.assets-submenu-wrap { position: relative !important; display: block !important; width: 100% !important; }
.panel-submenu,
.assets-submenu {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 3px 0 4px 10px !important;
  padding: 4px !important;
  min-width: 0 !important;
  width: auto !important;
  border-left: 1px solid #484848 !important;
  background: #202020 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  z-index: auto !important;
}
.panel-submenu.hidden { display: none !important; }
.panel-submenu-wrap:hover .panel-submenu.hidden { display: block !important; }
#utRingMenuGroup:hover #utRingSubmenu.hidden { display: none !important; }
.assets-submenu-wrap:not(.presets-view-submenu-wrap):hover .assets-submenu,
.assets-submenu-wrap:hover #assetsViewSubmenu { display: block !important; }
.preset-row { grid-template-columns: minmax(0,1fr) 28px 28px !important; }
.preset-favorite {
  border: 0;
  border-radius: 7px;
  padding: 8px 0;
  background: #34302a;
  color: #bdbdbd;
  cursor: pointer;
  font-weight: 900;
  font-size: 13px;
}
.preset-favorite:hover,
.preset-favorite.active { background: #5b4516; color: #ffd36a; }
/* Default/bundled presets are no longer visually separated from the main preset list. */
.preset-source-default .preset-button { background: #303030 !important; border: 0 !important; }
.preset-source-default .preset-button:hover { background: #4b79ff !important; }

/* ── v3.77 layout + Find/Replace refinements ───────────────────── */
.modal-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.modal-title-row h2 { margin: 0 !important; }
.modal-x-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: #3a3a3a;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  line-height: 28px;
  padding: 0;
}
.modal-x-btn:hover { background: #743030; }
.color-replace-input-row {
  grid-template-columns: minmax(0, 1fr) 26px 70px !important;
}
.hex-preview-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #4a4a4a;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  cursor: pointer;
}
.hex-preview-swatch:hover { border-color: rgba(80,126,255,.9); box-shadow: 0 0 0 2px rgba(80,126,255,.18), inset 0 0 0 1px rgba(0,0,0,.35); }
.hex-preview-swatch[data-valid="1"] { border-color: rgba(255,255,255,.35); }
.hex-preview-swatch[data-valid="0"] { background: repeating-linear-gradient(45deg, #202020 0 5px, #2f2f2f 5px 10px); }

/* Active section should fill the panel instead of leaving an unused dark block below. */
.app.side-ui > .accordion.side-active {
  min-height: calc(100vh - 18px) !important;
  display: flex !important;
  flex-direction: column !important;
}
.app.side-ui > .accordion.side-active > .accordion-body {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: calc(100vh - 82px) !important;
}

/* Right sidebar: keep the same visual proportions as the left rail, but reserve the browser scrollbar area. */
.section-sidebar.sidebar-pos-right,
.section-sidebar.sidebar-pos-right.collapsed {
  right: 22px !important;
  left: auto !important;
}
.app.side-ui.sidebar-pos-right.sidebar-collapsed { padding-right: 70px !important; padding-left: 8px !important; }
.app.side-ui.sidebar-pos-right.sidebar-expanded { padding-right: 178px !important; padding-left: 8px !important; }
.section-sidebar.sidebar-pos-left.collapsed,
.section-sidebar.sidebar-pos-right.collapsed {
  width: 42px !important;
  min-width: 42px !important;
}

/* Top/bottom expanded: no overlap, each section gets its own box, names stay under icons. */
.app.side-ui.sidebar-pos-top.sidebar-collapsed { padding-top: 86px !important; }
.app.side-ui.sidebar-pos-top.sidebar-expanded { padding-top: 132px !important; }
.app.side-ui.sidebar-pos-bottom.sidebar-collapsed { padding-bottom: 86px !important; }
.app.side-ui.sidebar-pos-bottom.sidebar-expanded { padding-bottom: 132px !important; }
.section-sidebar.sidebar-pos-top,
.section-sidebar.sidebar-pos-bottom,
.section-sidebar.sidebar-pos-top.collapsed,
.section-sidebar.sidebar-pos-bottom.collapsed {
  left: 8px !important;
  right: 22px !important;
  width: auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 18 !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed),
.section-sidebar.sidebar-pos-bottom:not(.collapsed) {
  height: 120px !important;
  min-height: 120px !important;
  max-height: 120px !important;
}
.section-sidebar.sidebar-pos-top.collapsed,
.section-sidebar.sidebar-pos-bottom.collapsed {
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-sidebar-toggle,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-sidebar-toggle {
  height: 108px !important;
  line-height: 108px !important;
}
.section-sidebar.sidebar-pos-top .section-sidebar-list,
.section-sidebar.sidebar-pos-bottom .section-sidebar-list {
  display: grid !important;
  gap: 5px !important;
  width: 100% !important;
  align-content: start !important;
  overflow: hidden !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-sidebar-list,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-sidebar-list {
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)) !important;
  grid-auto-rows: 53px !important;
  height: 110px !important;
  max-height: 110px !important;
}
.section-sidebar.sidebar-pos-top.collapsed .section-sidebar-list,
.section-sidebar.sidebar-pos-bottom.collapsed .section-sidebar-list {
  grid-template-columns: repeat(auto-fit, minmax(28px, 1fr)) !important;
  grid-auto-rows: 30px !important;
  height: 64px !important;
  max-height: 64px !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-side-btn,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-side-btn {
  height: 53px !important;
  min-height: 53px !important;
  padding: 4px 3px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  box-sizing: border-box !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-side-label,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-side-label {
  display: block !important;
  width: 100% !important;
  font-size: 8.3px !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  max-height: 18px !important;
}

/* ── v3.78 requested layout fixes: full top/sidebar visibility + full-height panels ── */
/* Right sidebar uses the same gap as left while still reserving the AE/browser scrollbar area. */
.section-sidebar.sidebar-pos-right,
.section-sidebar.sidebar-pos-right.collapsed {
  right: 18px !important;
  left: auto !important;
}
.app.side-ui.sidebar-pos-right.sidebar-collapsed {
  padding-right: 66px !important;
  padding-left: 8px !important;
}
.app.side-ui.sidebar-pos-right.sidebar-expanded {
  padding-right: 169px !important;
  padding-left: 8px !important;
}
.app.side-ui.sidebar-pos-left.sidebar-collapsed {
  padding-left: 54px !important;
  padding-right: 8px !important;
}
.app.side-ui.sidebar-pos-left.sidebar-expanded {
  padding-left: 159px !important;
  padding-right: 8px !important;
}

/* When the section list is at the top, keep the main settings button above it. */
.app.side-ui.sidebar-pos-top .top-menu {
  position: fixed !important;
  top: 4px !important;
  right: 22px !important;
  z-index: 45 !important;
  margin: 0 !important;
  width: auto !important;
}
.app.side-ui.sidebar-pos-top .panel-menu {
  position: fixed !important;
  top: 34px !important;
  right: 22px !important;
  z-index: 90 !important;
}
.app.side-ui.sidebar-pos-top .status {
  margin-top: 0 !important;
}

/* Top section list: show every icon, no clipping, no overlap, no scrollbar cover. */
.app.side-ui.sidebar-pos-top.sidebar-collapsed {
  padding-top: 96px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.app.side-ui.sidebar-pos-top.sidebar-expanded {
  padding-top: 174px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.section-sidebar.sidebar-pos-top,
.section-sidebar.sidebar-pos-top.collapsed {
  top: 42px !important;
  bottom: auto !important;
  left: 8px !important;
  right: 22px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 5px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 5px !important;
  align-items: stretch !important;
  overflow: visible !important;
  z-index: 30 !important;
}
.section-sidebar.sidebar-pos-top.collapsed .section-sidebar-toggle {
  height: 34px !important;
  min-height: 34px !important;
  line-height: 34px !important;
  width: 30px !important;
  margin: 0 !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-sidebar-toggle {
  height: 112px !important;
  min-height: 112px !important;
  line-height: 112px !important;
  width: 30px !important;
  margin: 0 !important;
}
.section-sidebar.sidebar-pos-top.collapsed .section-sidebar-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(28px, 1fr)) !important;
  grid-auto-rows: 34px !important;
  gap: 5px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 34px !important;
  max-height: none !important;
  overflow: visible !important;
  align-content: start !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-sidebar-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)) !important;
  grid-auto-rows: 54px !important;
  gap: 5px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 112px !important;
  max-height: none !important;
  overflow: visible !important;
  align-content: start !important;
}
.section-sidebar.sidebar-pos-top .section-side-btn,
.section-sidebar.sidebar-pos-top.collapsed .section-side-btn,
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-side-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 7px !important;
  overflow: hidden !important;
}
.section-sidebar.sidebar-pos-top.collapsed .section-side-btn {
  height: 34px !important;
  min-height: 34px !important;
  padding: 2px !important;
  display: grid !important;
  place-items: center !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-side-btn {
  height: 54px !important;
  min-height: 54px !important;
  padding: 4px 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}
.section-sidebar.sidebar-pos-top .section-side-icon {
  width: 22px !important;
  min-width: 22px !important;
  height: 20px !important;
  line-height: 20px !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.section-sidebar.sidebar-pos-top.collapsed .section-side-label {
  display: none !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-side-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 7.8px !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  max-height: 18px !important;
}

/* Bottom keeps the same safe behavior as top, but without moving the settings button. */
.app.side-ui.sidebar-pos-bottom.sidebar-collapsed {
  padding-bottom: 96px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.app.side-ui.sidebar-pos-bottom.sidebar-expanded {
  padding-bottom: 174px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.section-sidebar.sidebar-pos-bottom,
.section-sidebar.sidebar-pos-bottom.collapsed {
  bottom: 18px !important;
  top: auto !important;
  left: 8px !important;
  right: 22px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 5px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 5px !important;
  align-items: stretch !important;
  overflow: visible !important;
  z-index: 30 !important;
}
.section-sidebar.sidebar-pos-bottom.collapsed .section-sidebar-toggle {
  height: 34px !important;
  min-height: 34px !important;
  line-height: 34px !important;
  width: 30px !important;
  margin: 0 !important;
}
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-sidebar-toggle {
  height: 112px !important;
  min-height: 112px !important;
  line-height: 112px !important;
  width: 30px !important;
  margin: 0 !important;
}
.section-sidebar.sidebar-pos-bottom.collapsed .section-sidebar-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(28px, 1fr)) !important;
  grid-auto-rows: 34px !important;
  gap: 5px !important;
  height: auto !important;
  min-height: 34px !important;
  max-height: none !important;
  overflow: visible !important;
}
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-sidebar-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)) !important;
  grid-auto-rows: 54px !important;
  gap: 5px !important;
  height: auto !important;
  min-height: 112px !important;
  max-height: none !important;
  overflow: visible !important;
}
.section-sidebar.sidebar-pos-bottom.collapsed .section-side-btn {
  height: 34px !important;
  min-height: 34px !important;
  padding: 2px !important;
  display: grid !important;
  place-items: center !important;
}
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-side-btn {
  height: 54px !important;
  min-height: 54px !important;
  padding: 4px 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}
.section-sidebar.sidebar-pos-bottom.collapsed .section-side-label {
  display: none !important;
}
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-side-label {
  display: block !important;
  width: 100% !important;
  font-size: 7.8px !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  max-height: 18px !important;
}

/* Make Blend Mode list use the full available vertical area. */
.app.side-ui > .accordion[data-section="blendmode"].side-active {
  min-height: calc(100vh - 18px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.app.side-ui > .accordion[data-section="blendmode"].side-active > .accordion-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.app.side-ui > .accordion[data-section="blendmode"].side-active #blendModesList {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
}

/* ── v3.79 exact right-sidebar spacing match ─────────────────────
   In right mode the app owns a vertical scrollbar, so its width must be
   subtracted from the padding. This makes the visual gap between the open
   section panel and the right sidebar match the left-side gap. */
.app.side-ui.sidebar-pos-right.sidebar-collapsed {
  padding-right: 49px !important;
  padding-left: 8px !important;
}
.app.side-ui.sidebar-pos-right.sidebar-expanded {
  padding-right: 152px !important;
  padding-left: 8px !important;
}
.section-sidebar.sidebar-pos-right,
.section-sidebar.sidebar-pos-right.collapsed {
  right: 18px !important;
  left: auto !important;
}

/* ── v3.80 section menu button vertical balance ─────────────────────
   Keep every section ☰ settings button centered in the accordion header
   so the space above the button equals the space below it. */
.accordion-head {
  min-height: 36px !important;
}
.assets-header-menu-wrap,
.comp-header-menu-wrap,
.presets-header-menu-wrap,
.markers-header-menu-wrap,
.section-header-menu-wrap {
  top: 5px !important;
  right: 8px !important;
}
.assets-header-menu-btn,
.section-header-menu-btn,
.presets-header-menu-btn,
.markers-header-menu-btn {
  width: 30px !important;
  height: 26px !important;
  min-width: 30px !important;
  min-height: 26px !important;
  line-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.assets-header-menu,
.presets-header-menu,
.markers-header-menu,
.section-header-menu {
  top: 31px !important;
}

/* ── v3.81 keep main tool settings button on the left side ─────────────
   The global tool settings ☰ should stay on the left side of the extension
   and must not follow the main section sidebar when the sidebar is moved to
   the right. Also reset the previous top-position right alignment override. */
.top-menu,
.app.side-ui .top-menu,
.app.side-ui.sidebar-pos-left .top-menu,
.app.side-ui.sidebar-pos-right .top-menu,
.app.side-ui.sidebar-pos-top .top-menu,
.app.side-ui.sidebar-pos-bottom .top-menu {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin: 0 0 6px 0 !important;
  z-index: 45 !important;
}
.panel-menu,
.app.side-ui .panel-menu,
.app.side-ui.sidebar-pos-left .panel-menu,
.app.side-ui.sidebar-pos-right .panel-menu,
.app.side-ui.sidebar-pos-top .panel-menu,
.app.side-ui.sidebar-pos-bottom .panel-menu {
  left: 0 !important;
  right: auto !important;
  top: 30px !important;
  z-index: 90 !important;
}
.app.side-ui.sidebar-pos-top .status,
.app.side-ui.sidebar-pos-bottom .status {
  margin-top: 0 !important;
}

/* ── v3.82 main settings button fixed to the right/top ─────────────
   Keep the global tool settings ☰ always on the right side of the
   extension and above the main section sidebar, regardless of section
   list position. The top-menu remains as a height placeholder so the
   status/content layout does not jump. */
.top-menu,
.app.side-ui .top-menu,
.app.side-ui.sidebar-pos-left .top-menu,
.app.side-ui.sidebar-pos-right .top-menu,
.app.side-ui.sidebar-pos-top .top-menu,
.app.side-ui.sidebar-pos-bottom .top-menu {
  position: relative !important;
  height: 32px !important;
  min-height: 32px !important;
  width: 100% !important;
  display: block !important;
  margin: 0 0 6px 0 !important;
  z-index: 45 !important;
}
.menu-btn,
.app.side-ui .menu-btn,
.app.side-ui.sidebar-pos-left .menu-btn,
.app.side-ui.sidebar-pos-right .menu-btn,
.app.side-ui.sidebar-pos-top .menu-btn,
.app.side-ui.sidebar-pos-bottom .menu-btn {
  position: fixed !important;
  top: 6px !important;
  right: 18px !important;
  left: auto !important;
  z-index: 95 !important;
}
.panel-menu,
.app.side-ui .panel-menu,
.app.side-ui.sidebar-pos-left .panel-menu,
.app.side-ui.sidebar-pos-right .panel-menu,
.app.side-ui.sidebar-pos-top .panel-menu,
.app.side-ui.sidebar-pos-bottom .panel-menu {
  position: fixed !important;
  top: 36px !important;
  right: 18px !important;
  left: auto !important;
  z-index: 120 !important;
}
.app.side-ui.sidebar-pos-top .status,
.app.side-ui.sidebar-pos-bottom .status {
  margin-top: 0 !important;
}

/* ── v3.83 outer scrollbar only when really needed ─────────────────────
   The active section used a forced min-height that was larger than the
   remaining viewport after the top menu/status area, so the extension's
   outer scrollbar appeared even on short sections. The panel now owns the
   remaining height and inner content scrolls only if its content needs it. */
.app.side-ui {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}
.app.side-ui > .accordion[data-section].side-active {
  height: calc(100vh - 116px) !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}
.app.side-ui > .accordion[data-section].side-active > .accordion-head {
  flex: 0 0 auto !important;
}
.app.side-ui > .accordion[data-section].side-active > .accordion-body {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.app.side-ui.sidebar-pos-top > .accordion[data-section].side-active {
  height: calc(100vh - 194px) !important;
}
.app.side-ui.sidebar-pos-bottom > .accordion[data-section].side-active {
  height: calc(100vh - 194px) !important;
}

/* Lists inside the opened section still show their own scrollbar only when
   their content is longer than their available space. */
.app.side-ui > .accordion[data-section].side-active .preset-list,
.app.side-ui > .accordion[data-section].side-active .assets-list,
.app.side-ui > .accordion[data-section].side-active .colors-list,
.app.side-ui > .accordion[data-section].side-active .blend-list,
.app.side-ui > .accordion[data-section].side-active .sc-list,
.app.side-ui > .accordion[data-section].side-active .markers-help-text {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ── v3.84 main settings width/alignment ─────────────────────
   Make the global tool settings button the same visual width as the
   collapsed main section sidebar rail and align it directly above it. */
.menu-btn,
.app.side-ui .menu-btn,
.app.side-ui.sidebar-pos-left .menu-btn,
.app.side-ui.sidebar-pos-right .menu-btn,
.app.side-ui.sidebar-pos-top .menu-btn,
.app.side-ui.sidebar-pos-bottom .menu-btn {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  line-height: 32px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
}

/* Right rail: exact same right edge and width as the section sidebar. */
.app.side-ui.sidebar-pos-right .menu-btn,
.app.side-ui.sidebar-pos-left .menu-btn,
.app.side-ui.sidebar-pos-top .menu-btn,
.app.side-ui.sidebar-pos-bottom .menu-btn,
.app.side-ui .menu-btn {
  right: 18px !important;
  left: auto !important;
  top: 6px !important;
}

/* Keep the dropdown aligned to the same right edge as the button. */
.panel-menu,
.app.side-ui .panel-menu,
.app.side-ui.sidebar-pos-left .panel-menu,
.app.side-ui.sidebar-pos-right .panel-menu,
.app.side-ui.sidebar-pos-top .panel-menu,
.app.side-ui.sidebar-pos-bottom .panel-menu {
  right: 18px !important;
  left: auto !important;
  top: 40px !important;
}

/* ── v3.85 right-sidebar spacing mirror ─────────────────────
   Make right mode mirror left mode exactly: the rail sits 6px from the
   extension edge, and the open section keeps the same 6px gap from the rail.
   This prevents the section content/buttons from sliding underneath the rail. */
.app.side-ui.sidebar-pos-right.sidebar-collapsed {
  padding-right: 54px !important;
  padding-left: 8px !important;
}
.app.side-ui.sidebar-pos-right.sidebar-expanded {
  padding-right: 158px !important;
  padding-left: 8px !important;
}
.section-sidebar.sidebar-pos-right,
.section-sidebar.sidebar-pos-right.collapsed {
  right: 6px !important;
  left: auto !important;
}
.app.side-ui.sidebar-pos-right .menu-btn,
.app.side-ui.sidebar-pos-left .menu-btn,
.app.side-ui.sidebar-pos-top .menu-btn,
.app.side-ui.sidebar-pos-bottom .menu-btn,
.app.side-ui .menu-btn {
  right: 6px !important;
  left: auto !important;
}
.panel-menu,
.app.side-ui .panel-menu,
.app.side-ui.sidebar-pos-left .panel-menu,
.app.side-ui.sidebar-pos-right .panel-menu,
.app.side-ui.sidebar-pos-top .panel-menu,
.app.side-ui.sidebar-pos-bottom .panel-menu {
  right: 6px !important;
  left: auto !important;
}

/* ── v3.86 top/bottom sidebar fit + spacing fixes ───────────────────── */
/* Keep the main settings button above the top sidebar and leave room for it. */
.top-menu {
  margin-bottom: 8px !important;
  min-height: 34px !important;
}

/* TOP / BOTTOM expanded layout: roomy cards with visible gaps and auto-fit wrapper. */
.app.side-ui.sidebar-pos-top {
  padding-top: 214px !important; /* settings button + top sidebar + gap */
}
.app.side-ui.sidebar-pos-bottom {
  padding-bottom: 172px !important; /* bottom sidebar + clear gap above it */
}
.app.side-ui.sidebar-pos-top.sidebar-collapsed {
  padding-top: 98px !important;
}
.app.side-ui.sidebar-pos-bottom.sidebar-collapsed {
  padding-bottom: 98px !important;
}

.section-sidebar.sidebar-pos-top,
.section-sidebar.sidebar-pos-bottom {
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  border-radius: 12px !important;
  padding: 8px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}
.section-sidebar.sidebar-pos-top {
  top: 44px !important;
  bottom: auto !important;
}
.section-sidebar.sidebar-pos-bottom {
  bottom: 12px !important;
  top: auto !important;
}

/* collapsed top/bottom = one compact rail with proper gap below/above content */
.section-sidebar.sidebar-pos-top.collapsed,
.section-sidebar.sidebar-pos-bottom.collapsed {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
}
.section-sidebar.sidebar-pos-top.collapsed .section-sidebar-toggle,
.section-sidebar.sidebar-pos-bottom.collapsed .section-sidebar-toggle {
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  border-radius: 9px !important;
}
.section-sidebar.sidebar-pos-top.collapsed .section-sidebar-list,
.section-sidebar.sidebar-pos-bottom.collapsed .section-sidebar-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  overflow: hidden !important;
  align-items: center !important;
}
.section-sidebar.sidebar-pos-top.collapsed .section-side-btn,
.section-sidebar.sidebar-pos-bottom.collapsed .section-side-btn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 2px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
}
.section-sidebar.sidebar-pos-top.collapsed .section-side-label,
.section-sidebar.sidebar-pos-bottom.collapsed .section-side-label {
  display: none !important;
}

/* expanded top/bottom = 2 clean rows with card spacing */
.section-sidebar.sidebar-pos-top:not(.collapsed),
.section-sidebar.sidebar-pos-bottom:not(.collapsed) {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  height: auto !important;
  min-height: 144px !important;
  max-height: none !important;
  align-items: stretch !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-sidebar-toggle,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-sidebar-toggle {
  width: 44px !important;
  height: auto !important;
  min-height: 128px !important;
  line-height: normal !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-sidebar-list,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-sidebar-list {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(72px, 1fr)) !important;
  grid-auto-rows: 58px !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 124px !important;
  max-height: none !important;
  overflow: visible !important;
  align-content: start !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-side-btn,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-side-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 6px 4px !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  overflow: hidden !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-side-icon,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-side-icon {
  width: 20px !important;
  min-width: 20px !important;
  height: 18px !important;
  line-height: 18px !important;
  font-size: 12px !important;
}
.section-sidebar.sidebar-pos-top:not(.collapsed) .section-side-label,
.section-sidebar.sidebar-pos-bottom:not(.collapsed) .section-side-label {
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  font-size: 8px !important;
  line-height: 1.12 !important;
}

/* Keep a small visible gap between bottom sidebar and the content above it. */
.app.side-ui.sidebar-pos-bottom > .accordion.side-active,
.app.side-ui.sidebar-pos-bottom > .status {
  margin-bottom: 10px !important;
}

/* ── v3.87 right-collapsed sidebar scrollbar gap fix ───────────────── */
/* When the main section sidebar is on the right and collapsed, keep a real gap
   between the scrollbar and the icon buttons, similar to the expanded state. */
.section-sidebar.sidebar-pos-right.collapsed {
  width: 52px !important;
  min-width: 52px !important;
  padding: 4px 10px 4px 4px !important; /* extra right padding for scrollbar gap */
  scrollbar-gutter: stable !important;
}
.section-sidebar.sidebar-pos-right.collapsed .section-sidebar-toggle {
  width: 32px !important;
  margin-right: 6px !important;
}
.section-sidebar.sidebar-pos-right.collapsed .section-sidebar-list {
  padding-right: 6px !important;
  gap: 4px !important;
}
.section-sidebar.sidebar-pos-right.collapsed .section-side-btn {
  margin-right: 0 !important;
}
.app.side-ui.sidebar-pos-right.sidebar-collapsed {
  padding-right: 76px !important;
}

/* ── v3.88 collapsed main-sidebar scrollbar safe gutter ─────────────────────
   Applies the scrollbar gap to BOTH left and right collapsed rails. The rail
   is widened and the icon column is kept at a fixed width, so the vertical
   scrollbar sits inside its own gutter instead of covering the icons. */
.section-sidebar.sidebar-pos-left.collapsed,
.section-sidebar.sidebar-pos-right.collapsed {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  padding: 4px 20px 4px 4px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}
.section-sidebar.sidebar-pos-left.collapsed .section-sidebar-toggle,
.section-sidebar.sidebar-pos-right.collapsed .section-sidebar-toggle,
.section-sidebar.sidebar-pos-left.collapsed .section-side-btn,
.section-sidebar.sidebar-pos-right.collapsed .section-side-btn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
.section-sidebar.sidebar-pos-left.collapsed .section-sidebar-toggle,
.section-sidebar.sidebar-pos-right.collapsed .section-sidebar-toggle {
  height: 32px !important;
  min-height: 32px !important;
  line-height: 32px !important;
}
.section-sidebar.sidebar-pos-left.collapsed .section-sidebar-list,
.section-sidebar.sidebar-pos-right.collapsed .section-sidebar-list {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding-right: 0 !important;
  gap: 4px !important;
}
.app.side-ui.sidebar-pos-left.sidebar-collapsed {
  padding-left: 76px !important;
  padding-right: 8px !important;
}
.app.side-ui.sidebar-pos-right.sidebar-collapsed {
  padding-right: 76px !important;
  padding-left: 8px !important;
}
/* Keep the global settings button aligned with the widened rail only when the
   rail itself is on the right side. */
.app.side-ui.sidebar-pos-right .menu-btn {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
}


/* ── v3.89 dynamic collapsed sidebar scrollbar space ─────────────────────
   The collapsed main section sidebar now keeps its normal compact width when
   no vertical scrollbar is present. Extra gutter space is added only while the
   rail actually overflows and the scrollbar appears. */
.section-sidebar.sidebar-pos-left.collapsed:not(.sidebar-has-y-scroll),
.section-sidebar.sidebar-pos-right.collapsed:not(.sidebar-has-y-scroll) {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding: 4px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
}
.section-sidebar.sidebar-pos-left.collapsed:not(.sidebar-has-y-scroll) .section-sidebar-toggle,
.section-sidebar.sidebar-pos-right.collapsed:not(.sidebar-has-y-scroll) .section-sidebar-toggle,
.section-sidebar.sidebar-pos-left.collapsed:not(.sidebar-has-y-scroll) .section-side-btn,
.section-sidebar.sidebar-pos-right.collapsed:not(.sidebar-has-y-scroll) .section-side-btn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
.section-sidebar.sidebar-pos-left.collapsed:not(.sidebar-has-y-scroll) .section-sidebar-list,
.section-sidebar.sidebar-pos-right.collapsed:not(.sidebar-has-y-scroll) .section-sidebar-list {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding-right: 0 !important;
}
.app.side-ui.sidebar-pos-left.sidebar-collapsed:not(.sidebar-scrollbar-visible) {
  padding-left: 54px !important;
  padding-right: 8px !important;
}
.app.side-ui.sidebar-pos-right.sidebar-collapsed:not(.sidebar-scrollbar-visible) {
  padding-right: 54px !important;
  padding-left: 8px !important;
}
.app.side-ui.sidebar-pos-right:not(.sidebar-scrollbar-visible) .menu-btn {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
}

.section-sidebar.sidebar-pos-left.collapsed.sidebar-has-y-scroll,
.section-sidebar.sidebar-pos-right.collapsed.sidebar-has-y-scroll {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  padding: 4px 20px 4px 4px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}
.section-sidebar.sidebar-pos-left.collapsed.sidebar-has-y-scroll .section-sidebar-toggle,
.section-sidebar.sidebar-pos-right.collapsed.sidebar-has-y-scroll .section-sidebar-toggle,
.section-sidebar.sidebar-pos-left.collapsed.sidebar-has-y-scroll .section-side-btn,
.section-sidebar.sidebar-pos-right.collapsed.sidebar-has-y-scroll .section-side-btn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
.section-sidebar.sidebar-pos-left.collapsed.sidebar-has-y-scroll .section-sidebar-list,
.section-sidebar.sidebar-pos-right.collapsed.sidebar-has-y-scroll .section-sidebar-list {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding-right: 0 !important;
}
.app.side-ui.sidebar-pos-left.sidebar-collapsed.sidebar-scrollbar-visible {
  padding-left: 76px !important;
  padding-right: 8px !important;
}
.app.side-ui.sidebar-pos-right.sidebar-collapsed.sidebar-scrollbar-visible {
  padding-right: 76px !important;
  padding-left: 8px !important;
}
.app.side-ui.sidebar-pos-right.sidebar-scrollbar-visible .menu-btn {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
}

/* ── v3.90 Blend Mode scrollbar containment ─────────────────────────────
   Keep the Blend Mode section itself fixed. Only the blend modes list/container
   owns the vertical scrollbar, so the scrollbar starts below the search field
   and never appears on the full accordion body. */
.app.side-ui > .accordion[data-section="blendmode"].side-active {
  height: calc(100vh - 116px) !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.app.side-ui.sidebar-pos-top > .accordion[data-section="blendmode"].side-active,
.app.side-ui.sidebar-pos-bottom > .accordion[data-section="blendmode"].side-active {
  height: calc(100vh - 194px) !important;
}
.app.side-ui > .accordion[data-section="blendmode"].side-active > .accordion-head {
  flex: 0 0 auto !important;
}
.app.side-ui > .accordion[data-section="blendmode"].side-active > .accordion-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}
.app.side-ui > .accordion[data-section="blendmode"].side-active .sc-search-wrap {
  flex: 0 0 auto !important;
}
.app.side-ui > .accordion[data-section="blendmode"].side-active #blendModesList {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
.app.side-ui > .accordion[data-section="blendmode"].side-active > .accordion-body > .hint {
  flex: 0 0 auto !important;
}


/* v3.91: hide bottom explanatory hints without changing button sizes */
.hint { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; overflow: hidden !important; }

/* ── v3.94 accordion inner containers fill the remaining lower tool area ──
   Make the opened section a vertical layout, then let the real content/list
   container take all remaining space below its controls. This keeps the
   scrollbar inside the inner container instead of leaving unused empty space. */
.app.side-ui > .accordion[data-section].side-active > .accordion-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Main scrollable containers in sections that have a lower content area. */
.app.side-ui > .accordion[data-section="newcomp"].side-active #newCompPresets,
.app.side-ui > .accordion[data-section="presets"].side-active #presetsList,
.app.side-ui > .accordion[data-section="composition"].side-active #compProjectsList,
.app.side-ui > .accordion[data-section="create"].side-active #createToolsGrid,
.app.side-ui > .accordion[data-section="quickaction"].side-active #quickActionGrid,
.app.side-ui > .accordion[data-section="properties"].side-active #propertiesGrid,
.app.side-ui > .accordion[data-section="blendmode"].side-active #blendModesList,
.app.side-ui > .accordion[data-section="colors"].side-active #colorsList,
.app.side-ui > .accordion[data-section="assets"].side-active #assetsList,
.app.side-ui > .accordion[data-section="scripts"].side-active #scriptsList,
.app.side-ui > .accordion[data-section="graph"].side-active .graph-panel-box {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Keep controls above/below the filling containers fixed in their natural size. */
.app.side-ui > .accordion[data-section].side-active .save-box,
.app.side-ui > .accordion[data-section].side-active .newcomp-fields,
.app.side-ui > .accordion[data-section].side-active .action-reorder-toolbar,
.app.side-ui > .accordion[data-section].side-active .comp-view-controls,
.app.side-ui > .accordion[data-section].side-active .colors-toolbar,
.app.side-ui > .accordion[data-section].side-active .colors-tools-row,
.app.side-ui > .accordion[data-section].side-active .color-hex-box,
.app.side-ui > .accordion[data-section].side-active .sc-search-wrap,
.app.side-ui > .accordion[data-section].side-active .sc-actions,
.app.side-ui > .accordion[data-section].side-active .assets-preview,
.app.side-ui > .accordion[data-section].side-active .marker-scope-row,
.app.side-ui > .accordion[data-section].side-active .marker-name-row,
.app.side-ui > .accordion[data-section].side-active .marker-section-title,
.app.side-ui > .accordion[data-section].side-active .marker-grid,
.app.side-ui > .accordion[data-section].side-active .marker-boundary-grid,
.app.side-ui > .accordion[data-section].side-active .marker-shift-grid,
.app.side-ui > .accordion[data-section].side-active .marker-clipboard-grid,
.app.side-ui > .accordion[data-section].side-active .marker-delete-grid,
.app.side-ui > .accordion[data-section].side-active .aa-title,
.app.side-ui > .accordion[data-section].side-active .anchor-grid,
.app.side-ui > .accordion[data-section].side-active .align-grid {
  flex: 0 0 auto !important;
}

/* Sections that are mostly controls still use the whole lower area, but scroll
   the body only if the controls exceed the available height. */
.app.side-ui > .accordion[data-section="markers"].side-active > .accordion-body,
.app.side-ui > .accordion[data-section="arrangealign"].side-active > .accordion-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ── v3.95 fix: full-height accordion containers without stretching buttons ──
   The v3.94 full-height rule correctly made section bodies fill the lower area,
   but CSS Grid stretched some rows to fill the available height. Keep the
   accordion/list area full height, while all tool buttons keep their natural size. */
.app.side-ui > .accordion[data-section].side-active .create-grid,
.app.side-ui > .accordion[data-section].side-active .action-grid,
.app.side-ui > .accordion[data-section].side-active .quickaction-grid,
.app.side-ui > .accordion[data-section].side-active .newcomp-grid,
.app.side-ui > .accordion[data-section].side-active .properties-panel,
.app.side-ui > .accordion[data-section].side-active .properties-grid,
.app.side-ui > .accordion[data-section].side-active .marker-grid,
.app.side-ui > .accordion[data-section].side-active .marker-boundary-grid,
.app.side-ui > .accordion[data-section].side-active .marker-shift-grid,
.app.side-ui > .accordion[data-section].side-active .marker-clipboard-grid,
.app.side-ui > .accordion[data-section].side-active .marker-delete-grid,
.app.side-ui > .accordion[data-section].side-active .anchor-grid,
.app.side-ui > .accordion[data-section].side-active .align-grid,
.app.side-ui > .accordion[data-section].side-active .graph-presets {
  align-content: start !important;
  grid-auto-rows: max-content !important;
}

.app.side-ui > .accordion[data-section="create"].side-active #createToolsGrid,
.app.side-ui > .accordion[data-section="quickaction"].side-active #quickActionGrid,
.app.side-ui > .accordion[data-section="properties"].side-active #propertiesGrid,
.app.side-ui > .accordion[data-section="newcomp"].side-active #newCompPresets {
  align-content: start !important;
  grid-auto-rows: max-content !important;
}

.app.side-ui > .accordion[data-section="properties"].side-active #propertiesGrid {
  padding-bottom: 0 !important;
}

.app.side-ui > .accordion[data-section].side-active .btn,
.app.side-ui > .accordion[data-section].side-active .action-item,
.app.side-ui > .accordion[data-section="properties"].side-active .properties-grid .btn {
  height: auto !important;
  max-height: none !important;
  align-self: stretch !important;
}

/* ── v3.96 Your websites manager ─────────────────────────────────────── */
.websites-accordion { position: relative; }
.websites-body { gap: 7px; }
.websites-description {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #353535;
  border-radius: 9px;
  background: #1f1f1f;
  color: #cfcfcf;
  font-size: 11.5px;
  line-height: 1.35;
}
.websites-add-box {
  display: grid;
  grid-template-columns: 1fr 1.35fr auto;
  gap: 6px;
  align-items: center;
  background: #202020;
  border: 1px solid #353535;
  border-radius: 9px;
  padding: 7px;
  box-sizing: border-box;
}
.websites-add-box input {
  width: 100%;
  height: 31px;
  box-sizing: border-box;
  border: 1px solid #444;
  border-radius: 7px;
  background: #151515;
  color: #fff;
  padding: 0 8px;
  font-size: 11.5px;
  outline: none;
}
.websites-add-box input:focus { border-color: #4b79ff; }
.websites-io-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px;}
.website-group{margin-bottom:6px;border:1px solid #2b2b2b;border-radius:8px;overflow:hidden;}
.website-group-head{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:#202020;border:none;color:#e6e6e6;font-size:12px;font-weight:600;padding:8px 10px;cursor:pointer;}
.website-group-head:hover{background:#262626;}
.website-group-chevron{display:inline-block;transition:transform .15s;color:#8a8a8a;font-size:11px;}
.website-group-head.collapsed .website-group-chevron{transform:rotate(-90deg);}
.website-group-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.website-group-count{flex:0 0 auto;font-size:10px;color:#8B5CF6;background:#2a2340;border-radius:10px;padding:1px 8px;font-weight:700;}
.website-group-body{padding:6px;display:flex;flex-direction:column;gap:5px;}
.website-group-head{display:flex;align-items:center;gap:4px;}
.website-group-toggle{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;text-align:left;background:transparent;border:none;color:#e6e6e6;font-size:12px;font-weight:600;padding:8px 10px;cursor:pointer;}
.website-group-toggle:hover{color:#fff;}
.website-group-empty{font-size:10.5px;color:#6f6f6f;padding:4px 6px;font-style:italic;}
.website-group-rename,.website-group-del{margin-right:4px;}
.website-item.organizing .website-open-btn{pointer-events:none;opacity:.9;}
.website-group-move{flex:0 0 auto;max-width:120px;font-size:10.5px;margin:0 4px;}
.websites-add-group{width:100%;margin-bottom:8px;}
.websites-export-check{display:flex;align-items:center;gap:8px;font-size:12px;color:#ddd;padding:5px 2px;cursor:pointer;}
.websites-export-check input{accent-color:#8B5CF6;}
.websites-export-actions{display:flex;gap:6px;margin-top:10px;}
.websites-export-actions .btn{flex:1 1 auto;}
.websites-list {
  width: 100%;
  min-height: 130px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #181818;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 5px;
  box-sizing: border-box;
  scroll-behavior: auto;
  overscroll-behavior: contain;
}
.website-item {
  display: grid;
  grid-template-columns: 1fr 27px 27px;
  gap: 5px;
  align-items: stretch;
  margin-bottom: 5px;
}
.website-open-btn {
  border: 0;
  border-radius: 8px;
  background: #303030;
  color: #fff;
  cursor: pointer;
  text-align: left;
  min-height: 38px;
  padding: 6px 8px;
  overflow: hidden;
}
.website-open-btn:hover { background: #4b79ff; }
.website-title {
  display: block;
  font-size: 11.8px;
  line-height: 1.15;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.website-url {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.1;
  color: #b8b8b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.website-mini-btn {
  border: 0;
  border-radius: 7px;
  background: #383838;
  color: #fff;
  cursor: pointer;
  height: 38px;
  min-height: 38px;
  font-size: 12px;
  font-weight: 900;
  padding: 0;
}
.website-mini-btn:hover { background: #4b79ff; }
.website-mini-btn.danger:hover { background: #b33838; }
.websites-empty {
  padding: 12px 9px;
  color: #8f8f8f;
  font-size: 11.5px;
  line-height: 1.35;
}
@media (max-width: 520px) {
  .websites-add-box { grid-template-columns: 1fr; }
  .websites-add-box .btn { width: 100%; }
}

/* Make only the saved-websites list take the lower free area, not the buttons. */
.app.side-ui > .accordion[data-section="websites"].side-active #websitesList {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.app.side-ui > .accordion[data-section="websites"].side-active .websites-description,
.app.side-ui > .accordion[data-section="websites"].side-active .websites-add-box {
  flex: 0 0 auto !important;
}

/* ── v3.97 restore Anchor Point grid square size ─────────────────────
   The full-height/no-stretch rules must not shrink the 3x3 Anchor Point pad.
   Keep the original 32x28 cells exactly as before. */
.app.side-ui > .accordion[data-section="arrangealign"].side-active .anchor-grid,
.anchor-grid {
  grid-template-columns: repeat(3, 32px) !important;
  grid-auto-rows: 28px !important;
  align-content: start !important;
}
.app.side-ui > .accordion[data-section="arrangealign"].side-active .anchor-grid button,
.anchor-grid button {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}

/* ── v3.100 Graph buttons size restore ──────────────────────────────
   Keep Graph controls at their original compact AE-style size when the
   section fills the lower panel. The full-height section rules must not
   shrink the buttons by overriding their fixed heights. */
.app.side-ui > .accordion[data-section="graph"].side-active .graph-mode-switch .btn,
.app.side-ui > .accordion[data-section="graph"].side-active .ae-graph-fieldset .graph-buttons .btn,
.app.side-ui > .accordion[data-section="graph"].side-active .graph-library-toolbar .btn {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 4px !important;
  align-self: stretch !important;
}

.app.side-ui > .accordion[data-section="graph"].side-active .ae-graph-fieldset .graph-buttons #graphDuplicateLastKeysBtn {
  height: auto !important;
  min-height: 28px !important;
  padding: 5px 4px !important;
}

.app.side-ui > .accordion[data-section="graph"].side-active .ae-graph-fieldset .graph-plus-btn {
  height: 78px !important;
  min-height: 78px !important;
  width: 42px !important;
  padding: 0 !important;
  align-self: stretch !important;
}

/* v3.101 Graph: move live apply toggle to the top without resizing controls */
.graph-live-apply-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 24px;
  margin: 0 0 5px;
}
.ae-graph-fieldset .graph-live-apply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  box-sizing: border-box;
  border: 1px solid #4f4112;
  border-radius: 3px;
  background: #1c1c1c;
  color: #e8e8e8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.ae-graph-fieldset .graph-live-apply input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #d9a72a;
}
.ae-graph-fieldset .graph-live-apply:hover {
  border-color: #d9a72a;
}



.safezone-info-note {
  margin: 0 0 8px 0;
  padding: 8px 10px;
  border: 1px solid rgba(217, 167, 42, 0.45);
  border-radius: 8px;
  background: rgba(217, 167, 42, 0.08);
  color: #f1f1f1;
  font-size: 11px;
  line-height: 1.45;
}
.safezone-info-note > div {
  display: block;
}
.safezone-info-note b { color: #f3c247; }

/* ── Safe Zone Section ───────────────────────────────── */




/* ═════════ Safe Zones unified-tool styling ═════════ */
.safezone-tools-header-menu-wrap { top: 8px; }
.safezone-tools-body { display: grid; gap: 8px; }
.safezone-toolbar-row { display:grid; grid-template-columns: minmax(0,1fr) auto; gap:6px; align-items:center; }
.safezone-toolbar-row select,
.safezone-style-row2 input,
.safezone-inline-row input,
#szVariantBaseName {
  width:100%; min-width:0; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.13);
  background:#242424; color:#eee; padding:0 8px; font-size:11px; outline:none;
}
.safezone-mini-toggle,
.safezone-settings-grid label,
.safezone-variant-item {
  display:flex; align-items:center; gap:6px; min-height:28px; border-radius:8px;
  border:1px solid rgba(255,255,255,.11); background:#242424; color:#ddd; padding:5px 7px;
  font-size:10.5px; line-height:1.2; user-select:none;
}
.safezone-mini-toggle input,
.safezone-settings-grid input[type="checkbox"],
.safezone-variant-item input { width:13px; height:13px; accent-color:#d9a72a; flex:0 0 auto; }
.safezone-preset-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:6px; }
.safezone-tool-preset {
  min-height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:#2b2b2b; color:#ededed;
  display:grid; grid-template-columns:18px minmax(0,1fr); grid-template-rows:auto auto; column-gap:5px; row-gap:1px;
  align-items:center; text-align:left; padding:6px 7px; cursor:pointer; font-size:10.5px;
}
.safezone-tool-preset:hover { background:#383838; border-color:rgba(217,167,42,.38); }
.safezone-tool-preset.active { background:linear-gradient(180deg,#3d3215,#2c281d); border-color:#d9a72a; color:#fff; }
.safezone-tool-preset.is-favorite .safezone-preset-star { color:#d9a72a; }
.safezone-preset-star { grid-row:1 / 3; font-size:14px; text-align:center; color:#858585; }
.safezone-preset-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:700; }
.safezone-preset-meta { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; opacity:.7; font-size:9.5px; }
.safezone-empty { grid-column:1 / -1; opacity:.7; font-size:11px; padding:8px; text-align:center; border:1px dashed rgba(255,255,255,.15); border-radius:10px; }
.safezone-main-actions { grid-template-columns: 1fr; }
.safezone-global-main-action { grid-template-columns: repeat(2, minmax(0,1fr)); }
.safezone-manage-panel { display:grid; gap:7px; }
.safezone-manage-note { font-size:10px; }
.safezone-manage-list { display:grid; gap:5px; max-height:220px; overflow:auto; padding-right:2px; }
.safezone-manage-row {
  display:grid; grid-template-columns:28px minmax(0,1fr) 28px 28px 46px auto auto; gap:4px; align-items:center;
  padding:5px; border-radius:10px; background:#242424; border:1px solid rgba(255,255,255,.09);
}
.safezone-manage-title { min-width:0; display:grid; gap:1px; }
.safezone-manage-title strong { font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.safezone-manage-title span { font-size:9.3px; opacity:.62; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.safezone-variant-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:5px; max-height:170px; overflow:auto; padding-right:2px; }
.safezone-variant-item { justify-content:flex-start; min-height:32px; }
.safezone-variant-item span { min-width:0; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.safezone-variant-item em { font-style:normal; opacity:.6; font-size:9px; margin-left:auto; }
.safezone-inline-row { display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:6px; }
.safezone-utilities-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.safezone-utilities-grid .danger:last-child { grid-column:1 / -1; }
.safezone-settings-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:5px; }
.safezone-style-row2 { display:grid; grid-template-columns: minmax(0,1fr) 70px; gap:6px; }
.safezone-live-preview { min-height:166px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#202020; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.safezone-live-frame { position:relative; max-width:92%; max-height:150px; border:2px solid #ff3333; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden; margin:8px auto; }
.safezone-live-mask { position:absolute; left:12%; top:14%; right:12%; bottom:18%; border:1px solid rgba(255,255,255,.65); border-radius:4px; box-shadow:0 0 0 999px rgba(255,51,51,.35); }
.safezone-live-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:10px; letter-spacing:.12em; color:rgba(255,255,255,.72); pointer-events:none; }
.app.side-ui > .accordion[data-section="safezone"].side-active > .accordion-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  gap: 8px !important;
  align-content: start !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}
.app.side-ui > .accordion[data-section="safezone"].side-active .safezone-preset-grid,
.app.side-ui > .accordion[data-section="safezone"].side-active .safezone-variant-grid,
.app.side-ui > .accordion[data-section="safezone"].side-active .safezone-settings-grid,
.app.side-ui > .accordion[data-section="safezone"].side-active .safezone-utilities-grid,
.app.side-ui > .accordion[data-section="safezone"].side-active .safezone-main-actions {
  flex: 0 0 auto !important;
  align-content: start !important;
  grid-auto-rows: max-content !important;
}
@media (max-width: 390px) {
  .safezone-preset-grid,
  .safezone-variant-grid,
  .safezone-settings-grid,
  .safezone-utilities-grid,
  .safezone-toolbar-row,
  .safezone-style-row2,
  .safezone-inline-row { grid-template-columns:1fr; }
  .safezone-manage-row { grid-template-columns:28px minmax(0,1fr) 28px 28px; }
  .safezone-manage-row .sz-color-btn,
  .safezone-manage-row .sz-rename-btn,
  .safezone-manage-row .sz-delete-btn { grid-column: span 2; }
}


/* v3.114 Safe Zones corrections */
.safezone-tools-body {
  gap: 8px;
}
.accordion.safezone-tools-accordion.open > .accordion-body {
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* v3.115 Safe Zones: collapsible groups + real canvas preview */
.safezone-fold-group {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  background: #242424;
  overflow: hidden;
  flex: 0 0 auto;
}
.safezone-fold-head {
  width: 100%;
  min-height: 31px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #262626;
  color: #f3f3f3;
  padding: 7px 9px;
  font-size: 10.8px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}
.safezone-fold-head:hover { background: #303030; }
.safezone-fold-head span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.safezone-fold-head em {
  font-style: normal;
  color: #d9a72a;
  font-size: 12px;
  line-height: 1;
  transform: rotate(-90deg);
  transition: transform .12s ease;
}
.safezone-fold-group.open > .safezone-fold-head em { transform: rotate(0deg); }
.safezone-fold-body {
  display: none;
  gap: 7px;
  padding: 7px;
}
.safezone-fold-group.open > .safezone-fold-body { display: grid; }
.safezone-fold-group.open > .safezone-fold-head { border-bottom-color: rgba(217,167,42,.28); }
.safezone-tools-body .prop-section-title { display: none !important; }
.safezone-manage-panel { gap: 0; }
.safezone-live-preview {
  display: grid;
  gap: 5px;
  min-height: 0;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #202020;
  overflow: hidden;
}
.safezone-preview-title {
  color: #b9b9b9;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  box-sizing: border-box;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .25px;
  text-transform: uppercase;
}
#szLivePreviewCanvas {
  width: 100%;
  height: auto;
  max-height: 210px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: #181818;
  display: block;
}




/* Export Commands section */
.export-accordion .accordion-body {
  gap: 8px;
}
.export-accordion.open .export-body,
.app.side-ui > .export-accordion.side-active .export-body {
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  scroll-behavior: auto;
  overscroll-behavior: contain;
}
.export-fields-card {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  background: #202020;
  padding: 8px;
}
.export-field-row { display: grid; gap: 4px; }
.export-field-row label,
.export-inline-grid label {
  color: #aaa;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  box-sizing: border-box;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
}
.export-field-row input,
.export-inline-grid select {
  width: 100%;
}
.export-path-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 5px;
  align-items: center;
}
.export-path-row input { min-width: 0; }
.export-inline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  align-items: end;
}
.export-inline-grid label input[type="checkbox"] { margin-right: 5px; }
.export-fold-group { margin-top: 0; }
.export-action-grid { grid-template-columns: 1fr 1fr; }
.export-fold-body { display: none; }
.export-fold-group.open .export-fold-body { display: block; }
.export-fold-head em { font-style: normal; }
.export-fold-group:not(.open) .export-fold-head em { transform: rotate(-90deg); }
@media (max-width: 330px) {
  .export-path-row { grid-template-columns: 1fr; }
  .export-inline-grid,
  .export-action-grid { grid-template-columns: 1fr; }
}


/* Export Commands v5: force a real scrollbar and clean collapsible settings */
.app.side-ui > .accordion[data-section="export"].side-active > .accordion-body.export-body,
.accordion.export-accordion.open > .accordion-body.export-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 86px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  gap: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
  overscroll-behavior: contain !important;
}
.app.side-ui.sidebar-pos-top > .accordion[data-section="export"].side-active > .accordion-body.export-body,
.app.side-ui.sidebar-pos-bottom > .accordion[data-section="export"].side-active > .accordion-body.export-body {
  max-height: calc(100vh - 205px) !important;
}
.export-settings-group .export-fields-card {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 8px !important;
}
.export-settings-body {
  padding: 0 !important;
}
.export-output-module-row {
  grid-template-columns: minmax(0, 1fr) !important;
}
.export-preset-path-row {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
}
.export-single-action-grid {
  grid-template-columns: 1fr !important;
}
.export-checkbox-grid {
  grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 330px) {
  .export-preset-path-row,
  .export-checkbox-grid { grid-template-columns: 1fr !important; }
}

/* Export Commands v6: top actions outside folds, separate Presets fold, reliable internal scrollbar */
.accordion.export-accordion.open,
.app.side-ui > .accordion[data-section="export"].side-active {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 16px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.accordion.export-accordion.open > .accordion-head,
.app.side-ui > .accordion[data-section="export"].side-active > .accordion-head {
  flex: 0 0 auto !important;
}
.accordion.export-accordion.open > .accordion-body.export-body,
.app.side-ui > .accordion[data-section="export"].side-active > .accordion-body.export-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: calc(100vh - 72px) !important;
  max-height: calc(100vh - 72px) !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding-right: 10px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}
.app.side-ui.sidebar-pos-top > .accordion[data-section="export"].side-active,
.app.side-ui.sidebar-pos-bottom > .accordion[data-section="export"].side-active {
  max-height: calc(100vh - 138px) !important;
}
.app.side-ui.sidebar-pos-top > .accordion[data-section="export"].side-active > .accordion-body.export-body,
.app.side-ui.sidebar-pos-bottom > .accordion[data-section="export"].side-active > .accordion-body.export-body {
  height: calc(100vh - 205px) !important;
  max-height: calc(100vh - 205px) !important;
}
.export-main-actions-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  background: #202020;
  padding: 8px;
  flex: 0 0 auto;
}
.export-main-check {
  color: #aaa;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  box-sizing: border-box;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.export-top-action-grid {
  grid-template-columns: 1fr 1fr !important;
}
.export-top-action-grid .btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.export-presets-group .export-fields-card,
.export-settings-group .export-fields-card,
.export-fold-group[data-export-group="frame-settings"] .export-fields-card,
.export-fold-group[data-export-group="marker-settings"] .export-fields-card {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 8px !important;
}
.export-presets-body,
.export-settings-body,
.export-fold-group[data-export-group="frame-settings"] .export-fold-body,
.export-fold-group[data-export-group="marker-settings"] .export-fold-body {
  padding: 0 !important;
}
.export-settings-checkbox-grid {
  grid-template-columns: 1fr !important;
}
@media (max-width: 330px) {
  .export-top-action-grid { grid-template-columns: 1fr !important; }
}

/* Export Commands v7: render progress monitor for Render Now */
.export-render-progress-card {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px;
  background: #202020;
  padding: 8px;
  flex: 0 0 auto;
}
.export-render-progress-card.hidden {
  display: none !important;
}
.export-progress-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #aaa;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  box-sizing: border-box;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
}
.export-progress-track {
  position: relative;
  height: 9px;
  overflow: hidden;
  border-radius: 99px;
  background: #111;
  border: 1px solid rgba(255,255,255,.12);
}
.export-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.65), rgba(255,255,255,.25));
  transition: width .25s ease;
}
.export-progress-fill.indeterminate {
  width: 38%;
  animation: exportProgressSweep 1.05s linear infinite;
  transition: none;
}
/* Determinate fill: a solid bar that only ever grows, so the width itself is the
   information. The sweeping gradient is reserved for the indeterminate state. */
.export-progress-fill.determinate {
  background: linear-gradient(90deg, #4b79ff, #7ea1ff);
  animation: none;
  left: 0;
}
.export-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-size: 10.5px;
  color: #9a9a9a;
  min-height: 16px;
}
.export-progress-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.export-progress-stop {
  flex: 0 0 auto;
  padding: 2px 10px;
  font-size: 10.5px;
  background: #3a2020;
  border-color: #6b3030;
  color: #ff9a9a;
}
.export-progress-stop:hover { background: #4a2626; color: #ffb3b3; }
.export-progress-stop.hidden { display: none; }
.export-progress-text {
  color: #cfcfcf;
  font-size: 11px;
  line-height: 1.35;
}
@keyframes exportProgressSweep {
  0% { left: -42%; }
  100% { left: 104%; }
}

/* Export Commands v8: progress first, no sub text, layer settings separated */
.export-main-switches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  align-items: center;
}
.export-layer-settings-group .export-fields-card {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 8px !important;
}
.export-layer-settings-body {
  padding: 0 !important;
}
@media (max-width: 330px) {
  .export-main-switches { grid-template-columns: 1fr !important; }
}

/* Export Commands navigation fix v10:
   In side navigation mode, hidden sections must stay hidden even if a
   section-specific rule such as .export-accordion.open sets display:flex. */
.app.side-ui > .accordion[data-section]:not(.side-active) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.app.side-ui > .accordion[data-section].side-active {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Export Commands v15: project-folder checkbox under output folders */
.export-project-folder-row {
  margin-top: 2px !important;
  grid-template-columns: 1fr !important;
}
.export-project-folder-row label {
  text-transform: none !important;
  letter-spacing: .15px !important;
  font-size: 10px !important;
  color: #c7c7c7 !important;
}
.export-folder-disabled {
  opacity: .72 !important;
  cursor: default !important;
}

/* Export Commands v16: shared output folder dropdown */
.export-output-folder-group .export-fields-card {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 8px !important;
}
.export-output-folder-body {
  padding: 0 !important;
}
.export-folder-path-row {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
}
.export-folder-select {
  width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 330px) {
  .export-folder-path-row { grid-template-columns: 1fr !important; }
}

/* Export Commands v18: merged export settings and icon-only Work Area option */
.export-main-switches {
  grid-template-columns: auto 1fr 1fr !important;
}
.export-icon-only-check {
  justify-content: center !important;
  gap: 0 !important;
  min-width: 28px !important;
  min-height: 24px !important;
}
.export-icon-only-check input {
  margin: 0 !important;
}
@media (max-width: 330px) {
  .export-main-switches { grid-template-columns: auto 1fr !important; }
}

/* v21 requested tweaks: Export option inline + full-page Marker Manager tabs */
.export-main-switches-inline {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
}
.export-render-options-inline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  flex-wrap: nowrap;
}
.export-main-check,
.export-open-folder-check {
  white-space: nowrap;
}
@media (max-width: 360px) {
  .export-main-switches-inline { grid-template-columns: 1fr !important; }
  .export-render-options-inline { gap: 8px; }
  .export-main-check { font-size: 9px; }
}

.markers-body {
  display: flex;
  flex-direction: column;
}
.markers-view-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
  flex: 0 0 auto;
}
.markers-view-tabs .btn {
  min-width: 0;
  white-space: normal;
  line-height: 1.15;
}
.markers-view-panel {
  min-width: 0;
}
.markers-tools-panel:not(.hidden) {
  display: block;
}
.markers-manager-panel:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: min(560px, calc(100vh - 150px));
}
.markers-manager-panel .marker-manage-toolbar {
  flex: 0 0 auto;
}
.markers-manager-panel .marker-manage-list {
  flex: 1 1 auto;
  max-height: none !important;
  min-height: 360px;
}
.app.side-ui > .accordion[data-section].side-active .markers-manager-panel .marker-manage-list {
  min-height: calc(100vh - 220px);
}


/* v22 marker manager compact layout and color-coded tabs */
.markers-view-tabs .marker-tools-tab {
  background: #51401c !important;
  border-color: #7b5c1e !important;
  color: #ffd15c !important;
}
.markers-view-tabs .marker-tools-tab.active-marker-tab {
  background: #c89123 !important;
  border-color: #e0ad38 !important;
  color: #111 !important;
}
.markers-view-tabs .marker-manager-tab {
  background: #21355f !important;
  border-color: #365fa8 !important;
  color: #d5e5ff !important;
}
.markers-view-tabs .marker-manager-tab.active-manager-tab {
  background: #4f79ff !important;
  border-color: #6f94ff !important;
  color: #fff !important;
}
.marker-manage-snap-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 6px;
  flex: 0 0 auto;
}
.marker-manage-snap-row .btn {
  min-width: 0;
  min-height: 30px;
  padding: 6px 8px;
  white-space: nowrap;
}
.markers-manager-panel .marker-manage-list,
.marker-manage-list {
  display: block !important;
  align-content: start !important;
  grid-auto-rows: max-content !important;
}
.marker-manage-row {
  grid-template-columns: 88px minmax(0, 1fr) 44px 34px !important;
  gap: 7px !important;
  align-items: center !important;
  min-height: 40px !important;
  height: auto !important;
  padding: 6px 7px !important;
  margin: 0 0 5px !important;
}
.marker-manage-time {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-family: Consolas, 'Courier New', monospace !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}
.marker-manage-info {
  min-width: 0 !important;
  padding-left: 2px !important;
}
.marker-manage-name {
  font-size: 11px !important;
  line-height: 1.2 !important;
}
.marker-manage-scope {
  font-size: 9.5px !important;
  line-height: 1.2 !important;
}
.marker-manage-row .btn {
  min-height: 28px !important;
  padding: 5px 0 !important;
  font-size: 10px !important;
}

/* v23 marker manager updates */
.markers-view-tabs .marker-manager-tab {
  background: #51401c !important;
  border-color: #7b5c1e !important;
  color: #ffd15c !important;
}
.markers-view-tabs .marker-manager-tab.active-manager-tab {
  background: #c89123 !important;
  border-color: #e0ad38 !important;
  color: #111 !important;
}
.marker-manage-name { cursor: text !important; }
.marker-manage-name-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 22px;
  border: 1px solid #e0ad38;
  border-radius: 5px;
  background: #101010;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 5px;
  outline: none;
}

/* v25 marker manager: move Shift Marker controls into Timeline Markers Manager rows */
.marker-manage-shift-head {
  display: grid;
  grid-template-columns: 88px 112px minmax(118px, .55fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0 0 6px;
  padding: 0 2px;
  flex: 0 0 auto;
}
.marker-manage-shift-title {
  color: #bdbdbd;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .45px;
  white-space: nowrap;
}
.marker-manage-highlight-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  color: #d7d7d7;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  box-sizing: border-box;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  user-select: none;
}
.marker-manage-highlight-toggle input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #e0ad38;
}
.marker-manage-shift-head input[type="number"] {
  width: 100%;
  min-width: 0;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}
.marker-manage-row {
  grid-template-columns: 88px minmax(0, 1fr) 44px 34px !important;
  align-items: center !important;
}
.marker-manage-shift-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 4px;
}
.marker-manage-shift-actions .btn,
.marker-manage-row .marker-manage-shift-btn {
  min-width: 0 !important;
  min-height: 25px !important;
  padding: 4px 3px !important;
  font-size: 9.5px !important;
  line-height: 1.1 !important;
  white-space: normal !important;
}
.app.side-ui > .accordion[data-section].side-active .marker-manage-shift-head,
.app.side-ui > .accordion[data-section].side-active .marker-manage-toolbar,
.app.side-ui > .accordion[data-section].side-active .marker-manage-snap-row {
  flex: 0 0 auto !important;
}

/* v32 marker manager sorting + safer Safe Zones fold open */
.marker-manage-sort-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0 0 6px;
  flex: 0 0 auto;
}
.marker-manage-sort-row label {
  color: #bdbdbd;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .35px;
  white-space: nowrap;
}
.marker-manage-sort-row select {
  width: 100%;
  min-width: 0;
}
.app.side-ui > .accordion[data-section].side-active .marker-manage-sort-row {
  flex: 0 0 auto !important;
}
.websites-accordion { position: relative; }
.websites-accordion .accordion-head { padding-right: 42px; }
.safezone-fold-body[style*="display: grid"] { display: grid !important; }

/* v33 Timeline Markers Manager fixes: selected-layer filter + current marker highlight */
.marker-manage-filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0 0 6px;
  flex: 0 0 auto;
}
.marker-manage-filter-row .btn {
  min-height: 30px;
  white-space: nowrap;
}
.marker-manage-row.marker-manage-current {
  background: #3f3420 !important;
  border-color: #e0ad38 !important;
  box-shadow: 0 0 0 1px rgba(224, 173, 56, .75), inset 3px 0 0 #f3c247 !important;
}
.marker-manage-row.marker-manage-current .marker-manage-time {
  color: #ffe08a !important;
}
.marker-manage-row.marker-manage-current .marker-manage-name::before {
  content: '● ';
  color: #f3c247;
}
.app.side-ui > .accordion[data-section].side-active .marker-manage-filter-row {
  flex: 0 0 auto !important;
}

/* v36 Quick Action + Timeline Marker Manager refinements */
.quickaction-grid #qaCloseGapsBtn {
  min-width: 0;
}
@media (max-width: 520px) {
  .marker-manage-shift-head { grid-template-columns: 78px 104px minmax(110px, 1fr); }
  .marker-manage-highlight-toggle { grid-column: 1 / -1; justify-content: flex-start; }
  .marker-manage-highlight-toggle span { white-space: normal; line-height: 1.05; }
}

/* v43: Properties section reorder */
.properties-reorder-toolbar { justify-content: flex-end; margin-bottom: 6px; }
.prop-section-group { display: grid; gap: 6px; }
.properties-panel.properties-reorder-mode { outline: 1px dashed #ffb21a; border-radius: 8px; padding: 4px; background: rgba(255,178,26,.04); }
.properties-panel.properties-reorder-mode .prop-section-group { cursor: move; outline: 1px dashed rgba(255,178,26,.65); border-radius: 8px; padding: 4px; position: relative; }
.properties-panel.properties-reorder-mode .prop-section-group::before { content: '↕'; position: absolute; left: 5px; top: 5px; z-index: 4; color: #ffb21a; font-size: 11px; font-weight: 900; pointer-events: none; text-shadow: 0 1px 2px #000; }
.properties-panel .prop-section-group.dragging { opacity: .45; }

/* ── v3.97 Shape Contents nested collapsible property groups ─────────── */
.shape-prop-fold {
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  margin: 6px 0;
  overflow: hidden;
}
.shape-prop-fold-head {
  width: 100%;
  border: 0;
  background: #252525;
  color: #e8e8e8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22px;
  text-transform: uppercase;
}
.shape-prop-fold-head:hover { background: #303030; }
.shape-prop-fold-head b {
  color: #f0c044;
  font-size: 12px;
  line-height: 1;
  transition: transform .12s ease;
}
.shape-prop-fold:not(.open) .shape-prop-fold-head b { transform: rotate(-90deg); }
.shape-prop-fold-body { display: none; padding: 7px; }
.shape-prop-fold.open .shape-prop-fold-body { display: block; }
.shape-prop-subtitle {
  color: #bdbdbd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18px;
  margin: 5px 0 5px;
  opacity: .95;
}
.shape-prop-fold .properties-grid { margin-bottom: 7px; }
.shape-prop-fold .properties-grid:last-child { margin-bottom: 0; }
.shape-prop-fold .btn { font-size: 10px; }
.properties-reorder-mode .shape-prop-fold-head { cursor: move; }

/* ── v55 Shape Contents flat buttons + visibility settings ─────────── */
.shape-contents-title {
  grid-template-columns: auto auto 1fr;
}
.shape-props-settings-btn {
  min-height: 22px !important;
  height: 22px;
  padding: 2px 7px !important;
  font-size: 11px !important;
  line-height: 1;
}
.shape-contents-flat-grid {
  margin-top: 2px;
}
.shape-content-prop {
  font-size: 10px !important;
}
.shape-props-settings-modal {
  max-width: 360px;
}
.shape-props-settings-note {
  font-size: 11px;
  line-height: 1.45;
  color: #cfcfcf;
  margin: 0 0 8px;
}
.shape-props-settings-search-row {
  margin: 0 0 8px;
}
.shape-props-settings-search-row input {
  width: 100%;
  background: #181818;
  color: #f4f4f4;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 11.5px;
  outline: none;
}
.shape-props-settings-row.shape-settings-filter-hidden {
  display: none;
}
.shape-props-settings-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  max-height: 54vh;
  overflow-y: auto;
  padding: 6px;
  background: #202020;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
}
.shape-props-settings-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,.035);
  color: #e7e7e7;
  font-size: 11px;
  line-height: 1.25;
  cursor: pointer;
}
.shape-props-settings-row:hover {
  background: rgba(240,192,68,.12);
}
.shape-props-settings-row input {
  margin: 0;
  flex: 0 0 auto;
}
.shape-props-settings-actions {
  justify-content: flex-end;
}

/* Shape Contents split button controls */
.shape-split-button {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 31px;
}
.shape-split-button.hidden {
  display: none !important;
}
.shape-split-button .btn {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 31px;
  padding-left: 4px !important;
  padding-right: 4px !important;
  border-radius: 0;
}
.shape-split-button .btn:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.shape-split-button .btn:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-left: -1px;
}
.shape-split-button .btn.hidden {
  display: none !important;
}
.shape-split-button .btn.hidden + .btn,
.shape-split-button .btn:first-child:last-child {
  border-radius: 5px;
  margin-left: 0;
}

/* v72: Properties reorder now supports section blocks and buttons */
.properties-panel.properties-reorder-mode .properties-grid > button[data-prop],
.properties-panel.properties-reorder-mode .properties-grid > button[data-search],
.properties-panel.properties-reorder-mode .properties-grid > .shape-split-button {
  cursor: move;
  outline: 1px dashed rgba(255,178,26,.45);
}
.properties-panel .properties-grid > button.dragging,
.properties-panel .properties-grid > .shape-split-button.dragging {
  opacity: .45;
}

/* v72: Text Layer property buttons */
.text-layer-title {
  grid-template-columns: auto auto 1fr;
}
.text-layer-flat-grid {
  margin-top: 2px;
}
.text-layer-prop {
  font-size: 10px !important;
}


/* v78: Properties menu and AE Comp tabs */
.properties-accordion { position: relative; }
.properties-accordion-head { padding-right: 42px; }
.properties-header-menu-wrap { position: absolute; top: 5px; right: 8px; z-index: 7; }
.properties-header-menu { width: 150px; }
.ae-comp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.ae-comp-panel { display: none; }
.ae-comp-panel.active { display: block; }
.ae-comp-settings-grid { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 6px; align-items: center; margin-bottom: 8px; }
.ae-comp-settings-grid label { font-size: 11px; color: #d7d7d7; font-weight: 800; }
.ae-comp-duration-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.ae-comp-duration-row .btn { min-width: 42px; white-space: nowrap; }
.ae-comp-settings-actions { justify-content: flex-end; }

/* v78: Favorites */
.comp-fav-btn, .assets-fav-btn { color: #b7b7b7; }
.comp-fav-btn.active, .assets-fav-btn.active, .color-fav-star.active { color: #ffcc44 !important; }
.comp-card { grid-template-columns: minmax(0, 1fr) 28px 28px 28px; }
.color-fav-star { color: #b7b7b7; cursor: pointer; }
.color-swatch-wrap.favorite .color-fav-star { color: #ffcc44; }
.assets-folder-title-static, .color-group-title-static { cursor: default; }
/* v78 fixes: composition/card favorite placement and color favorite star placement */
.comp-fav-btn {
  position: absolute;
  right: 34px;
  top: 5px;
  z-index: 3;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  background: rgba(35,35,35,.92);
  color: #b7b7b7;
  cursor: pointer;
  font-size: 13px;
  line-height: 24px;
  padding: 0;
  opacity: .84;
}
.comp-fav-btn:hover { opacity: 1; background: #3a3510; }
.comp-fav-btn.active { color: #ffcc44; }
.color-fav-star {
  left: -5px;
  right: auto !important;
  background: #3a3510;
}

/* v80: AE Comp Settings background color swatch */
.ae-comp-bg-color-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; align-items: center; }
.ae-comp-bg-color-swatch { width: 28px; height: 28px; border-radius: 7px; border: 1px solid #666; background: #000; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.ae-comp-bg-color-swatch:hover { border-color: #f0c044; filter: brightness(1.08); }
.ae-comp-bg-color-picker { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }


/* v81 Favorites: collapsible groups */
.comp-project-group { grid-column: 1 / -1; border: 1px solid #333; border-radius: 8px; overflow: hidden; background: #202020; margin-bottom: 5px; }
.comp-project-group-head { width: 100%; }
.comp-project-group-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--comp-card-size), 1fr)); gap: 7px; padding: 6px; }
.sc-group { margin-bottom: 5px; border: 1px solid #333; border-radius: 8px; overflow: hidden; background: #202020; }
.sc-collapsible-head { width: 100%; border: 0; background: #252525; text-align: left; cursor: pointer; }
.sc-group-body { padding: 4px; }
.assets-favorites-folder .assets-folder-head { grid-template-columns: 24px 1fr 28px 28px; }
.color-favorites-group .color-group-head { grid-template-columns: 24px minmax(0, 1fr) 26px 26px; }


/* v83: assets/compositions view refinements */
.assets-file-row { grid-template-columns: 24px minmax(0,1fr) 26px 26px; }
.assets-file-row.has-preview { grid-template-columns: 24px minmax(0,1fr) 26px 26px 26px; }
.assets-file-row .assets-file-btn { min-width: 0; }
.assets-view-thumb .assets-folder-files { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 7px; padding: 7px; }
.assets-view-thumb .assets-file-row,
.assets-view-thumb .assets-file-row.has-preview {
  grid-template-columns: minmax(0,1fr) 24px 24px 24px;
  grid-template-rows: 82px 24px;
  gap: 4px;
  min-width: 0;
}
.assets-view-thumb .assets-thumb-box,
.assets-view-thumb .assets-file-row.has-preview .assets-thumb-box { grid-column: 1 / 5; height: 82px; }
.assets-view-thumb .assets-file-btn,
.assets-view-thumb .assets-file-row.has-preview .assets-file-btn { grid-column: 1 / 2; grid-row: 2; }
.assets-view-thumb .assets-fav-btn { grid-column: 2 / 3; grid-row: 2; }
.assets-view-thumb .assets-preview-btn { grid-column: 3 / 4; grid-row: 2; }
.assets-view-thumb .assets-mini-btn.danger { grid-column: 4 / 5; grid-row: 2; }
.assets-view-thumb .assets-mini-btn { min-width: 0; }

.comp-view-submenu-wrap { position: relative; }
.comp-view-submenu { position: absolute; left: 100%; top: 0; z-index: 30; min-width: 88px; }
.comp-list.comp-view-thumb { grid-template-columns: repeat(auto-fill, minmax(var(--comp-card-size), 1fr)); }
.comp-list.comp-view-list { grid-template-columns: 1fr; }
.comp-list.comp-view-list .comp-project-group-body { grid-template-columns: 1fr; gap: 4px; }
.comp-list-title { display: none; }
.comp-list.comp-view-list .comp-card {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 26px 26px 26px;
  gap: 4px;
  align-items: center;
  padding: 3px;
  border-radius: 7px;
  background: #262626;
  border: 1px solid #373737;
  min-width: 0;
}
.comp-list.comp-view-list .comp-thumb-wrap { width: 34px; height: 34px; min-height: 34px; aspect-ratio: auto; border-radius: 6px; }
.comp-list.comp-view-list .comp-thumb { width: 34px; height: 34px; object-fit: cover; }
.comp-list.comp-view-list .comp-card-title { display: none; }
.comp-list.comp-view-list .comp-list-title {
  display: block;
  border: 0;
  border-radius: 7px;
  padding: 7px 8px;
  background: #303030;
  color: #fff;
  text-align: left;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.comp-list.comp-view-list .comp-list-title:hover { background: #4b79ff; }
.comp-list.comp-view-list .comp-fav-btn,
.comp-list.comp-view-list .comp-card-preview-btn,
.comp-list.comp-view-list .comp-delete-btn {
  position: static;
  width: 26px;
  height: 26px;
  line-height: 26px;
  opacity: 1;
}
.comp-list.comp-view-list .comp-card-preview-btn.disabled { opacity: .35; }
.comp-list.comp-view-thumb .comp-list-title { display: none; }

/* v84: automatic Help / Shortcuts prompt */
.generic-help-dont-show-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 0;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: #ddd;
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
}
.generic-help-dont-show-row input {
  margin: 0;
  flex: 0 0 auto;
}


/* v85: AE Comp/Assets/Compositions refinements */
.assets-folder-head,
.assets-favorites-folder .assets-folder-head,
.assets-reorder-mode .assets-folder-head {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.assets-folder-head .assets-caret {
  flex: 0 0 28px !important;
  width: 28px !important;
}
.assets-folder-head .assets-folder-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.assets-folder-head .assets-mini-btn {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
}
.assets-folder-head > span {
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
}

.comp-list,
.app.side-ui > .accordion[data-section].side-active .comp-list {
  display: block !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  max-height: 275px !important;
  padding-right: 5px !important;
}
.comp-list::-webkit-scrollbar { width: 10px; }
.comp-list::-webkit-scrollbar-track { background: #151515; border-radius: 8px; }
.comp-list::-webkit-scrollbar-thumb { background: #555; border-radius: 8px; border: 2px solid #151515; }
.comp-list::-webkit-scrollbar-thumb:hover { background: #777; }

.comp-list.comp-view-thumb .comp-project-group-body {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
  gap: 8px !important;
}
.comp-list.comp-view-thumb .comp-card {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 26px 26px 26px !important;
  grid-template-rows: auto 26px !important;
  gap: 4px !important;
  align-items: stretch !important;
  padding: 4px !important;
  border-radius: 8px !important;
  background: #262626 !important;
  border: 1px solid #373737 !important;
  min-width: 0 !important;
}
.comp-list.comp-view-thumb .comp-thumb-wrap {
  grid-column: 1 / 5 !important;
  grid-row: 1 !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
}
.comp-list.comp-view-thumb .comp-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.comp-list.comp-view-thumb .comp-list-title {
  display: block !important;
  grid-column: 1 / 2 !important;
  grid-row: 2 !important;
  border: 0 !important;
  border-radius: 7px !important;
  padding: 5px 6px !important;
  background: #303030 !important;
  color: #fff !important;
  text-align: left !important;
  cursor: pointer !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
.comp-list.comp-view-thumb .comp-list-title:hover { background: #4b79ff !important; }
.comp-list.comp-view-thumb .comp-fav-btn,
.comp-list.comp-view-thumb .comp-card-preview-btn,
.comp-list.comp-view-thumb .comp-delete-btn {
  position: static !important;
  width: 26px !important;
  height: 26px !important;
  line-height: 26px !important;
  opacity: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: auto !important;
}
.comp-list.comp-view-thumb .comp-fav-btn { grid-column: 2 / 3 !important; grid-row: 2 !important; }
.comp-list.comp-view-thumb .comp-card-preview-btn { grid-column: 3 / 4 !important; grid-row: 2 !important; }
.comp-list.comp-view-thumb .comp-delete-btn { grid-column: 4 / 5 !important; grid-row: 2 !important; }
.comp-list.comp-view-thumb .comp-card-preview-btn.disabled { opacity: .35 !important; }


/* v86: License activation / tool lock */
body.license-locked .app {
  pointer-events: none;
  filter: blur(1px) grayscale(.2);
  opacity: .42;
}
.license-overlay {
  z-index: 9999;
}
.license-modal {
  max-width: 520px;
  width: calc(100vw - 38px);
}
.license-note,
.license-footnote {
  color: #cfcfcf;
  font-size: 11.5px;
  line-height: 1.45;
  margin: 0 0 10px;
}
.license-footnote {
  margin: 10px 0 0;
  opacity: .85;
}
.license-footnote code {
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 1px 4px;
  color: #ffd45e;
}
.license-status-box {
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid #333;
  background: #141414;
  color: #e7e7e7;
  padding: 8px 9px;
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.35;
  white-space: pre-wrap;
}
.license-status-box.ok {
  color: #87f59b;
  border-color: #285f34;
  background: #0d1b10;
}
.license-status-box.warn {
  color: #ffd36a;
  border-color: #66501d;
  background: #1f190c;
}
.license-status-box.error {
  color: #ff7777;
  border-color: #6b2b2b;
  background: #1a0e0e;
}
.license-grid {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 7px 8px;
  align-items: center;
}
.license-grid label {
  font-size: 11px;
  color: #ddd;
  font-weight: 800;
}
.license-grid input {
  width: 100%;
  min-width: 0;
  background: #111;
  color: #f4f4f4;
  border: 1px solid #3f3f3f;
  border-radius: 7px;
  padding: 7px 8px;
  outline: none;
  font-size: 12px;
}
.license-grid input[readonly] {
  opacity: .78;
}
.license-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
body.license-locked #licenseCloseBtn {
  display: none;
}

/* v1.0.10 Quick Action Sequence compact selector */
.sequence-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px 28px 28px;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.sequence-compact .btn {
  min-width: 0;
  padding-left: 5px;
  padding-right: 5px;
  line-height: 1.1;
}
.sequence-compact .sequence-main {
  text-align: center;
}
.sequence-compact .sequence-mode {
  font-size: 11px;
  font-weight: 800;
  opacity: .76;
  border-color: #3b3b3b;
}
.sequence-compact .sequence-mode.active {
  opacity: 1;
  border-color: #5aa3e6;
  box-shadow: inset 0 0 0 1px rgba(90,163,230,.45);
}
.sequence-compact .sequence-mode:hover {
  opacity: 1;
}

/* v1.0.11 Quick Add Sort Project compact button + settings */
.sort-project-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.sort-project-compact .btn {
  min-width: 0;
  line-height: 1.1;
}
.sort-project-compact .sort-project-main {
  text-align: center;
}
.sort-project-compact .sort-project-settings {
  font-size: 14px;
  font-weight: 800;
  padding-left: 5px;
  padding-right: 5px;
}
.quickadd-sort-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0,0,0,.62);
}
.quickadd-sort-modal {
  width: min(580px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  background: #1f1f1f;
  border: 1px solid #3a3a3a;
  border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,.46);
  overflow: hidden;
}
.quickadd-sort-head,
.quickadd-sort-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid #333;
}
.quickadd-sort-foot {
  border-bottom: 0;
  border-top: 1px solid #333;
}
.quickadd-sort-title {
  font-size: 15px;
  font-weight: 800;
  color: #f2f2f2;
}
.quickadd-sort-sub,
.quickadd-sort-note {
  font-size: 12px;
  color: #b8b8b8;
  margin-top: 2px;
}
.quickadd-sort-body {
  padding: 12px 15px;
  overflow: auto;
}
.quickadd-sort-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.quickadd-sort-row label {
  font-size: 12px;
  color: #d5d5d5;
}
.quickadd-sort-row input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}
.quickadd-sort-checks {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #333;
}
.quickadd-sort-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #d7d7d7;
}
.quickadd-sort-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}


/* ── v1.0.13 RTL/LTR mixed text support ─────────────────────────────
   Keeps English UI layout unchanged, but lets Arabic/Hebrew/Persian names
   choose their own text direction inside user-content lists. */
.ut-bidi-auto,
#assetsSearch,
#compSearch,
#presetsSearch,
#websitesSearch,
#scSearch,
#websiteNameInput,
#websiteUrlInput,
#presetName,
#assetsList .assets-folder-title,
#assetsList .assets-file-btn,
#assetsPreview .assets-preview-title,
#assetsPreview .assets-preview-placeholder,
#compProjectsList .comp-card-title,
#compProjectsList .comp-list-title,
#compPreview .comp-preview-title,
#compPreview .comp-preview-placeholder,
#presetsList .preset-button,
#presetsList .preset-section-head,
#websitesList .website-title,
#websitesList .website-url,
#scriptsList .sc-name-btn,
#scriptsList .sc-section-head,
#foldersList .folders-open {
  unicode-bidi: plaintext !important;
  text-align: start !important;
}

#assetsSearch,
#compSearch,
#presetsSearch,
#websitesSearch,
#scSearch,
#websiteNameInput,
#websiteUrlInput,
#presetName {
}

#assetsList .assets-file-btn,
#assetsList .assets-folder-title,
#compProjectsList .comp-list-title,
#scriptsList .sc-name-btn,
#websitesList .website-open-btn,
#presetsList .preset-button {
  overflow-wrap: anywhere;
}


/* v1.0.17 Colors import / export */
.accordion[data-section="colors"] { position: relative; }
.accordion[data-section="colors"] > .accordion-head { padding-right: 42px; }
.colors-header-menu { width: 132px; }
.colors-export-modal { max-width: 390px; }
.colors-export-note { color: #bdbdbd; font-size: 11px; line-height: 1.4; margin: 2px 0 8px; }
.colors-export-toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.colors-export-list { max-height: 245px; overflow-y: auto; overflow-x: hidden; background: #181818; border: 1px solid #444; border-radius: 8px; padding: 5px; }
.colors-export-row { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: #272727; border: 1px solid #373737; margin-bottom: 5px; cursor: pointer; }
.colors-export-row:last-child { margin-bottom: 0; }
.colors-export-row:hover { background: #303030; }
.colors-export-row input { margin: 0; width: 16px; height: 16px; }
.colors-export-name { color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.colors-export-count { color: #bdbdbd; font-size: 10.5px; white-space: nowrap; }
.colors-export-selection-info { color: #9fc4ff; font-size: 11px; margin-top: 8px; }


/* v1.0.21 Colors internal layer target picker */
.colors-layer-target-picker {
  margin: 0 0 7px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid #3f4f6d;
  background: linear-gradient(180deg, #232833, #1d1f25);
  box-shadow: 0 8px 22px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.025);
}
.colors-layer-target-top {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 24px;
  gap: 7px;
  align-items: center;
  margin-bottom: 7px;
}
.colors-layer-target-new {
  width: 26px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.colors-layer-target-title {
  min-width: 0;
  color: #f2f4ff;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.colors-layer-target-sub {
  color: #aeb8ca;
  font-size: 10px;
  font-weight: 700;
}
.colors-layer-target-close {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  background: #343a46;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  line-height: 24px;
  padding: 0;
}
.colors-layer-target-close:hover { background: #b33838; }
.colors-layer-target-list {
  display: grid;
  gap: 5px;
  max-height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}
.colors-layer-target-row {
  display: grid;
  grid-template-columns: auto 24px minmax(0,1fr) auto;
  gap: 7px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  border: 1px solid #3a3d47;
  border-radius: 8px;
  background: #292b32;
  color: #f5f5f5;
  cursor: pointer;
  padding: 6px;
  text-align: left;
}
.colors-layer-target-check { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: #4b79ff; flex: 0 0 auto; }
.colors-layer-target-row:hover { border-color: #4b79ff; background: #313745; }
.colors-layer-target-swatch {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.colors-layer-target-label {
  min-width: 0;
  font-size: 10.8px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.colors-layer-target-hex {
  color: #b7c0d3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}


/* v1.0.22 Colors layer target picker: Export-style internal modal */
.colors-layer-target-modal {
  max-width: 390px;
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.colors-layer-target-note {
  color: #bdbdbd;
  font-size: 11px;
  line-height: 1.4;
  margin: 2px 0 8px;
}
.colors-layer-target-current {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  background: #181818;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 7px;
  margin-bottom: 8px;
}
.colors-layer-target-modal .colors-layer-target-new {
  display: block;
  width: 30px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.colors-layer-target-modal .colors-layer-target-title {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}
.colors-layer-target-modal .colors-layer-target-sub {
  color: #9fc4ff;
  font-size: 10.5px;
  font-weight: 800;
  margin-top: 2px;
}
.colors-layer-target-modal .colors-layer-target-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  background: #181818;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 5px;
  display: block;
}
.colors-layer-target-modal .colors-layer-target-row {
  display: grid;
  grid-template-columns: 26px auto auto minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px;
  border-radius: 8px;
  background: #272727;
  border: 1px solid #373737;
  color: #fff;
  cursor: default;
  text-align: left;
}
.colors-layer-target-modal .colors-layer-target-convert {
  justify-self: end;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #8B5CF6;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, opacity .12s ease;
}
.colors-layer-target-modal .colors-layer-target-convert:hover { background: #7c4ef0; }
.colors-layer-target-modal .colors-layer-target-convert:disabled { opacity: .55; cursor: default; }
.colors-layer-target-modal .colors-layer-target-row { margin-bottom: 5px; }
.colors-layer-target-modal .colors-layer-target-row:last-child { margin-bottom: 0; }
.colors-layer-target-modal .colors-layer-target-row:hover { background: #303030; border-color: #4b79ff; }
.colors-layer-target-modal .colors-layer-target-swatch {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.colors-layer-target-modal .colors-layer-target-swatch:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px #4b79ff, inset 0 0 0 1px rgba(0,0,0,.25);
}
.colors-layer-target-modal .colors-layer-target-row.readonly .colors-layer-target-swatch { cursor: default; transform: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.colors-layer-target-modal .colors-layer-target-label {
  min-width: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.colors-layer-target-modal .colors-layer-target-hex {
  color: #bdbdbd;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}
.colors-layer-target-empty {
  color: #bdbdbd;
  font-size: 11px;
  line-height: 1.4;
  padding: 10px;
  border-radius: 8px;
  background: #272727;
  border: 1px solid #373737;
}
.colors-layer-target-message {
  color: #9fc4ff;
  font-size: 11px;
  margin-top: 8px;
}

/* v1.0.26: AE Comp Extend Comp by pixel amount */
.ae-comp-tabs { grid-template-columns: 1fr 1fr 1fr; }
.ae-comp-current-size {
  border: 1px solid #303030;
  border-radius: 8px;
  background: #111;
  color: #bfc7d8;
  font-size: 11px;
  font-weight: 800;
  padding: 7px 8px;
  margin-bottom: 8px;
}
.ae-comp-result-size {
  color: #9fc5ff;
  margin-top: 8px;
}
.ae-comp-extend-grid select {
  width: 100%;
  min-width: 0;
  background: #111;
  color: #eee;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 800;
}
.ae-comp-extend-title {
  color: #d7d7d7;
  font-size: 11px;
  font-weight: 900;
  margin: 3px 0 6px;
}
.ae-comp-direction-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 0;
}
.ae-comp-direction-grid .btn {
  min-width: 0;
  padding-left: 3px;
  padding-right: 3px;
}
.ae-comp-direction-grid .btn[data-direction="all"] {
  grid-column: 1 / -1;
}
.ae-comp-direction-grid-3x3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ae-comp-direction-grid-3x3 .btn,
.ae-comp-direction-grid-3x3 .btn[data-direction="all"] {
  grid-column: auto;
  min-height: 44px;
  height: 44px;
  padding: 5px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
}
.ae-comp-direction-grid-3x3 .btn span {
  display: block;
  font-size: 10px;
  line-height: 1.05;
  white-space: normal;
}
.ae-comp-extend-check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #d7d7d7;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid #303030;
  border-radius: 8px;
  background: #111;
  padding: 7px 8px;
  margin: 0 0 8px;
}
.ae-comp-extend-check input { margin: 0; }


/* v1.0.27: Arrange & Align 3x3 layer placement grid */
.align-position-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
.align-position-grid .btn {
  min-height: 38px;
  height: 38px;
  padding: 6px 4px;
  white-space: normal;
  line-height: 1.1;
  text-align: center;
}
.app.side-ui > .accordion[data-section="arrangealign"].side-active .align-position-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
}

/* v1.0.28: AE Comp Extend direction selector changed to a 3x3 grid. */


/* ── Your Layers Global Library ───────────────────────────── */
.layers-save-box { display:grid; grid-template-columns: 1fr 0.75fr; gap:8px; margin-bottom:10px; }
.layers-save-box #layersSaveBtn { grid-column:auto; min-width:0; }
.layers-fold-group { border:1px solid #333; border-radius:10px; margin:8px 0; overflow:hidden; background:#202020; }
.layers-fold-head { width:100%; border:0; border-bottom:1px solid transparent; background:#222; color:#fff; padding:9px 10px; display:flex; justify-content:space-between; align-items:center; font-weight:700; text-transform:uppercase; cursor:pointer; }
.layers-fold-group.open .layers-fold-head { border-bottom-color:#333; }
.layers-fold-body { display:none; padding:10px; }
.layers-fold-group.open .layers-fold-body { display:block; }
.layers-fold-group.open .layers-fold-body.layers-options-grid { display:grid; }
.layers-fold-group:not(.open) .layers-fold-body { display:none !important; }
.layers-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
.layers-options-grid label { background:#2c2c2c; border:1px solid #3a3a3a; border-radius:8px; padding:8px; font-size:12px; display:flex; gap:6px; align-items:center; }
.layers-options-grid label:last-child { grid-column:1 / -1; }
.layers-insert-buttons { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
.layers-insert-buttons .btn.active { background:#4b7dff; color:#fff; }
.layers-library-toolbar { display:grid; grid-template-columns: 1fr; gap:8px; margin:10px 0; }
.layers-library-toolbar select, .layers-library-toolbar input, .layers-save-box input { width:100%; box-sizing:border-box; }
.layers-warning-note { border:1px solid #9c7230; background:#2c2416; color:#ffd38a; border-radius:8px; padding:8px 10px; margin:8px 0; font-size:12px; line-height:1.35; }
.layers-list { display:flex; flex-direction:column; gap:8px; }
.layers-empty { border:1px dashed #444; border-radius:10px; padding:14px; color:#aaa; text-align:center; background:#1c1c1c; }
.layers-card { border:1px solid #343434; border-radius:10px; background:#242424; padding:9px; display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:start; }
.layers-card.favorite { border-color:#b58a21; }
.layers-card-main { min-width:0; }
.layers-card-title { color:#fff; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layers-card-meta { color:#aaa; font-size:11px; margin-top:3px; line-height:1.3; }
.layers-card-warning { color:#ffd38a; font-size:11px; margin-top:5px; }
.layers-card-actions { display:grid; grid-template-columns: repeat(2, auto); gap:5px; }
.layers-card-actions .btn { padding:6px 8px; font-size:11px; }
.layers-card-actions .layers-insert-action { grid-column:1 / -1; }
@media (max-width: 380px) {
  .layers-save-box, .layers-options-grid, .layers-insert-buttons, .layers-library-toolbar { grid-template-columns:1fr; }
  .layers-card { grid-template-columns:1fr; }
  .layers-card-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .layers-card-actions .layers-insert-action { grid-column:auto; }
}

/* ── v1.0.33 Your Layers scrollbar + compact one-row actions ───────────── */
/* Show a clear vertical scrollbar for the opened tool section and keep long
   menus usable inside the CEP panel. */
html, body {
  overflow: hidden !important;
}
.app,
.app.side-ui {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}
.app.side-ui > .accordion[data-section].side-active {
  overflow: hidden !important;
}
.app.side-ui > .accordion[data-section].side-active > .accordion-body,
.app.side-ui > .accordion[data-section].side-active > .accordion-body.layers-body {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  padding-right: 10px !important;
}
.layers-accordion.side-active .layers-body,
.layers-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}
.layers-list {
  padding-bottom: 14px !important;
}

/* Put saved-layer action buttons beside each other in one row. */
.layers-card {
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}
.layers-card-actions {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr 1fr .72fr 1fr !important;
  gap: 5px !important;
  width: 100% !important;
}
.layers-card-actions .btn,
.layers-card-actions .layers-insert-action {
  grid-column: auto !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 7px 4px !important;
  font-size: 10.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* CEP/Chromium scrollbar styling so the scroll handle is visible in the dark UI. */
.app::-webkit-scrollbar,
.accordion-body::-webkit-scrollbar,
.layers-body::-webkit-scrollbar,
.layers-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.app::-webkit-scrollbar-track,
.accordion-body::-webkit-scrollbar-track,
.layers-body::-webkit-scrollbar-track,
.layers-list::-webkit-scrollbar-track {
  background: #171717;
  border-radius: 10px;
}
.app::-webkit-scrollbar-thumb,
.accordion-body::-webkit-scrollbar-thumb,
.layers-body::-webkit-scrollbar-thumb,
.layers-list::-webkit-scrollbar-thumb {
  background: #5a5a5a;
  border-radius: 10px;
  border: 2px solid #171717;
}
.app::-webkit-scrollbar-thumb:hover,
.accordion-body::-webkit-scrollbar-thumb:hover,
.layers-body::-webkit-scrollbar-thumb:hover,
.layers-list::-webkit-scrollbar-thumb:hover {
  background: #777;
}

@media (max-width: 420px) {
  .layers-card-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .layers-card-actions .btn,
  .layers-card-actions .layers-insert-action {
    font-size: 9.5px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}


/* ── v1.0.34 Your Layers save options compact 3-column grid + visible scroll ───────────── */
.layers-options-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  padding-right: 10px !important;
}
.layers-fold-group.open .layers-fold-body.layers-options-grid {
  display: grid !important;
}
.layers-options-grid label,
.layers-options-grid label:last-child {
  grid-column: auto !important;
  min-height: 46px !important;
  padding: 8px 7px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: normal !important;
}
.layers-options-grid label input {
  flex: 0 0 auto !important;
}

/* Make the Your Layers section itself scroll inside the CEP panel. */
.app.side-ui > .accordion[data-section="layers"].side-active {
  height: calc(100vh - 58px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.app.side-ui > .accordion[data-section="layers"].side-active > .accordion-body.layers-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  padding-right: 12px !important;
}
.layers-fold-body::-webkit-scrollbar,
.layers-options-grid::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.layers-fold-body::-webkit-scrollbar-track,
.layers-options-grid::-webkit-scrollbar-track {
  background: #171717;
  border-radius: 10px;
}
.layers-fold-body::-webkit-scrollbar-thumb,
.layers-options-grid::-webkit-scrollbar-thumb {
  background: #5a5a5a;
  border-radius: 10px;
  border: 2px solid #171717;
}
.layers-fold-body::-webkit-scrollbar-thumb:hover,
.layers-options-grid::-webkit-scrollbar-thumb:hover {
  background: #777;
}
@media (max-width: 520px) {
  .layers-options-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .layers-options-grid label {
    font-size: 10px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}


/* ── v1.0.35 Your Layers compact save chips + separate-layer save option ───────────── */
.layers-options-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  max-height: 188px !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding-right: 10px !important;
}
.layers-options-grid label,
.layers-options-grid label:last-child {
  grid-column: auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 6px 7px !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.layers-options-grid label input {
  width: 13px !important;
  height: 13px !important;
}
@media (max-width: 430px) {
  .layers-options-grid label {
    font-size: 10px !important;
    padding: 5px 4px !important;
  }
}

/* ── v1.0.36 Your Layers save options moved to menu modal ───────────── */
.layers-save-options-modal {
  width: min(560px, calc(100vw - 42px)) !important;
  max-height: min(520px, calc(100vh - 56px)) !important;
  display: flex !important;
  flex-direction: column !important;
}
.layers-options-note {
  color: #bdbdbd;
  font-size: 12px;
  line-height: 1.35;
  margin: 2px 0 10px;
}
.layers-options-modal-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 255px !important;
  padding: 2px 4px 2px 0 !important;
  scrollbar-gutter: stable !important;
}
.layers-options-modal-grid label {
  background: #2c2c2c;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  padding: 6px 7px !important;
  min-height: 0 !important;
  height: auto !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.layers-options-modal-grid input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 auto !important;
}
.layers-options-modal-grid::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.layers-options-modal-grid::-webkit-scrollbar-track {
  background: #171717;
  border-radius: 10px;
}
.layers-options-modal-grid::-webkit-scrollbar-thumb {
  background: #5a5a5a;
  border-radius: 10px;
  border: 2px solid #171717;
}
.layers-options-modal-grid::-webkit-scrollbar-thumb:hover {
  background: #777;
}
@media (max-width: 430px) {
  .layers-options-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── v1.0.37 Your Layers: multi-layer save choice modal ───────────── */
.layers-separate-save-modal {
  width: min(520px, calc(100vw - 42px)) !important;
  display: flex !important;
  flex-direction: column !important;
}
.layers-separate-save-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.layers-separate-save-actions .btn {
  width: 100% !important;
  min-height: 36px !important;
  height: auto !important;
  padding: 9px 12px !important;
  justify-content: center !important;
  white-space: normal !important;
}
@media (min-width: 560px) {
  .layers-separate-save-actions {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── v1.0.38 Your Layers: compact actions beside preset name ───────────── */
.layers-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px !important;
  padding: 9px 10px !important;
}
.layers-card-main {
  min-width: 0 !important;
  align-self: center !important;
}
.layers-card-title {
  line-height: 1.15 !important;
  margin-top: 0 !important;
}
.layers-card-meta {
  margin-top: 4px !important;
}
.layers-card-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  width: auto !important;
  max-width: none !important;
  justify-self: end !important;
  align-self: start !important;
}
.layers-card-actions .btn,
.layers-card-actions .layers-insert-action {
  grid-column: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.layers-card-actions .layers-insert-action {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.layers-card-actions .btn:nth-child(4) {
  min-width: 30px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
@media (max-width: 560px) {
  .layers-card {
    grid-template-columns: 1fr !important;
  }
  .layers-card-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}


/* v1.0.42 Markers: selected layer shift buttons beside Shift Marker */
.marker-manage-layer-shift-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}
.marker-manage-layer-shift-actions .btn {
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 4px 5px !important;
  font-size: 9.4px !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

/* Markers workspace v1.3 */
.markers-view-tabs{grid-template-columns:repeat(3,minmax(0,1fr));}
.markers-view-tabs .marker-beat-tab.active-beat-tab{background:#8B5CF6;color:#fff;border-color:#9f7aea;}
.marker-boundary-grid{grid-template-columns:62px 76px 1fr 1fr;}
.marker-boundary-grid select,.marker-sync-box select,.marker-divide-box select,.marker-manage-selection-row select{min-width:0;background:#1c1c1c;color:#eee;border:1px solid #3a3a3a;border-radius:6px;padding:6px;font-size:10.5px;}
.marker-set-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}
.marker-sync-box{display:grid;grid-template-columns:minmax(74px,1.1fr) minmax(65px,1fr) minmax(80px,1.2fr) 86px;gap:5px;align-items:center;}
.marker-sync-box .marker-color-select,.marker-sync-box .btn{grid-column:auto;}
.marker-layer-sync-box{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:5px;align-items:center;}
.marker-divide-box{display:grid;grid-template-columns:minmax(78px,1fr) 42px minmax(80px,1.2fr) 58px;gap:5px;align-items:center;}
.marker-divide-box .marker-color-select,.marker-divide-box .btn{grid-column:auto;}
.marker-divide-box input{min-width:0;text-align:center;}
.beat-layer-info{font-size:10.5px;color:#d4c7ff;font-weight:700;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.beat-timeline-preview{position:relative;height:76px;margin-bottom:9px;border:1px solid #373248;border-radius:7px;background:linear-gradient(180deg,#15131c,#101014);overflow:hidden;}
.beat-preview-empty{height:100%;display:flex;align-items:center;justify-content:center;color:#777;font-size:10px;text-align:center;padding:6px;}
.beat-preview-track{position:absolute;left:8px;right:8px;top:20px;height:34px;border-radius:5px;background:#24212e;border:1px solid #3d3850;}
.beat-preview-label{position:absolute;left:8px;right:8px;top:4px;color:#aaa;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.beat-preview-marker{position:absolute;top:0;bottom:0;width:2px;background:#f3c247;box-shadow:0 0 4px rgba(243,194,71,.7);}
.beat-preview-marker::before{content:'';position:absolute;left:-3px;top:-1px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #f3c247;}
.marker-manage-filter-row{grid-template-columns:auto minmax(0,1fr);display:grid;gap:5px;}
.marker-manage-filter-row input{min-width:0;background:#1c1c1c;color:#eee;border:1px solid #3a3a3a;border-radius:6px;padding:6px 8px;font-size:10.5px;}
.marker-manage-selection-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:6px;align-items:stretch;}
.marker-manage-selection-row #markerManageSelectAllBtn{grid-column:1;grid-row:1;}
.marker-manage-selection-row #markerManageClearSelectionBtn{grid-column:2;grid-row:1;}
.marker-label-palette{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(17,minmax(8px,1fr));gap:3px;min-width:0;padding:4px;background:#181818;border:1px solid #3a3a3a;border-radius:6px;}
.marker-label-swatch{display:block;min-width:0;height:15px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:3px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);}
.marker-label-swatch:hover{border-color:#fff;transform:scale(1.08);}
.marker-label-swatch.active{outline:2px solid #fff;outline-offset:1px;z-index:1;}
.marker-mini-label-palette{display:flex;gap:3px;min-width:0;overflow-x:auto;overflow-y:hidden;padding:4px;background:#181818;border:1px solid #3a3a3a;border-radius:6px;scrollbar-width:thin;}
.marker-mini-label-palette .marker-label-swatch{height:16px;min-width:13px;flex:0 0 13px;}
.marker-mini-label-palette .marker-label-all{min-width:24px;flex-basis:24px;}
.marker-color-select{min-width:0;height:31px;box-sizing:border-box;border:1px solid #3a3a3a;border-radius:6px;padding:0 5px;color:#fff;font-size:10px;cursor:pointer;}
.marker-color-choice-all{background:#242424;}.marker-color-choice-0{background:#686868;}.marker-color-choice-1{background:#b84444;}.marker-color-choice-2{background:#b87531;}.marker-color-choice-3{background:#ad971f;color:#111;}.marker-color-choice-4{background:#4f9238;}.marker-color-choice-5{background:#28795b;}.marker-color-choice-6{background:#25828a;}.marker-color-choice-7{background:#3d71b5;}.marker-color-choice-8{background:#5149bb;}.marker-color-choice-9{background:#7844b2;}.marker-color-choice-10{background:#ae459f;}.marker-color-choice-11{background:#b94870;}.marker-color-choice-12{background:#956344;}.marker-color-choice-13{background:#6f7d45;}.marker-color-choice-14{background:#397561;}.marker-color-choice-15{background:#466b84;}.marker-color-choice-16{background:#675474;}
.marker-sync-box .btn,.marker-layer-sync-box .btn,.marker-divide-box .btn{height:31px;box-sizing:border-box;white-space:nowrap;}
.marker-label-all{color:#ddd;background:#282828;font-size:8px;line-height:14px;overflow:hidden;text-align:center;}
.beat-color-row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:6px;align-items:center;margin:5px 0 7px;}
.marker-manage-row{grid-template-columns:18px 64px minmax(0,1fr) 62px!important;gap:5px!important;padding:6px!important;margin-bottom:4px!important;min-height:0!important;}
.marker-manage-check{width:14px;height:14px;accent-color:#8B5CF6;margin:0;}
.marker-manage-row.marker-manage-selected{border-color:#8B5CF6;background:#302942;}
.marker-manage-primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:3px;min-width:0;}
.marker-manage-primary-actions .btn{width:100%;min-width:0!important;padding:4px 0!important;}
.marker-manage-shift-actions{grid-column:1/-1!important;display:grid!important;grid-template-columns:32px 32px minmax(0,1fr) minmax(0,1fr)!important;gap:4px!important;margin-top:0!important;}
.marker-manage-shift-actions .btn{min-height:24px!important;padding:3px 4px!important;white-space:nowrap!important;font-size:9.5px!important;}
.marker-label-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;background:#8B5CF6;}
.marker-label-0{background:#9b9b9b}.marker-label-1{background:#e65b5b}.marker-label-2{background:#e99a4a}.marker-label-3{background:#e7cc4d}.marker-label-4{background:#78c85a}.marker-label-5{background:#43b98c}.marker-label-6{background:#47bfc7}.marker-label-7{background:#5f9bea}.marker-label-8{background:#776ee8}.marker-label-9{background:#a26de5}.marker-label-10{background:#d264c9}.marker-label-11{background:#e66d98}.marker-label-12{background:#c88b67}.marker-label-13{background:#91a36a}.marker-label-14{background:#5fa18e}.marker-label-15{background:#668da6}.marker-label-16{background:#8a75a6}
.marker-tools-secondary-panel{margin-top:12px;}

@media (max-width:420px){
  .marker-sync-box{grid-template-columns:minmax(66px,1fr) minmax(58px,1fr) minmax(65px,1fr) 72px;gap:4px;}
  .marker-layer-sync-box{grid-template-columns:minmax(0,1fr) 96px;gap:4px;}
  .marker-divide-box{grid-template-columns:minmax(68px,1fr) 36px minmax(65px,1fr) 52px;gap:4px;}
  .marker-sync-box select,.marker-divide-box select{padding-left:4px;padding-right:4px;font-size:9.5px;}
  .marker-sync-box .btn,.marker-layer-sync-box .btn,.marker-divide-box .btn{padding-left:3px;padding-right:3px;font-size:9.5px;}
}


/* ── Text Replace ── */
.textreplace-body{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 92px);overflow-y:auto;padding-right:4px;}
.textreplace-top-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:center;}
.textreplace-top-actions .btn{min-height:28px;padding:5px 8px;}
.textreplace-section-title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#b9b9b9;margin-top:4px;}
.textreplace-current-fonts{display:flex;flex-direction:column;gap:6px;min-height:60px;max-height:128px;overflow-y:auto;border:1px solid #2f2f2f;border-radius:10px;padding:8px;background:#202020;}
.textreplace-font-row{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;padding:7px 8px;border:1px solid #353535;border-radius:8px;background:#272727;}
.textreplace-font-row:hover{background:#303030;}
.textreplace-font-row.missing{border-color:#a3521f;background:#3a2417;}
.textreplace-font-row.missing .textreplace-font-name{color:#ffb47a;}
.textreplace-apply-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.textseparate-modal{width:min(320px,92vw);background:#232323;border:1px solid #3a3a3a;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 40px rgba(0,0,0,.5);}
.textseparate-title{font-size:15px;font-weight:700;color:#fff;}
.textseparate-sub{font-size:11.5px;color:#9a9a9a;line-height:1.4;}
.textseparate-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px;}
.textseparate-opt{padding:12px 8px;font-size:13px;font-weight:600;background:#2b2540;border:1px solid #8B5CF6;color:#fff;border-radius:9px;cursor:pointer;transition:background .12s ease;}
.textseparate-opt:hover{background:#3a2f5c;}
.textseparate-cancel{align-self:flex-end;margin-top:2px;}
.textreplace-font-row input{width:15px;height:15px;margin:0;}
.textreplace-font-name{font-size:12px;line-height:1.25;color:#f0f0f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.textreplace-font-ps{display:block;font-size:10px;color:#9c9c9c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;}
.textreplace-font-count{font-size:10px;color:#cfcfcf;border:1px solid #444;border-radius:999px;padding:2px 6px;background:#1f1f1f;white-space:nowrap;}
.textreplace-replace-box{display:grid;grid-template-columns:1fr;gap:8px;}
.textreplace-replace-box input,.textreplace-replace-box select{width:100%;box-sizing:border-box;background:#1d1d1d;color:#eee;border:1px solid #3a3a3a;border-radius:8px;padding:7px 8px;font-size:12px;}
.textreplace-replace-box select{min-height:31px;}
.textreplace-note{font-size:11px;line-height:1.35;color:#a9a9a9;border:1px solid #323232;border-radius:8px;padding:8px;background:#232323;}
.textreplace-empty{font-size:12px;color:#aaa;text-align:center;padding:14px 8px;border:1px dashed #3b3b3b;border-radius:8px;background:#242424;}
.textreplace-font-list{display:flex;flex-direction:column;gap:5px;min-height:120px;max-height:190px;overflow-y:auto;border:1px solid #2f2f2f;border-radius:10px;padding:7px;background:#202020;}
/* Font lists fill the panel/window; the two apply controls stay below the
   scrolling list instead of following its old 190px height cap. */
.app.side-ui > .textreplace-accordion.side-active > .textreplace-body,
#utFloatingContent.ut-section-window > .textreplace-accordion > .textreplace-body {
  display:flex!important;flex-direction:column;min-height:0;max-height:none;
}
.app.side-ui > .textreplace-accordion.side-active .textreplace-body > *,
#utFloatingContent.ut-section-window > .textreplace-accordion .textreplace-body > * {flex-shrink:0;}
.app.side-ui > .textreplace-accordion.side-active .textreplace-replace-box,
#utFloatingContent.ut-section-window > .textreplace-accordion .textreplace-replace-box {
  display:flex;flex-direction:column;flex:1 1 0;min-height:200px;min-width:0;
}
.app.side-ui > .textreplace-accordion.side-active .textreplace-replace-box > *,
#utFloatingContent.ut-section-window > .textreplace-accordion .textreplace-replace-box > * {flex-shrink:0;}
.app.side-ui > .textreplace-accordion.side-active .textreplace-font-list,
#utFloatingContent.ut-section-window > .textreplace-accordion .textreplace-font-list {
  flex:1 1 0;min-height:60px;max-height:none;height:auto;box-sizing:border-box;overflow:auto;overflow-anchor:none;
}
.app.side-ui > .textreplace-accordion.side-active .textreplace-font-list > *,
#utFloatingContent.ut-section-window > .textreplace-accordion .textreplace-font-list > * {flex-shrink:0;}
.app.side-ui > .textreplace-accordion.side-active .textreplace-apply-row,
#utFloatingContent.ut-section-window > .textreplace-accordion .textreplace-apply-row {margin-top:auto;}
.textreplace-tabs{display:flex;gap:5px;flex-wrap:wrap;}
.textreplace-tabs .textreplace-tab{flex:1 1 auto;min-width:0;padding:5px 6px;font-size:11px;}
.textreplace-tabs .textreplace-tab.active{background:#8B5CF6;border-color:#8B5CF6;color:#fff;}
.textreplace-font-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid #353535;border-radius:8px;background:#262626;cursor:pointer;transition:border-color .1s ease,background .1s ease;}
.textreplace-font-item:hover{background:#2f2f2f;border-color:#4b4b4b;}
.textreplace-font-item.selected{border-color:#8B5CF6;background:#2b2540;box-shadow:inset 0 0 0 1px #8B5CF6;}
.textreplace-font-item .trf-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.textreplace-font-item .trf-preview{font-size:19px;line-height:1.25;color:#f4f4f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.textreplace-font-item .trf-name{font-size:10.5px;color:#9a9a9a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.textreplace-font-item.selected .trf-name{color:#c9bcf5;}
.textreplace-font-item .trf-star{flex:0 0 auto;width:26px;height:26px;padding:0;border:none;background:transparent;color:#7a7a7a;font-size:16px;line-height:1;cursor:pointer;border-radius:6px;transition:color .1s ease,background .1s ease;}
.textreplace-font-item .trf-star:hover{background:#3a3a3a;color:#e0d24a;}
.textreplace-font-item .trf-star.on{color:#f2c94c;}
.textreplace-group-toggle{display:flex;align-items:center;gap:6px;font-size:11px;color:#bdbdbd;cursor:pointer;user-select:none;}
.textreplace-group-toggle input{width:14px;height:14px;margin:0;accent-color:#8B5CF6;}
.textreplace-family-header{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid #353535;border-radius:8px;background:#242430;cursor:pointer;transition:border-color .1s ease,background .1s ease;}
.textreplace-family-header:hover{background:#2c2c3a;border-color:#4b4b5e;}
.textreplace-family-header.expanded{border-color:#8B5CF6;background:#282438;}
.textreplace-family-header .trf-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.textreplace-family-header .trf-preview{font-size:18px;line-height:1.25;color:#f4f4f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.textreplace-family-header .trf-name{font-size:10.5px;color:#9a9a9a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.textreplace-family-header .trf-chevron{flex:0 0 auto;color:#9a8fd6;font-size:12px;width:18px;text-align:center;}
.textreplace-family-styles{display:flex;flex-direction:column;gap:4px;margin:4px 0 2px 12px;padding-left:8px;border-left:2px solid #3a3550;}
.textreplace-font-item.trf-child .trf-preview{font-size:16px;}


/* v1.0.46 Markers: compact selected-layer marker shift controls */
.marker-manage-shift-head {
  grid-template-columns: 58px max-content minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: center !important;
}
.marker-manage-shift-title { display: none !important; }
.marker-manage-shift-head input[type="number"] {
  width: 58px !important;
  max-width: 58px !important;
  min-width: 58px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  box-sizing: border-box !important;
}
.marker-manage-layer-shift-actions {
  display: grid !important;
  grid-template-columns: 36px 36px 56px 56px !important;
  gap: 5px !important;
  min-width: 0 !important;
  width: max-content !important;
}
.marker-manage-layer-shift-actions .btn {
  min-width: 0 !important;
  width: auto !important;
  min-height: 27px !important;
  padding: 3px 5px !important;
  font-size: 9.2px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
}
.marker-manage-layer-shift-actions .btn:nth-child(1),
.marker-manage-layer-shift-actions .btn:nth-child(2) {
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 3px 0 !important;
}
@media (max-width: 520px) {
  .marker-manage-shift-head { grid-template-columns: 54px minmax(0, 1fr) !important; }
  .marker-manage-layer-shift-actions { grid-template-columns: 32px 32px minmax(48px, 1fr) minmax(48px, 1fr) !important; width: 100% !important; }
  .marker-manage-highlight-toggle { grid-column: 1 / -1 !important; justify-content: flex-start !important; }
}


/* v1.0.64: split Align center cell into Center X / Center / Center Y. */
.align-center-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}
.align-position-grid .align-center-split .btn {
  min-width: 0;
  width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 6px 2px;
  font-size: 10px;
  line-height: 1.05;
}
.align-position-grid .align-center-split .btn[data-align="mc"] {
  font-size: 10.5px;
}


/* v1.0.67 — Quick Action compact controls */
.quickaction-grid .dash-inline,
.quickaction-grid .extend-row {
  grid-column: auto !important;
}
.quickaction-grid .dash-inline.action-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 30px !important;
  gap: 4px !important;
  min-width: 0;
}
.quickaction-grid .extend-row.action-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 46px !important;
  gap: 4px !important;
  margin: 0 !important;
  min-width: 0;
}
.quickaction-grid .dash-inline .btn,
.quickaction-grid .extend-row .btn {
  min-width: 0;
  padding: 8px 4px;
  font-size: 11px;
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quickaction-grid .dash-inline #dashSettingsBtn {
  padding-left: 0;
  padding-right: 0;
  font-size: 12px;
}
.quickaction-grid .extend-row #qaExtendCount {
  width: 100%;
  max-width: none !important;
  min-width: 0;
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
}

.hidden{display:none !important;}


/* ===== Preset preview (mirrors comp-preview) ===== */
.preset-preview { height:150px; min-height:150px; max-height:150px; border:1px solid #3d3d3d; border-radius:10px; background:#141414; margin-top:7px; overflow:hidden; display:flex; flex-direction:column; position:relative; box-sizing:border-box; }
.preset-preview.empty { color:#858585; font-size:11px; font-weight:700; align-items:center; justify-content:center; text-align:center; padding:8px; }
.preset-preview.empty .preset-preview-stage { display:none; }
.preset-preview .preset-preview-placeholder { color:#858585; font-size:11px; font-weight:700; text-align:center; padding:8px; }
.preset-preview.active .preset-preview-placeholder { display:none; }
.preset-preview-title { color:#fff; font-size:10.5px; font-weight:900; padding:5px 8px; background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0)); position:absolute; left:0; right:0; top:0; z-index:3; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; pointer-events:none; }
.preset-preview-stage { flex:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#101010; overflow:hidden; }
.preset-preview-media { width:100%; height:100%; max-height:100%; object-fit:contain; display:block; background:#101010; }
.preset-info-card { color:#d8d8d8; font-size:11px; font-weight:700; line-height:1.5; padding:10px 12px; width:100%; box-sizing:border-box; text-align:start; unicode-bidi:plaintext; }
.preset-info-line { margin:2px 0; overflow:hidden; text-overflow:ellipsis; }
.preset-preview-btn { border:0; background:transparent; color:#9aa0a6; cursor:pointer; font-size:11px; padding:0 4px; }
.preset-preview-btn:hover { color:#4b79ff; }
.preset-genpreview { display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; color:#c8c8c8; margin-top:4px; }
.preset-genpreview input { accent-color:#4b79ff; }

.preset-preview.collapsed { display:none !important; }
.preset-preview.collapsed + .comp-preview-resize-handle { display:none !important; }

/* preset groups */
.preset-group-select { max-width:96px; font-size:9.5px; border-radius:6px; background:#2a2a2a; color:#d8d8d8; border:1px solid #3d3d3d; padding:1px 3px; margin-left:4px; }
.preset-user-group-head { display:flex; align-items:center; gap:4px; }
.preset-user-group-title { flex:1; text-align:start; cursor:pointer; background:transparent; border:0; color:inherit; font:inherit; }
.preset-mini-btn { border:0; background:transparent; color:#9aa0a6; cursor:pointer; font-size:11px; font-weight:900; padding:0 5px; border-radius:6px; }
.preset-mini-btn:hover { color:#fff; background:#333; }
.preset-mini-btn.danger:hover { color:#fff; background:#a23; }
.preset-group-user { margin-top:4px; }

/* precompose name field (button | name) + un-precompose full row */
.precompose-pair .qa-precompose-name { width:100%; min-width:0; box-sizing:border-box; align-self:stretch; border-radius:8px; border:1px solid #3d3d3d; background:#2a2a2a; color:#eee; padding:0 8px; font-size:11px; }
.precompose-pair .qa-precompose-name::placeholder { color:#8d8d8d; }
.precompose-pair .precompose-unprecompose { grid-column:span 2; width:100%; box-sizing:border-box; }


/* preset row: single inline row */
.preset-list .preset-row { display:flex !important; align-items:center; gap:4px; }
.preset-list .preset-row .preset-button { flex:1 1 auto; min-width:0; }
.preset-list .preset-row .preset-preview-btn { flex:0 0 auto; width:22px; padding:0; }
.preset-list .preset-row .preset-favorite { flex:0 0 auto; width:28px; }
.preset-list .preset-row .preset-delete { flex:0 0 auto; width:28px; padding:8px 0; }
.preset-list .preset-row .preset-group-select { flex:0 0 auto; max-width:84px; margin-left:0; }
.preset-group-actions { display:flex; align-items:center; gap:2px; }

/* themed scrollbar for presets list */
.preset-list::-webkit-scrollbar { width:10px; }
.preset-list::-webkit-scrollbar-track { background:#151515; border-radius:8px; }
.preset-list::-webkit-scrollbar-thumb { background:#555; border-radius:8px; border:2px solid #151515; }
.preset-list::-webkit-scrollbar-thumb:hover { background:#777; }


/* preset thumb view (mirrors comp thumb cards) */
.preset-list { --preset-card-size:104px; }
.preset-list.preset-view-list .preset-group-body { display:block; }
.preset-list.preset-view-thumb .preset-group-body { display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--preset-card-size,104px),1fr)); gap:7px; padding:5px 3px; }
.preset-card { position:relative; display:block; min-width:0; }
.preset-thumb-wrap { position:relative; display:block; width:100%; aspect-ratio:1/1; border:0; border-radius:9px; overflow:hidden; background:#101010; cursor:pointer; padding:0; }
.preset-thumb { width:100%; height:100%; object-fit:contain; display:block; }
.preset-thumb-empty { width:100%; height:100%; background:repeating-linear-gradient(45deg,#1d1d1d,#1d1d1d 8px,#222 8px,#222 16px); }
.preset-card-title { position:absolute; left:0; right:0; bottom:0; padding:5px 6px; background:rgba(0,0,0,.72); color:#fff; font-size:10.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:start; unicode-bidi:plaintext; }
.preset-card.has-preview:hover .preset-thumb-wrap { outline:1px solid #4b79ff; }
/* Card action buttons: a hover-revealed top bar, ordered like the list view. */
.preset-card-actions { position:absolute; top:5px; left:5px; right:5px; z-index:3; display:flex; gap:3px; justify-content:space-between; opacity:0; transition:opacity .12s ease; pointer-events:none; }
.preset-card:hover .preset-card-actions { opacity:1; pointer-events:auto; }
.preset-card-actions button { flex:1 1 0; min-width:0; max-width:24px; height:22px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:6px; background:rgba(28,28,28,.94); color:#fff; cursor:pointer; padding:0; font-size:12px; line-height:1; opacity:1; overflow:hidden; }
.preset-card-actions button svg { display:block; width:12px; height:12px; }
.preset-card-preview-btn:hover { background:#4b79ff; }
.preset-card-fav { color:#caa53a; }
.preset-card-fav.active { color:#ffd36a; background:rgba(91,69,22,.94); }
.preset-card-fav:hover { background:#5b4516; color:#ffd36a; }
.preset-card-del:hover { background:#b33838; }


/* preset row group button + action menu + thumb grp + reveal */
.preset-row .preset-group-btn { flex:0 0 auto; width:26px; height:24px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid #3a3a3a; border-radius:6px; background:#2a2a2a; color:#cfcfcf; cursor:pointer; }
.preset-row .preset-group-btn:hover { background:#343434; color:#fff; }
.preset-group-btn svg { display:block; }
.preset-card-grp:hover { background:#4b79ff; }
.preset-action-menu { position:fixed; z-index:9999; min-width:152px; max-width:230px; background:#252525; border:1px solid #4a4a4a; border-radius:9px; padding:5px; box-shadow:0 8px 20px rgba(0,0,0,.35); }
.preset-action-menu .pam-head { font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:#8a8a8a; padding:3px 7px 5px; }
.preset-action-menu .pam-item { display:flex; align-items:center; gap:6px; width:100%; text-align:start; background:transparent; border:0; border-radius:6px; padding:6px 7px; color:#e0e0e0; font-size:12px; cursor:pointer; }
.preset-action-menu .pam-item:hover { background:#3a3a3a; }
.preset-action-menu .pam-item.active { color:#8db0ff; }
.preset-action-menu .pam-check { width:12px; flex:0 0 12px; color:#6db1ff; font-size:11px; text-align:center; }
.preset-action-menu .pam-label { flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; unicode-bidi:plaintext; }
.preset-action-menu .pam-sep { height:1px; background:#3a3a3a; margin:4px 2px; }
.preset-action-menu .pam-gen .pam-check { color:#6dd18a; }

/* ── Create options (checkboxes above the Create grid) ───────────────── */
.create-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  padding: 7px 8px;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: var(--panel-2, rgba(255,255,255,0.03));
}
.create-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.create-options label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  flex: 1 1 calc(50% - 12px);
  min-width: 120px;
}
.create-options input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
/* Above/Under-# row: two 50% columns aligned like every other options row; each group
   (checkbox + word + number box + #) stays tight inside its own column. */
.create-options-row.create-options-atlayer { align-items: center; gap: 4px 12px; }
.create-options-row.create-options-atlayer .atlayer-group { display: inline-flex; align-items: center; gap: 5px; flex: 1 1 calc(50% - 12px); min-width: 120px; white-space: nowrap; }
.create-options-row.create-options-atlayer label { flex: 0 0 auto; min-width: 0; }
.create-options-row.create-blend-option-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  gap: 4px 12px;
  padding-top: 1px;
}
.create-options-row.create-blend-option-row label { min-width: 0; flex: 0 0 auto; }
.create-blend-dropdown { position: relative; grid-column: 2; justify-self: stretch; width: 100%; min-width: 0; max-width: none; }
.create-blend-menu-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 23px;
  min-height: 23px;
  padding: 2px 7px;
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 4px;
  background: var(--input-bg, #242424);
  color: var(--text, #ddd);
  font: inherit;
  font-size: 11px;
  line-height: 17px;
  text-align: left;
  cursor: pointer;
}
.create-blend-menu-btn:hover,
.create-blend-menu-btn[aria-expanded="true"] { border-color: #555; background: #2b2b2b; }
.create-blend-chevron { flex: 0 0 auto; margin-left: 8px; color: #999; font-size: 9px; }
.create-blend-select-native { display: none; }
.create-blend-menu {
  position: absolute;
  z-index: 2200;
  left: 0;
  bottom: calc(100% + 3px);
  width: 188px;
  max-height: 238px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #444;
  border-radius: 5px;
  background: var(--panel, #202020);
  box-shadow: 0 7px 20px rgba(0,0,0,.45);
}
.create-blend-menu.hidden { display: none; }
.create-blend-menu-section { padding: 3px 5px 2px; color: #858585; font-size: 9px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; }
.create-blend-menu-section.all { margin-top: 3px; padding-top: 5px; border-top: 1px solid #363636; }
.create-blend-menu-row { display: flex; align-items: center; height: 23px; border-radius: 3px; }
.create-blend-menu-row:hover { background: #303030; }
.create-blend-menu-row.active { background: #344d73; }
.create-blend-option {
  flex: 1 1 auto;
  min-width: 0;
  height: 23px;
  padding: 2px 5px;
  border: 0;
  background: transparent;
  color: #ddd;
  font: inherit;
  font-size: 10.5px;
  line-height: 17px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.create-blend-menu-row.active .create-blend-option { color: #fff; font-weight: 700; }
.create-blend-option-pin {
  flex: 0 0 23px;
  width: 23px;
  height: 21px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #777;
  font-size: 11px;
  line-height: 21px;
  cursor: pointer;
  opacity: .7;
}
.create-blend-option-pin:hover { color: #ddd; background: #3b3b3b; opacity: 1; }
.create-blend-option-pin.active { color: #8eb8ff; opacity: 1; }

/* ── Fit-to-comp split (Width | Height) ─────────────────────────────── */
.fit-split.action-item { grid-column: span 2; display: flex; gap: 6px; margin: 0; padding: 0; border: 0; background: transparent; }
.fit-split .btn { flex: 1; min-width: 0; }

/* ── Align: "to target" inline toggle + Text Align row ──────────────── */
.aa-align-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aa-target-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0; color: #bbb; cursor: pointer; }
.aa-target-toggle input { margin: 0; cursor: pointer; }
.text-align-grid .btn { font-weight: 700; }

/* ── Save/Reveal equal halves + compact height ──────────────────────── */
.preset-save-actions { grid-template-columns: 1fr 1fr; }
.preset-save-actions .btn { padding-top: 5px; padding-bottom: 5px; }

/* ── Generate-preview button on preset rows/cards ───────────────────── */
.preset-card-gen:hover { background:#3a9d5a; }
.preset-row .preset-gen-btn { flex:0 0 auto; width:26px; height:24px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid #3a3a3a; border-radius:6px; background:#2a2a2a; color:#cfcfcf; cursor:pointer; }
.preset-row .preset-gen-btn:hover { background:#2f5e3f; color:#fff; }
.preset-gen-btn svg { display:block; }

/* ── Inline color editing (Ctrl+Click selects a swatch to edit) ─────── */
.color-swatch.colors-editing { outline: 2px solid #4b79ff; outline-offset: 1px; box-shadow: 0 0 0 2px rgba(75,121,255,.35); }
#colorsAddHexBtn.editing { background: #4b79ff; color: #fff; }

/* ── Preset thumbnail size slider (Thumb view only, under the search) ── */
.preset-size-control { display:flex; align-items:center; gap:8px; margin:0 0 7px; padding:2px 4px; }
.preset-size-control .preset-size-icon { color:#8a8a8a; font-size:12px; line-height:1; flex:0 0 auto; }
.preset-size-control input[type=range] { flex:1 1 auto; width:100%; min-width:0; accent-color:#4b79ff; }
.preset-marker-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 8px;}
.preset-marker-row .preset-marker-frames{flex:1 1 130px;min-width:110px;padding:6px 8px;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:6px;color:#eee;font-size:12px;text-align:center;}
.preset-marker-row .preset-marker-frames:focus{outline:none;border-color:#8B5CF6;}
.preset-marker-row > .btn{flex:1 1 auto;min-width:0;white-space:nowrap;padding-top:6px;padding-bottom:6px;}


/* ── Read-only gradient target (AE hides gradient colors from scripts) ── */
.colors-layer-target-row.readonly { opacity: .72; cursor: default; border-style: dashed; }
.colors-layer-target-row.readonly:hover { border-color: #3a3d47; background: #292b32; }
.colors-layer-target-lock { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; opacity: .85; }
.colors-layer-target-swatch.gradient { background: linear-gradient(135deg, #ff5f6d, #ffc371, #4b79ff); }
.colors-layer-target-row.readonly .colors-layer-target-hex { color: #8a93a6; font-style: italic; }

/* keep SVG sidebar icons a consistent size in collapsed / top / bottom layouts */
.section-sidebar.collapsed .section-side-icon .ut-svg-ic,
.section-sidebar.sidebar-pos-top .section-side-icon .ut-svg-ic,
.section-sidebar.sidebar-pos-bottom .section-side-icon .ut-svg-ic { width: 18px; height: 18px; }

/* moved Center-in-View button in Arrange & Align */
.aa-center-view{width:100%;}

/* ── Layer Tools: Distribute in space + Stagger in time ── */
.lt-distribute{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:9px;margin-bottom:6px;}
.lt-dist-hint{font-size:10.5px;color:#8a8a93;line-height:1.5;margin-bottom:8px;}
.lt-dist-row{margin-bottom:7px;}
.lt-dist-row:last-child{margin-bottom:0;}
.lt-dist-seg{display:flex;gap:4px;}
.lt-dist-seg .lt-seg-btn{flex:1;padding:6px 4px;font-size:11px;}
.lt-dist-seg .lt-seg-btn.active{background:#8B5CF6;border-color:#8B5CF6;color:#fff;}
.lt-dist-slider-row{display:flex;align-items:center;gap:8px;}
.lt-dist-slider{flex:1;accent-color:#8B5CF6;height:4px;cursor:pointer;}
.lt-dist-num{width:64px;background:#1e1e1e;border:1px solid #333;border-radius:6px;color:#eee;padding:5px 6px;font-size:12px;text-align:center;}
.lt-dist-unit{font-size:10.5px;color:#8a8a93;min-width:14px;}

/* ── Motion section ── */

/* ── Motion section: mode tabs + toggles ── */

/* preset per-row Update button */
.preset-update-btn{background:transparent;border:none;color:#8a8a93;font-size:15px;cursor:pointer;padding:2px 5px;border-radius:5px;line-height:1;}
.preset-update-btn:hover{color:#8B5CF6;background:rgba(139,92,246,.12);}
/* create text combo (input + Text button) */
.create-text-combo{display:flex;gap:5px;align-items:stretch;}
.create-text-input{flex:1;min-width:0;background:#1e1e1e;border:1px solid #333;border-radius:6px;color:#eee;padding:5px 8px;font-size:12px;}
.create-text-btn{flex:0 0 auto;}
.lt-grid.lt-1{grid-template-columns:1fr;}
#ltTopAboveSelectedBtn{margin-top:8px;}

.sc-modal-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto;}
.sc-modal{width:100%;max-width:380px;background:#1e1e1e;border:1px solid #4a4a4a;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.5);overflow:hidden;}
.sc-modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #333;font-weight:600;font-size:13px;color:#eee;background:#242424;}
.sc-modal-close{border:none;background:transparent;color:#aaa;font-size:14px;cursor:pointer;padding:2px 6px;border-radius:5px;}
.sc-modal-close:hover{background:#3a3a3a;color:#fff;}
.sc-modal-content{padding:12px;}

/* ── In-panel notifications / updates ─────────────────────────────── */
.top-menu { align-items:center !important; gap:6px !important; }
.notifications-btn { position:relative; flex:0 0 30px; width:30px; height:26px; padding:0; border:0; border-radius:7px; background:#333; color:#fff; cursor:pointer; font-size:14px; line-height:1; }
.notifications-btn:hover,.notifications-btn.active { background:#444; }
.notifications-bell { display:block; transform:translateY(1px); }
.notifications-badge { position:absolute; top:-5px; right:-5px; z-index:2; min-width:14px; height:14px; padding:0 3px; border:2px solid #1e1e1e; border-radius:9px; background:#d84d4d; color:#fff; font-size:8px; font-weight:800; line-height:10px; text-align:center; }
.notification-banner { display:flex; align-items:center; gap:8px; margin:-2px 0 8px; padding:8px; border:1px solid #6a5320; border-radius:8px; background:#24200f; color:#f5e4ad; }
.notification-banner.hidden { display:none !important; }
.notification-banner-copy { min-width:0; flex:1 1 auto; }
.notification-banner-title { color:#ffe299; font-size:11px; font-weight:800; line-height:1.25; }
.notification-banner-body { margin-top:2px; color:#d9c99a; font-size:10.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notification-banner-actions { display:flex; flex:0 0 auto; align-items:center; gap:5px; }
.notification-banner-close { width:20px; height:22px; padding:0; border:0; border-radius:5px; background:transparent; color:#ccb86e; cursor:pointer; font-size:17px; line-height:18px; }
.notification-banner-close:hover { background:rgba(255,255,255,.09); color:#fff; }
.notifications-overlay { z-index:100002; }
.notifications-modal { max-width:430px; padding:0; overflow:hidden; }
.notifications-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:12px 12px 10px; border-bottom:1px solid #3b3b3b; background:#282828; }
.notifications-modal h2 { margin:0; font-size:16px; }
.notifications-subhead { margin-top:3px; color:#a0a0a0; font-size:10.5px; line-height:1.35; }
.notifications-list { max-height:54vh; overflow-y:auto; padding:8px; }
.notifications-empty { padding:18px 10px; color:#9a9a9a; text-align:center; font-size:11.5px; line-height:1.5; }
.notification-card { position:relative; padding:9px; border:1px solid #3b3b3b; border-radius:8px; background:#202020; margin-bottom:7px; }
.notification-card:last-child { margin-bottom:0; }
.notification-card.unread { border-color:#5f70a4; background:#222633; }
.notification-card-head { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.notification-type { flex:0 0 auto; padding:2px 5px; border-radius:4px; background:#343434; color:#d5d5d5; font-size:9px; font-weight:800; letter-spacing:.25px; text-transform:uppercase; }
.notification-type.update { background:#254c8a; color:#dceaff; }
.notification-type.new-tool { background:#315d43; color:#d9f5e1; }
.notification-type.important { background:#74452a; color:#ffe1c8; }
.notification-date { min-width:0; flex:1 1 auto; color:#858585; font-size:9.5px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notification-card-title { color:#f1f1f1; font-size:12px; font-weight:800; line-height:1.35; }
.notification-card-body { margin-top:3px; color:#b9b9b9; font-size:10.5px; line-height:1.4; white-space:pre-wrap; }
.notification-card-actions { display:flex; justify-content:flex-end; margin-top:8px; }
.notifications-footer { margin:0; padding:9px 12px; border-top:1px solid #3b3b3b; background:#282828; }

/* ── Create: text entry, post-create effects, and option presets ─── */
.create-text-combo{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:5px;align-items:stretch;}
textarea.create-text-input{width:100%;min-width:0;min-height:34px;max-height:92px;resize:vertical;font-family:Arial,Helvetica,sans-serif;line-height:1.35;overflow:auto;}
.create-text-btn{min-width:0;}
.create-effects-option-row{align-items:center;}
.create-effects-picker-btn{margin-left:auto;white-space:nowrap;}
.create-effects-picker-btn span{display:inline-block;min-width:15px;margin-left:4px;padding:1px 4px;border-radius:8px;background:#242424;color:#cfcfcf;font-size:9px;text-align:center;}
.create-effects-picker{margin:2px 0 7px;padding:7px;border:1px solid #3b3b3b;border-radius:8px;background:#1e1e1e;}
.create-effects-picker input{width:100%;padding:6px 7px;font-size:11px;}
.create-effects-selected{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;}
.create-effects-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 5px;border:1px solid #47506c;border-radius:5px;background:#282d3d;color:#dce6ff;font-size:9.5px;}
.create-effects-chip span{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.create-effects-chip button{width:14px;height:14px;padding:0;border:0;border-radius:3px;background:transparent;color:#c6d3f4;cursor:pointer;font-size:13px;line-height:12px;}
.create-effects-chip button:hover{background:#4b5978;color:#fff;}
.create-effects-list{max-height:180px;margin-top:6px;overflow:auto;border:1px solid #343434;border-radius:6px;background:#171717;}
.create-effects-row{display:flex;align-items:center;gap:6px;padding:5px 6px;border-bottom:1px solid #292929;cursor:pointer;font-size:10.5px;}
.create-effects-row:last-child{border-bottom:0;}
.create-effects-row:hover{background:#292d38;}
.create-effects-row input{width:auto;flex:0 0 auto;margin:0;}
.create-effects-kind{flex:0 0 auto;min-width:36px;padding:2px 4px;border-radius:4px;background:#353535;color:#c8c8c8;font-size:8px;font-weight:800;text-align:center;text-transform:uppercase;}
.create-effects-kind.preset{background:#315b43;color:#d9f5e1;}
.create-effects-name{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e4e4e4;}
.create-effects-category{max-width:92px;color:#898989;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.create-effects-empty{padding:10px;color:#8d8d8d;font-size:10.5px;text-align:center;line-height:1.35;}
.create-preset-pin{flex:0 0 auto;padding-left:7px!important;padding-right:7px!important;}
.create-pinned-presets{display:flex;gap:5px;flex-wrap:wrap;margin:-2px 0 8px;}
.create-pinned-preset{display:inline-flex;align-items:center;max-width:100%;border:1px solid #4c587d;border-radius:6px;background:#292e3e;overflow:hidden;}
.create-pinned-preset-apply{max-width:170px;border:0;background:transparent;color:#e2e9ff;cursor:pointer;padding:5px 6px;font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.create-pinned-preset-apply:hover{background:#3c4766;}
.create-pinned-preset-remove{width:21px;border:0;border-left:1px solid #4c587d;background:transparent;color:#b9c3e6;cursor:pointer;padding:4px 0;font-size:13px;line-height:14px;}
.create-pinned-preset-remove:hover{background:#6a3131;color:#fff;}

/* Create options: preserve the preset actions on one compact row. Inputs
   yield their spare width first, while Save / Delete / Clear stay visible. */
#createOptionsBody .create-options-presets{display:flex;flex-wrap:nowrap;gap:5px;width:100%;min-width:0;}
#createOptionsBody .create-options-presets .create-preset-select{flex:1 1 52px;min-width:52px;max-width:none;}
#createOptionsBody .create-options-presets .create-preset-name{flex:1 1 52px;min-width:52px;}
#createOptionsBody .create-options-presets .create-preset-pin{flex:0 0 27px;width:27px;padding-left:0!important;padding-right:0!important;}
#createOptionsBody .create-options-presets .btn.small{flex:0 0 auto;padding:6px 5px;font-size:10px;line-height:1.1;white-space:nowrap;}

/* Effects picker: use the empty right-hand option cell next to its checkbox.
   The grid preserves this placement at every panel width. */
.create-effects-option-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:4px 12px;}
.create-effects-option-row label{min-width:0;flex:0 0 auto;}
.create-effects-picker-btn{width:100%;min-width:0;margin-left:0;justify-self:stretch;overflow:hidden;text-overflow:ellipsis;}

/* ── Property Editor ─────────────────────────────────────────────── */
/* Keep the top controls and bottom actions outside the scrolling properties.
   Override the general section-body scrollbar only for Property Editor. */
.app.side-ui > .accordion[data-section="propertyeditor"].side-active > .accordion-body{
  overflow:hidden!important;
  scrollbar-gutter:auto!important;
}
.pe-fixed-controls,.pe-fixed-footer{flex:0 0 auto;min-width:0;}
.pe-scroll-content{min-width:0;}
.app.side-ui > .accordion[data-section="propertyeditor"].side-active > .accordion-body > .pe-scroll-content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.pe-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:center;margin-bottom:6px;}
.pe-select,.pe-search,.pe-value-input,.pe-color-hex{box-sizing:border-box;width:100%;min-width:0;border:1px solid #444;border-radius:5px;background:#1b1b1b;color:#eee;outline:none;}
.pe-select,.pe-search{height:29px;padding:5px 7px;font-size:10.5px;}
.pe-search{margin-bottom:6px;}
.pe-select:focus,.pe-search:focus,.pe-value-input:focus,.pe-color-hex:focus{border-color:#7188c9;box-shadow:0 0 0 1px rgba(113,136,201,.22);}
.pe-layer-info{margin-bottom:6px;padding:6px 7px;border:1px solid #3a3a3a;border-radius:6px;background:#222;color:#bdbdbd;font-size:10px;line-height:1.35;overflow-wrap:anywhere;}
.pe-layer-info strong{color:#f0f0f0;}
.pe-list{display:flex;flex-direction:column;gap:5px;}
.pe-empty{padding:14px 8px;border:1px dashed #414141;border-radius:7px;color:#8e8e8e;font-size:10.5px;line-height:1.45;text-align:center;}
.pe-empty.hidden{display:none;}
.pe-group{overflow:hidden;border:1px solid #3a3a3a;border-radius:7px;background:#202020;}
.pe-group-head{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;border:0;background:#292929;color:#e3e3e3;cursor:pointer;font-size:10.5px;font-weight:800;text-align:left;}
.pe-group-head:hover{background:#313131;}
.pe-group-count{margin-left:auto;color:#8f8f8f;font-size:9px;font-weight:700;}
.pe-group-arrow{color:#909090;transition:transform .12s ease;}
.pe-group.closed .pe-group-arrow{transform:rotate(-90deg);}
.pe-group.closed .pe-group-body{display:none;}
.pe-row{padding:7px 8px;border-top:1px solid #303030;}
.pe-row:first-child{border-top:0;}
.pe-row.hidden{display:none;}
.pe-row.dirty{background:rgba(77,100,164,.13);}
.pe-row-head{display:flex;align-items:center;gap:5px;min-width:0;}
.pe-row-name{min-width:0;flex:1;color:#e5e5e5;font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pe-badge{flex:0 0 auto;padding:1px 4px;border-radius:4px;background:#383838;color:#aaa;font-size:8px;font-weight:800;line-height:14px;}
.pe-badge.keys{background:#344b68;color:#cfe5ff;}
.pe-badge.selected{background:#46623e;color:#d9f3d2;}
.pe-badge.expression{background:#614c2d;color:#ffe2a8;}
.pe-badge.mixed{background:#3c4660;color:#d4def7;}
.pe-value-input::placeholder,.pe-color-hex::placeholder{color:#9ba6bc;font-style:italic;}
.pe-path{margin-top:2px;color:#777;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pe-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:5px;margin-top:6px;}
.pe-value-field{min-width:0;}
.pe-value-field:not(.scalar){display:grid;grid-template-columns:22px minmax(0,1fr);align-items:stretch;}
.pe-axis{position:static;display:flex;align-items:center;justify-content:center;height:27px;box-sizing:border-box;border:1px solid #444;border-right:0;border-radius:5px 0 0 5px;background:#282b34;color:#aab8dc;font-size:8px;font-weight:900;pointer-events:none;}
.pe-value-field .pe-value-input[type="text"]{height:27px;padding:4px 6px;font-family:Consolas,monospace;font-size:10px;}
.pe-value-field:not(.scalar) .pe-value-input[type="text"]{border-radius:0 5px 5px 0;}
.pe-value-field.scalar .pe-value-input[type="text"]{padding-left:6px;}
.pe-link-btn{display:flex;align-items:center;justify-content:center;flex:0 0 23px;width:23px;height:20px;padding:2px;border:1px solid #454545;border-radius:5px;background:#292929;color:#8e8e8e;cursor:pointer;}
.pe-link-btn:hover{background:#353535;color:#d6d6d6;}
.pe-link-btn.active{border-color:#637bbd;background:#30436f;color:#dce6ff;}
.pe-link-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pe-value-input.invalid,.pe-color-hex.invalid{border-color:#c45b5b;background:#2c1d1d;}
.pe-color-row{display:grid;grid-template-columns:38px minmax(0,1fr);gap:6px;align-items:center;margin-top:6px;}
.pe-color-input{box-sizing:border-box;width:38px;height:28px;padding:2px;border:1px solid #444;border-radius:5px;background:#1b1b1b;cursor:pointer;}
.pe-color-hex{height:28px;padding:4px 6px;font-family:Consolas,monospace;font-size:10px;text-transform:uppercase;}
.pe-readonly{margin-top:5px;color:#898989;font-size:9.5px;line-height:1.35;overflow-wrap:anywhere;}
.pe-actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;margin-top:7px;}
.pe-actions .btn{min-width:0;}
.pe-actions .btn.primary:disabled{opacity:.45;cursor:default;}
.pe-hint{margin-top:6px;color:#858585;font-size:9px;line-height:1.45;}
.pe-hint b{color:#b9c5e8;font-family:Consolas,monospace;font-weight:700;}

/* ── v1.2.8 requested workflow refinements ───────────────────────── */
.aa-align-title{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.aa-align-toggles{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex-wrap:wrap;}
.aa-align-toggles .aa-target-toggle{margin:0;white-space:nowrap;}
.aa-group-toggle{min-height:24px!important;height:auto!important;padding:3px 7px!important;font-size:9.5px!important;white-space:nowrap;}
.aa-group-toggle.active{background:#5d45a0!important;border-color:#8B5CF6!important;color:#fff!important;}

/* Websites: keep all three fields and Add on one compact row. */
.websites-add-box{
  grid-template-columns:minmax(64px,.85fr) minmax(102px,1.35fr) minmax(76px,max-content) max-content !important;
  gap:5px !important;
}
.websites-add-box input,.websites-add-box select{
  width:100%;min-width:0;height:31px;box-sizing:border-box;border:1px solid #444;border-radius:7px;
  background:#151515;color:#fff;padding:0 7px;font-size:10.5px;outline:none;
}
.websites-add-box input:focus,.websites-add-box select:focus{border-color:#4b79ff;}
.websites-add-box #websiteGroupInput{width:auto;max-width:116px;padding-right:3px;}
.websites-add-box #websiteAddBtn{height:31px;min-width:0;padding:0 8px;white-space:nowrap;font-size:10.5px;}
.website-item.organizing{grid-template-columns:minmax(0,1fr) max-content 27px 27px;}
.website-group-move{width:auto!important;max-width:116px!important;min-width:0!important;padding-left:5px;padding-right:3px;}
.website-open-btn{display:flex;align-items:center;gap:7px;min-width:0;min-height:32px!important;padding-top:4px!important;padding-bottom:4px!important;}
.website-item .website-mini-btn{height:32px!important;min-height:32px!important;}
.website-title{flex:1 1 auto;min-width:0;}
.website-url{display:none!important;}
.website-icon-wrap{display:flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;border-radius:6px;background:#242424;border:1px solid rgba(255,255,255,.08);overflow:hidden;color:#b9c4e7;font-size:10px;font-weight:900;text-transform:uppercase;}
.website-icon{display:block;width:17px;height:17px;object-fit:contain;}
.website-icon-fallback{display:block;line-height:1;}
.website-icon-wrap.has-image .website-icon-fallback{display:none;}
.website-icon-wrap.image-error .website-icon{display:none;}
.website-icon-wrap.image-error .website-icon-fallback{display:block;}
@media (max-width:420px){
  .websites-add-box{grid-template-columns:minmax(52px,.8fr) minmax(82px,1.2fr) minmax(64px,max-content) max-content!important;padding:5px!important;gap:4px!important;}
  .websites-add-box input,.websites-add-box select,.websites-add-box #websiteAddBtn{font-size:9.5px;padding-left:4px;padding-right:4px;}
  .websites-add-box #websiteGroupInput{max-width:92px;}
}

/* All website fields stay visible together while editing. */
.website-edit-overlay,.fixed-gradient-overlay{position:fixed;inset:0;z-index:100010;background:rgba(0,0,0,.62);display:flex;align-items:flex-start;justify-content:center;padding:28px 12px;overflow-y:auto;box-sizing:border-box;}
.website-edit-modal,.fixed-gradient-modal{width:100%;max-width:430px;background:#1f1f1f;border:1px solid #4a4a4a;border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,.55);overflow:hidden;}
.website-edit-head,.fixed-gradient-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#272727;border-bottom:1px solid #383838;color:#eee;font-size:13px;font-weight:700;}
.website-edit-close,.fixed-gradient-close{border:0;background:transparent;color:#aaa;cursor:pointer;padding:3px 7px;border-radius:5px;}
.website-edit-close:hover,.fixed-gradient-close:hover{background:#3b3b3b;color:#fff;}
.website-edit-form,.fixed-gradient-form{display:grid;gap:9px;padding:12px;}
.website-edit-field,.fixed-gradient-field{display:grid;gap:4px;min-width:0;}
.website-edit-field>label,.fixed-gradient-field>label{color:#999;font-size:9.5px;font-weight:800;letter-spacing:.35px;text-transform:uppercase;}
.website-edit-field input,.website-edit-field select,.fixed-gradient-field select,.fixed-gradient-field>input{width:100%;height:31px;box-sizing:border-box;border:1px solid #444;border-radius:7px;background:#151515;color:#fff;padding:0 8px;min-width:0;}
.website-edit-icon-row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:9px;align-items:center;}
.website-edit-icon-preview{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #444;border-radius:8px;background:#161616;overflow:hidden;}
.website-edit-icon-preview img{max-width:28px;max-height:28px;object-fit:contain;}
.website-edit-icon-actions{display:flex;gap:6px;flex-wrap:wrap;}
.website-edit-status{font-size:10px;color:#999;min-height:14px;line-height:1.35;overflow-wrap:anywhere;}
.website-edit-actions,.fixed-gradient-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:2px;}

/* Counter: compact field layout and an animated Source Text representation. */
.counter-modal{max-width:520px!important;}
.counter-modal-content{padding:14px!important;}
.counter-grid4 .counter-field>label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.counter-grid4 input{min-width:0;padding-left:6px!important;padding-right:6px!important;}
.counter-separate-row{grid-template-columns:repeat(3,minmax(0,1fr));}
.counter-separate-row .counter-inline-check{height:100%;box-sizing:border-box;padding:7px 8px;border:1px solid #343434;border-radius:7px;background:#1a1a1a;text-transform:none;letter-spacing:0;line-height:1.25;}
.counter-preview-head{display:flex;align-items:center;justify-content:space-between;margin:7px 0 5px;color:#9a9a9a;font-size:9.5px;font-weight:800;letter-spacing:.35px;text-transform:uppercase;}
.counter-preview-head .btn{padding:3px 8px;font-size:9px;}
.counter-preview-stage{position:relative;display:flex;width:100%;max-width:100%;align-items:center;justify-content:center;min-height:64px;padding:12px 14px 20px;box-sizing:border-box;border:1px solid #3b3b3b;border-radius:10px;background:linear-gradient(145deg,#0e0e10,#19191e);overflow:hidden;text-align:center;}
.counter-preview-stage::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(139,92,246,.12);}
.counter-preview-stage::after{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(139,92,246,.12);}
.counter-preview{position:relative;z-index:1;display:block;color:#fff;font-size:34px;font-weight:600;line-height:1.05;white-space:pre-wrap;unicode-bidi:plaintext;max-width:100%;overflow-wrap:anywhere;text-shadow:0 2px 12px rgba(0,0,0,.5);}
.counter-preview-time{position:absolute;z-index:2;right:7px;bottom:5px;color:#777;font:9px/1.2 Consolas,monospace;}
.counter-edit-state{margin:6px 0 9px;padding:6px 8px;border:1px solid #303030;border-radius:7px;background:#191919;color:#8d8d8d;font-size:10px;line-height:1.35;}
.counter-edit-state.editing{border-color:#5c4a8b;background:#282238;color:#dacfff;}

/* Counter text gradient: always visible in the modal and editable from the panel. */
.counter-gradient-block{margin:1px 0 9px;padding:8px;border:1px solid #383838;border-radius:8px;background:#1a1a1a;}
.counter-gradient-toggle{display:flex;align-items:center;height:29px;box-sizing:border-box;margin:0 1px 0 0;font-weight:700;white-space:nowrap;}
.counter-gradient-controls{display:grid;grid-template-columns:max-content minmax(0,1fr) 30px minmax(0,1fr);gap:7px;align-items:end;transition:opacity .12s ease;}
.counter-gradient-controls.disabled{opacity:.43;}
.counter-gradient-color-field{min-width:0;}
.counter-gradient-color-field>label{display:block;margin-bottom:3px;color:#858585;font-size:9px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;}
.counter-gradient-color-inputs{display:grid;grid-template-columns:34px minmax(0,1fr);gap:5px;min-width:0;}
.counter-gradient-color-inputs input[type="color"]{box-sizing:border-box;width:34px;height:29px;padding:2px;border:1px solid #444;border-radius:6px;background:#141414;cursor:pointer;}
.counter-gradient-color-inputs input[type="text"]{box-sizing:border-box;width:100%;min-width:0;height:29px;padding:0 6px;border:1px solid #444;border-radius:6px;background:#151515;color:#fff;font:9.5px Consolas,monospace;text-transform:uppercase;outline:none;}
.counter-gradient-color-inputs input[type="text"]:focus{border-color:#8B5CF6;}
.counter-gradient-color-inputs input.invalid{border-color:#c45b5b;background:#2c1d1d;}
.counter-gradient-swap{width:30px;height:29px;min-width:30px;padding:0!important;font-size:15px!important;line-height:29px;}
.counter-gradient-controls input:disabled,.counter-gradient-controls button:disabled{cursor:default;}

/* Counter sound chooser: six adjacent icons, hover/focus previews and the
   checkmark on the selected icon is the only persistent selection control. */
.counter-sound-block{margin:1px 0 9px;padding:8px;border:1px solid #383838;border-radius:8px;background:#1a1a1a;}
.counter-sound-block>label{display:block;margin-bottom:5px;color:#8a8a8a;font-size:9.5px;font-weight:800;letter-spacing:.35px;text-transform:uppercase;}
.counter-sound-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;}
.counter-sound-card{position:relative;display:flex;min-width:0;height:52px;box-sizing:border-box;align-items:center;justify-content:center;gap:6px;border:1px solid #3b3b3b;border-radius:8px;background:linear-gradient(145deg,#202024,#151518);color:#aaa;cursor:pointer;transition:border-color .12s ease,background .12s ease,color .12s ease,transform .12s ease;}
.counter-sound-card:hover,.counter-sound-card:focus-within{border-color:#7160a8;background:#292435;color:#eee;transform:translateY(-1px);}
.counter-sound-card.selected{border-color:#8b5cf6;background:linear-gradient(145deg,#34284b,#211b2e);color:#fff;box-shadow:0 0 0 1px rgba(139,92,246,.22) inset;}
.counter-sound-check{position:absolute;right:5px;top:5px;width:13px!important;height:13px!important;margin:0!important;opacity:0;cursor:pointer;}
.counter-sound-checkmark{position:absolute;right:5px;top:5px;display:none;width:13px;height:13px;border-radius:4px;background:#8b5cf6;color:#fff;font-size:9px;font-weight:900;line-height:13px;text-align:center;pointer-events:none;}
.counter-sound-card.selected .counter-sound-checkmark{display:block;}
.counter-sound-icon{display:flex;height:22px;align-items:center;justify-content:center;gap:2px;}
.counter-sound-icon i{display:block;width:2px;border-radius:2px;background:currentColor;opacity:.92;}
.counter-sound-icon i:nth-child(1){height:8px}.counter-sound-icon i:nth-child(2){height:16px}.counter-sound-icon i:nth-child(3){height:22px}.counter-sound-icon i:nth-child(4){height:14px}.counter-sound-icon i:nth-child(5){height:7px}
.counter-sound-name{font:700 10px/1 Consolas,monospace;}
.counter-sound-fade{display:flex;width:max-content;margin:8px 0 0;padding-top:7px;border-top:1px solid #303030;font-weight:700;}
.counter-sound-fade.disabled{opacity:.45;}

/* Fixed-gradient chooser. */
.fixed-gradient-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.fixed-gradient-color{display:grid;grid-template-columns:42px minmax(0,1fr);gap:6px;align-items:center;}
.fixed-gradient-color input[type="color"]{width:42px;height:32px;padding:2px;border:1px solid #444;border-radius:7px;background:#141414;cursor:pointer;}
.fixed-gradient-color input[type="text"]{height:32px;min-width:0;box-sizing:border-box;border:1px solid #444;border-radius:7px;background:#151515;color:#fff;padding:0 7px;font:10px Consolas,monospace;text-transform:uppercase;}
.fixed-gradient-preview{height:104px;border:1px solid #444;border-radius:9px;background:linear-gradient(135deg,#143dff,#ff591f);}

/* Marker color choices carry their actual color behind the option text. */
.marker-manage-selection-row .marker-manage-color-select{grid-column:1/-1;grid-row:2;width:100%;}
.beat-color-row .marker-color-select{width:100%;min-width:0;}
.marker-color-select option{font-weight:700;}
.marker-sync-box .btn,.marker-layer-sync-box .btn,.marker-divide-box .btn{
  height:auto!important;min-height:31px!important;min-width:0!important;box-sizing:border-box!important;
  white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.05!important;
  padding-left:4px!important;padding-right:4px!important;
}

/* Integrated Overlapping and Mask anchor reference. */
.aa-anchor-title { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
#overlapOverlay { z-index:9000; }
.overlap-modal { max-width:430px; }
.overlap-row { display:flex; align-items:center; gap:8px; margin:12px 0; flex-wrap:wrap; }
.overlap-row label { flex:0 0 auto; }
.overlap-row input { width:80px; min-width:50px; flex:1 1 60px; }
.overlap-row select { flex:1 1 100px; min-width:0; }
.overlap-backup { display:flex; align-items:center; gap:8px; margin:12px 0; }
.overlap-backup input { width:auto; }
.overlap-help { font-size:11px; color:#aaa; line-height:1.5; }
.overlap-status { margin-top:10px; white-space:pre-wrap; overflow-wrap:break-word; font-size:12px; }
.overlap-status.error { color:#ff9999; }

/* Directional controls stay in their semantic cells regardless of inherited direction. */
#anchorGrid { direction:ltr; grid-template-rows:repeat(3,28px); }
#anchorGrid > button[data-anchor] { padding:0; box-sizing:border-box; }
#anchorGrid > button[data-anchor^="t"] { grid-row:1; }
#anchorGrid > button[data-anchor^="m"] { grid-row:2; }
#anchorGrid > button[data-anchor^="b"] { grid-row:3; }
#anchorGrid > button[data-anchor$="l"] { grid-column:1; }
#anchorGrid > button[data-anchor$="c"] { grid-column:2; }
#anchorGrid > button[data-anchor$="r"] { grid-column:3; }
#anchorGrid > button:focus { outline:2px solid #4b79ff; outline-offset:1px; }
#overlapCloseBtn { display:flex; align-items:center; justify-content:center; width:28px; min-width:28px; height:28px; padding:0; box-sizing:border-box; border:1px solid #505050; border-radius:7px; background:#343434; color:#ddd; }
#overlapCloseBtn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; pointer-events:none; }
#overlapCloseBtn:hover { background:#484848; color:#fff; }
#overlapCloseBtn:focus { outline:2px solid #4b79ff; outline-offset:2px; }
#overlapCloseBtn:disabled { opacity:.45; cursor:default; }

/* Presets: one actions menu per row/card, shared selected-layer controls. */
.preset-list .preset-actions-btn { flex:0 0 30px; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid #454545; border-radius:7px; background:#303030; color:#eee; cursor:pointer; }
.preset-list .preset-actions-btn:hover, .preset-list .preset-actions-btn[aria-expanded="true"] { background:#424242; }
.preset-list .preset-actions-btn:focus-visible { outline:2px solid #7295ff; outline-offset:1px; }
.preset-card-actions { left:auto; opacity:1; pointer-events:auto; }
.preset-card-actions .preset-actions-btn { flex:none; max-width:none; width:28px; height:28px; background:rgba(35,35,35,.96); }
.preset-card-actions .preset-actions-btn svg { width:16px; height:16px; }
.preset-action-menu { overflow-y:auto; min-width:190px; max-width:calc(100vw - 12px); }
.preset-action-menu .pam-item:focus { outline:none; }
.preset-action-menu .pam-item:focus-visible{outline:1px solid #7196ff;outline-offset:-1px}
.pam-group-menu{margin-left:10px;border-left:1px solid #464646;padding-left:3px}.pam-group-menu[hidden]{display:none}
.pam-item[aria-haspopup="menu"]::after{content:'›';font-size:17px}.pam-item[aria-expanded="true"]::after{transform:rotate(90deg)}
.preset-action-menu .pam-danger { color:#ffaaaa; }
.preset-action-menu .pam-head { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preset-layer-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:6px 0 8px; }
.preset-layer-actions .btn { min-width:0; padding:8px 4px; font-size:11px; white-space:normal; }
.presets-accordion .save-box #savePresetBtn { flex:1 0 100%; }
.presets-accordion .save-box .preset-genpreview { display:none; }

.ut-ring-open { color: #a9bfff; font-size: 23px; line-height: 1; }

/* Controlled footage import, with mode applied before AE opens the source. */
.pf-import-hint{font-size:11px;color:#aab0bc;line-height:1.5;margin-top:7px}#pfResult{overflow-wrap:anywhere;white-space:pre-wrap}#pfRetryMovesBtn{margin-top:8px}#pfRetryMovesBtn[hidden]{display:none}

.colors-layer-target-tools{margin-bottom:14px;gap:10px}
.colors-layer-target-modal .colors-layer-target-row.selected{background:#303d56;border-color:#4b79ff}
.colors-layer-target-row:not(.readonly){cursor:pointer;user-select:none}

/* Clicked buttons keep the tool's neutral theme. */
.colors-layer-target-modal button:focus {outline:none !important;box-shadow:none !important;border-color:#454545 !important;}
#anchorRingGridBtn, #alignRingGridBtn {margin-bottom:12px;}
#favFxSearch {margin-bottom:10px;}

/* Windows 1.2.88: palette selection and modeless color picker. */
.color-selected-check{position:absolute;left:-4px;top:-4px;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:#159947;color:white;font-size:13px;font-weight:900;box-shadow:0 1px 3px #0008;pointer-events:none;z-index:2}
.color-swatch-wrap .color-fav-star{top:auto!important;left:auto!important;right:-3px!important;bottom:-4px!important;opacity:0;pointer-events:none;background:#292d36;color:#bec4ce}
.color-swatch-wrap:hover .color-fav-star,.color-swatch-wrap:focus-within .color-fav-star{opacity:1;pointer-events:auto}
.color-swatch-wrap .color-fav-star.active{color:#ffd15e}
.color-selected .color-swatch{outline:2px solid #159947;outline-offset:1px}
.ut-color-picker .modal{width:340px;max-width:95%;padding:18px;display:grid;gap:14px;background:#242831;border:1px solid #596171;border-radius:12px}
.ut-picker-preview{height:65px;border:1px solid #fff6;border-radius:8px}
.ut-picker-sliders label{display:grid;grid-template-columns:42px 1fr 35px;gap:8px;align-items:center;margin:10px 0}
.ut-picker-hex{width:120px;margin-left:8px}
[data-ut-floating="1"]{position:fixed!important;left:-100000px!important;top:0!important;visibility:hidden!important;pointer-events:none!important}

/* Keep the Blend Modes search distinct from its first result in both views. */
[data-section="blendmode"] #blendSearch{margin-bottom:10px;flex-shrink:0}

/* Saturation/brightness square; pointer coordinates also work through the Ring mirror. */
.ut-picker-sv{position:relative;width:100%;height:220px;border:1px solid #ffffff55;border-radius:4px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);cursor:crosshair;touch-action:none;user-select:none;overflow:hidden}
.ut-picker-cursor{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000a;transform:translate(-50%,-50%);pointer-events:none}
.ut-picker-hue-row{display:flex;gap:10px;align-items:center}.ut-picker-hue{min-width:0;flex:1;height:16px;padding:0;appearance:none;-webkit-appearance:none;border:0;border-radius:9px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}
.ut-picker-hue::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:22px;border:2px solid #fff;border-radius:4px;background:#333;box-shadow:0 0 2px #000}
.ut-picker-value-row{display:flex;align-items:center;gap:12px}.ut-picker-value-row .ut-picker-preview{flex:1;height:36px}.ut-picker-value-row label{white-space:nowrap}.ut-picker-hex[aria-invalid="true"]{border-color:#e57878}

/* Saved extension shortcuts and the installed-extension chooser. */
.ut-extension-actions{flex-wrap:wrap;margin-bottom:10px}
#extensionsSearch{width:100%;box-sizing:border-box;margin-bottom:12px}
.ut-extension-list{display:flex;flex-direction:column;gap:7px}
.ut-extension-row{display:flex;gap:6px;min-width:0}.ut-extension-row[hidden]{display:none}
.ut-extension-launch{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.ut-extension-launch span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ut-extension-launch small{color:#aab0bc;font-size:10px;flex-shrink:0}
.ut-extension-remove{flex:0 0 30px;padding:3px;font-size:18px}
.ut-extension-picker .modal{width:420px;max-width:calc(100vw - 24px);box-sizing:border-box;display:flex;flex-direction:column;gap:12px;max-height:90vh}
.ut-extension-picker h3{margin:0}.ut-extension-search{width:100%;box-sizing:border-box}
.ut-extension-installed{overflow:auto;min-height:48px;max-height:45vh;display:flex;flex-direction:column;gap:4px}
.ut-extension-installed label{display:flex;align-items:center;gap:8px;padding:8px;border-radius:5px;cursor:pointer}.ut-extension-installed label:hover{background:#ffffff0d}
.ut-extension-installed input{flex:0 0 auto;width:auto}.ut-extension-installed span{overflow-wrap:anywhere}
.ut-extension-hint{margin:0;color:#aab0bc}.ut-extension-hint:empty{display:none}

/* The selected layer folder is the destination for newly saved items. */
#layersList .ut-folder-selected > .ut-subgroup-head {background:rgba(90,160,255,.14);box-shadow:inset 2px 0 var(--accent,#68aaff);}
#layersRootFolderBtn {flex:1;text-align:left;}
#layersRootFolderBtn.active {color:var(--accent,#9ac5ff);}
/* Properties mask names retain the native After Effects mask color. */
.ut-property-choice-modal .ut-property-choice{width:100%;text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.ut-property-choice-modal .ut-mask-choice{font-weight:600;border:1px solid #555}
.ut-property-choice-modal .ut-mask-choice:hover{border-color:#aaa}
.ut-property-choice-modal .ut-mask-choice:focus-visible{outline:2px solid #7196ff;outline-offset:1px}

/* 1.2.192 — editable temporal graph, paired speed/value curves. */
.ae-graph-fieldset #graphPreviewBox { height:168px; min-height:168px; }
.ae-graph-fieldset #graphPreviewBox svg { left:4px; bottom:4px; width:calc(100% - 8px); height:136px; touch-action:none; user-select:none; }
.ae-graph-fieldset #graphPreviewBox .graph-curve { filter:none; }
.ae-graph-fieldset #graphPreviewBox .graph-secondary-curve { fill:none; stroke:#e77575; stroke-width:1.5; opacity:.27; vector-effect:non-scaling-stroke; pointer-events:none; }
.ae-graph-fieldset #graphPreviewBox .graph-handle-dot { pointer-events:all!important; cursor:ew-resize!important; stroke:transparent; stroke-width:9; paint-order:stroke fill; }
.ae-graph-fieldset #graphPreviewBox .graph-key { cursor:ns-resize; pointer-events:all; }
.ae-graph-fieldset #graphPreviewBox.value-mode .graph-handle-dot { cursor:move!important; }
.ae-graph-fieldset #graphPreviewBox .graph-label { color:#a9c6ac; }
.app.side-ui > .accordion[data-section="graph"].side-active .ae-graph-fieldset .graph-buttons #graphDuplicateLastKeysBtn,
.ae-graph-fieldset .graph-buttons #graphDuplicateLastKeysBtn { grid-column:auto; height:28px; min-height:28px; padding:0 4px; white-space:nowrap; }
#advancedOptionsGrid { grid-template-columns:minmax(0,1fr)!important; }
#advancedOptionsGrid > * { width:100%; min-width:0; }

.ut-arrange-modal { width:360px; max-width:calc(100vw - 24px); padding:14px; }
.ut-arrange-modal header,.ut-arrange-modal footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ut-arrange-modal h3 { margin:0 0 12px; }
.ut-arrange-field { display:flex; align-items:center; gap:12px; justify-content:space-between; margin:8px 0; }
.ut-arrange-field > span { flex:1; }
.ut-arrange-field input:not([type="checkbox"]),.ut-arrange-field select { box-sizing:border-box; width:148px; min-width:0; padding:5px; color:inherit; background:var(--input-bg,#252525); border:1px solid #555; border-radius:4px; }
.ut-arrange-modal footer { justify-content:flex-end; margin-top:12px; }
#arrangeStatus { font-size:11px; color:#e5b48e; }
#advancedArrangeButtons { display:grid; grid-template-columns:minmax(0,1fr); gap:5px; }
#advancedArrangeButtons > button { min-width:0; width:100%; }

/* Native: css/effectsManager.css */
.fxm-overlay{z-index:1000;padding:8px;}
.fxm-color-picker{z-index:1001;}
.fxm-modal{max-width:850px;max-height:96vh;display:flex;flex-direction:column;overflow:hidden;min-width:0;padding:12px;box-sizing:border-box;}
.fxm-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.fxm-head h2{font-size:16px;margin:0;color:#fff;}
.fxm-version{display:inline-block;margin-left:8px;font-size:10px;font-weight:400;color:#9aa5bb;}
.fxm-summary{font-size:11px;color:#b7c2d7;margin:8px 0;overflow-wrap:anywhere;}
.fxm-toolbar{display:flex;gap:6px;align-items:center;margin:6px 0;}
.fxm-toolbar .pe-search{margin:0;flex:1;}
.fxm-body{display:grid;grid-template-columns:minmax(145px,30%) minmax(0,1fr);gap:10px;overflow:auto;min-height:0;flex:1;}
.fxm-effects{overflow-y:auto;max-height:58vh;min-width:0;}
.fxm-effect{display:flex!important;flex-direction:column;align-items:flex-start!important;white-space:normal!important;gap:4px;width:100%;text-align:left;margin:0 0 5px;padding:9px!important;}
.fxm-effect strong{overflow-wrap:anywhere;}
.fxm-effect span{font-size:10px;color:#bbb;font-weight:400;}
.fxm-effect.selected{border-color:#839eff;background:#303c62;}
.fxm-detail{min-width:0;}
.fxm-detail-title{font-size:12px;font-weight:700;line-height:1.5;color:#e3e9fa;overflow-wrap:anywhere;}
.fxm-operations{display:flex;gap:5px;margin:6px 0;flex-wrap:wrap;}
.fxm-delete{border-color:#834141!important;color:#ffbaba!important;}
.fxm-properties{border:1px solid #3c3c3c;border-radius:7px;overflow:hidden;}
.fxm-property-name{font-size:11px;font-weight:700;line-height:1.4;overflow-wrap:anywhere;}
.fxm-property-info{font-size:9px;color:#9aa5bb;line-height:1.5;margin-top:3px;overflow-wrap:anywhere;}
.fxm-color{width:100%;height:29px;min-height:29px;padding:2px;border:1px solid #777!important;box-sizing:border-box;background-image:none!important;}
.fxm-choice{width:100%;min-width:0;}
.fxm-notice{font-size:10.5px;color:#c5d6f7;line-height:1.5;margin-top:8px;white-space:pre-wrap;max-height:90px;overflow:auto;}
.fxm-notice.error{color:#ffb0aa;}
.fxm-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:8px;}
.fxm-help{font-size:9px;color:#999;line-height:1.5;margin-top:6px;}
.fxm-busy .fxm-body{opacity:.65;pointer-events:none;}
@media(max-width:520px){.fxm-body{grid-template-columns:minmax(0,1fr);display:block;}.fxm-effects{max-height:135px;margin-bottom:8px;}.fxm-modal{padding:9px;}.fxm-footer{grid-template-columns:minmax(0,1fr);}.fxm-toolbar{flex-wrap:wrap;}.fxm-toolbar .pe-search{flex-basis:100%;}}

/* Native: css/presetsZip.css */
.pzip-overlay { z-index: 100010; }
.pzip-modal { max-width: 580px; max-height: 92vh; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.pzip-modal > * { flex: 0 0 auto; min-width: 0; }
.pzip-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pzip-toolbar h2 { margin: 0; flex: 1; font-size: 16px; }
.pzip-count, .pzip-help { color: #aaa; font-size: 11px; }
.pzip-count { margin-left: auto; }
.pzip-modal .pzip-list { flex: 1 1 auto; min-height: 60px; max-height: 52vh; overflow-y: auto; border: 1px solid #454545; border-radius: 7px; }
.pzip-item { display: flex; align-items: center; gap: 9px; padding: 9px; cursor: pointer; border-bottom: 1px solid #383838; }
.pzip-item:hover { background: #333; }
.pzip-item input, .pzip-preview input { flex: 0 0 auto; width: auto; margin: 0; }
.pzip-item-label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pzip-item-label strong { font-size: 12px; overflow-wrap: break-word; }
.pzip-item-label small { color: #aaa; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pzip-preview { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pzip-notice { color: #b7c7eb; white-space: pre-wrap; overflow-wrap: break-word; font-size: 11px; max-height: 80px; overflow: auto; }
.pzip-notice.error { color: #ff9999; }
.pzip-footer { justify-content: flex-end; }

/* Native: css/assistant.css */
/* Assistant is loaded once, only when its section is opened. */
.assistant-body{padding:0!important;overflow:hidden!important;}
.assistant-frame{display:block;width:100%;height:calc(100vh - 138px);min-height:420px;border:0;background:#171a22;}
.assistant-loading{padding:14px;color:#b9c2d5;font-size:12px;}

.assistant-frame[hidden]{display:none}

.app.side-ui > .accordion[data-section="assistant"].side-active{display:flex!important;flex-direction:column;min-height:0}.app.side-ui > .accordion[data-section="assistant"].side-active > .assistant-body{display:flex!important;flex:1 1 0;min-height:0;overflow:hidden!important;padding:0!important;scrollbar-gutter:auto!important}.app.side-ui .assistant-body .assistant-frame{height:100%;min-height:0;flex:1 1 0;background:#111}

/* Native: css/libraryGroups.css */
.ut-group-menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;padding:5px;border:1px solid #414141;border-radius:6px;background:#303030;color:#ddd;cursor:pointer}
.ut-group-menu-btn:hover{background:#454545;color:#fff}.ut-group-menu-btn:focus-visible{outline:2px solid #7196ff;outline-offset:1px}
.ut-group-menu-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ut-library-menu{position:fixed;z-index:100050;min-width:175px;max-width:calc(100vw - 8px);max-height:calc(100vh - 8px);overflow:auto;padding:5px;background:#242424;border:1px solid #505050;border-radius:8px;box-shadow:0 5px 15px #0005}
.ut-library-menu button{display:block;box-sizing:border-box;width:100%;text-align:left;background:transparent;border:0;color:#eee;border-radius:4px;padding:8px 10px;font:12px Arial,sans-serif;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ut-library-menu button:hover{background:#3c3c3c}.ut-library-menu button:focus{outline:none}.ut-library-menu button:focus-visible{outline:1px solid #7196ff;outline-offset:-2px}.ut-library-menu button.active{color:#8db0ff}
.ut-library-menu .ut-submenu-toggle{padding-right:26px;position:relative}.ut-submenu-toggle::after{content:'';position:absolute;right:12px;top:12px;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}.ut-submenu-toggle[aria-expanded="true"]::after{transform:rotate(45deg)}
.ut-library-submenu{margin:2px 0 3px 9px;padding-left:4px;border-left:1px solid #464646}.ut-library-submenu[hidden]{display:none}
.ut-library-subgroup{grid-column:1/-1;box-sizing:border-box;width:100%;min-width:0;margin:5px 0;padding:4px 5px 4px 8px;border-left:2px solid #494949;border-radius:4px;background:#ffffff03}
.ut-subgroup-head,.ut-font-groups-head{display:flex;align-items:center;gap:6px;padding:2px 0 5px;min-width:0}
.ut-subgroup-title{flex:1;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;background:none;border:0;color:#ddd;font:bold 12px Arial;padding:4px;cursor:pointer}
.ut-subgroup-items{min-width:0}.ut-group-empty{grid-column:1/-1;color:#999;font-size:11px;padding:8px;line-height:1.5}
.ut-website-group-items{display:flex;flex-direction:column;gap:5px}
.website-item.ut-group-item>.ut-group-menu-btn{width:34px;min-width:0;height:32px;min-height:32px;box-sizing:border-box;margin:0;align-self:center}
.color-group-head.ut-has-subgroups,.assets-folder-head.ut-has-subgroups{grid-template-columns:22px minmax(0,1fr) 26px}
.comp-project-group-head.ut-has-subgroups{display:flex;align-items:center;gap:5px}.comp-project-group-head .ut-group-menu-btn{margin-left:auto}
.color-swatch-wrap.ut-group-item{height:34px;min-width:34px}
.color-swatch-wrap>.ut-group-menu-btn{position:absolute;left:-5px;bottom:-5px;right:auto;top:auto;width:16px;height:16px;min-width:0;padding:3px;margin:0;border:0;border-radius:50%;box-shadow:0 1px 4px #0007;z-index:2;opacity:0;pointer-events:none;background:#303030;color:#eee}
.color-swatch-wrap:hover>.ut-group-menu-btn{opacity:1;pointer-events:auto}
.color-swatch-wrap>.ut-group-menu-btn:focus-visible{opacity:1;pointer-events:auto}
.color-swatch-wrap>.ut-group-menu-btn svg{width:10px;height:10px;flex-shrink:0}
.assets-file-row>.ut-group-menu-btn,.comp-card>.ut-group-menu-btn{margin:2px;z-index:2}
.assets-view-list .assets-file-row{grid-template-columns:20px minmax(0,1fr) repeat(4,26px)}
.comp-list.comp-view-list .comp-card{grid-template-columns:34px minmax(0,1fr) repeat(4,26px)}
.trf-main{min-width:0}.textreplace-font-item>.ut-group-menu-btn{margin-left:4px}
.ut-font-groups-head>span{flex:1;font-weight:bold}.ut-font-group-items .textreplace-font-item{min-width:0}
.comp-project-group-body .ut-subgroup-items{display:grid;grid-template-columns:inherit;gap:6px}.comp-view-list .ut-subgroup-items{display:block}
.assets-view-thumb .ut-subgroup-items{display:grid;grid-template-columns:inherit;gap:6px}.color-swatches .ut-subgroup-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:6px}

.textreplace-font-item{grid-template-columns:minmax(0,1fr) 26px 26px}
.assets-view-thumb .assets-file-row{position:relative}.assets-view-thumb .assets-file-row>.ut-group-menu-btn,.comp-list.comp-view-thumb .comp-card>.ut-group-menu-btn{position:absolute;right:6px;top:6px;margin:0;background:#252525;color:#fff}
.comp-list.comp-view-thumb .ut-comp-group-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.assets-view-thumb .ut-asset-group-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:7px}

.ut-font-group-items{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}.ut-font-groups-head{flex:0 0 auto}

.ut-bulk-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0;flex:0 0 auto;min-width:0}
.ut-bulk-toolbar .btn{width:auto;min-width:0;margin:0;padding:5px 8px;font-size:11px}
.ut-bulk-count{font-size:11px;color:#bbb;flex:1;white-space:nowrap}
.ut-bulk-toolbar:not(.selecting) .ut-bulk-count,.ut-bulk-toolbar:not(.selecting) .ut-bulk-all,.ut-bulk-toolbar:not(.selecting) .ut-bulk-clear,.ut-bulk-toolbar:not(.selecting) .ut-bulk-actions{display:none}
.ut-bulk-message,.ut-font-transfer-status{flex:0 0 100%;box-sizing:border-box;width:100%;font-size:11px;line-height:1.5;color:#bbb;overflow-wrap:anywhere}
.ut-bulk-message:empty{display:none}.ut-bulk-message.error,.ut-font-transfer-status.error{color:#ffb6ad}
.ut-font-transfer-status{flex:0 0 auto;padding:0 2px 5px}
.ut-bulk-check{display:none;position:absolute;z-index:5;right:7px;top:50%;transform:translateY(-50%);width:20px;height:20px;padding:2px;border:1px solid #818181;border-radius:4px;background:#292929;color:white;cursor:pointer}
.ut-bulk-check svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;visibility:hidden}
.ut-bulk-check[aria-checked="true"]{background:#416ec2;border-color:#8eb6ff}.ut-bulk-check[aria-checked="true"] svg{visibility:visible}
.ut-bulk-mode .assets-file-row,.ut-bulk-mode .comp-card,.ut-bulk-mode .preset-row,.ut-bulk-mode .preset-card{position:relative;cursor:pointer;user-select:none}
.ut-bulk-mode .ut-bulk-check{display:block}.ut-bulk-mode .ut-bulk-selected{outline:2px solid #7196dd;outline-offset:-2px;background-color:#243951}
.ut-bulk-mode.assets-view-thumb .ut-bulk-check,.ut-bulk-mode.comp-view-thumb .ut-bulk-check,.ut-bulk-mode.preset-view-thumb .ut-bulk-check{top:7px;transform:none}
.ut-bulk-mode .assets-file-row>.assets-mini-btn,.ut-bulk-mode .assets-file-row>.ut-group-menu-btn,.ut-bulk-mode .comp-card>.ut-group-menu-btn,.ut-bulk-mode .comp-card>.comp-fav-btn,.ut-bulk-mode .comp-card>.comp-delete-btn,.ut-bulk-mode .comp-card>.comp-card-preview-btn,.ut-bulk-mode .preset-actions-btn{visibility:hidden;pointer-events:none}
.ut-bulk-busy{cursor:progress}.ut-bulk-check:focus-visible{outline:2px solid white;outline-offset:2px}
.ut-font-groups-head{flex-wrap:wrap}.ut-font-transfer{width:auto!important;flex:0 0 auto;font-size:11px!important;padding:4px 7px!important;margin:0!important}
.ut-font-unavailable .trf-preview{font-family:Arial,sans-serif!important;opacity:.55}.ut-font-unavailable .trf-name{color:#d1af7c}

/* Favorite font installation help, also mirrored into Action Ring windows. */
.ut-font-install-modal{width:520px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;box-sizing:border-box}
.ut-font-install-list{max-height:210px;overflow:auto;border:1px solid #414141;border-radius:6px}
.ut-font-install-list:empty{display:none}
.ut-font-install-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-bottom:1px solid #414141}
.ut-font-install-row:last-child{border-bottom:0}
.ut-font-install-row>div{min-width:0;overflow-wrap:anywhere}
.ut-font-install-row strong,.ut-font-install-row span{display:block;font-size:12px}
.ut-font-install-row span{color:#aaa;margin-top:3px}
.ut-font-install-row button{flex:0 0 auto}
.ut-font-install-help{font-size:12px;line-height:1.5;color:#ccc}
.ut-font-install-actions{flex-wrap:wrap;gap:8px}

/* Website action targets never shrink into narrow strips in group headers. */
#websitesList .website-group-head{box-sizing:border-box;min-width:0}
#websitesList .website-mini-btn,#websitesList .ut-group-menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;min-width:34px;height:32px;min-height:32px;box-sizing:border-box;padding:7px;line-height:1}
#websitesList .website-mini-btn svg,#websitesList .ut-group-menu-btn svg{display:block;flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#websitesList .website-item{grid-template-columns:minmax(0,1fr) repeat(2,34px)}
#websitesList .website-item.ut-group-item{grid-template-columns:minmax(0,1fr) repeat(3,34px)}
#websitesList .website-item.organizing{grid-template-columns:minmax(0,1fr) minmax(0,116px) repeat(2,34px)}

#websitesList .website-item.ut-group-item.organizing{grid-template-columns:minmax(0,1fr) minmax(0,116px) repeat(3,34px)}

/* Native: css/timelineGroups.css */
.tg-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:8px}
.tg-toolbar .btn{min-width:0;white-space:normal;line-height:1.25;min-height:29px}
.tg-search-row{display:flex;align-items:center;gap:6px;margin:8px 0}.tg-search-row input{flex:1;min-width:0}
.tg-info{font-size:11px;color:#aaa;overflow-wrap:anywhere;margin:5px 0 9px}
.tg-list{display:flex;flex-direction:column;gap:6px;min-width:0}
.tg-group{min-width:0;border:1px solid #414141;border-radius:7px;background:#ffffff03}
.tg-group-row{display:flex;align-items:center;gap:5px;min-width:0;padding:5px}
.tg-toggle{flex:0 0 23px;width:23px;height:27px;padding:0;background:transparent;border:0;color:#b9c9ec;font-size:17px;cursor:pointer}
.tg-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;padding:5px 0;background:none;border:0;color:#eee;font:bold 12px Arial,sans-serif;cursor:pointer}
.tg-name:hover{color:#9ebaff}.tg-count{flex:0 0 auto;font-size:10px;color:#bbb;border-radius:4px;padding:2px 5px;background:#ffffff09}
.tg-group-body{padding:0 6px 6px 12px;min-width:0}.tg-group-body .tg-group{margin-top:5px;border-left:2px solid #58749e}
.tg-preview{font-size:11px;color:#999;line-height:1.5;overflow-wrap:anywhere;padding:0 3px 4px}
.tg-layer{display:flex;align-items:center;gap:7px;width:100%;min-width:0;margin-top:3px;padding:6px;border:0;border-radius:4px;background:transparent;color:#bfc4cf;text-align:left;font:11px Arial,sans-serif;cursor:pointer}
.tg-layer:hover{background:#ffffff0b;color:#fff}.tg-layer.selected{color:#8db0ff}.tg-layer:focus-visible{outline:1px solid #7196ff;outline-offset:-1px}
.tg-layer-index{flex:0 0 22px;color:#858d9f;font-size:10px;text-align:right}.tg-layer-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tg-layer-lock{color:#999;font-size:9px}.tg-layer.locked{opacity:.65}
.tg-ungrouped{padding:5px 6px}.tg-ungrouped-title{font-size:10px;color:#888;margin:3px 0 5px}
.tg-empty{padding:12px 4px;color:#aaa;font-size:12px;line-height:1.5}
.tg-message{font-size:11px;color:#aac3ed;line-height:1.5;overflow-wrap:anywhere;margin:8px 0}.tg-message.error{color:#ffb1a8}
.tg-help{font-size:11px;color:#bbb;line-height:1.65;margin:10px 0;padding:9px;border:1px solid #454545;border-radius:6px;background:#ffffff03}.tg-help p{margin:0 0 7px}.tg-help p:last-child{margin-bottom:0}
[data-section="timelinegroups"] button:disabled{opacity:.5;cursor:wait}.tg-name:focus-visible,.tg-toggle:focus-visible{outline:2px solid #7196ff;border-radius:4px}

.tg-toggle svg{width:18px;height:18px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.tg-toggle[aria-pressed="false"]{color:#808080}.tg-toggle:hover{background:#ffffff0d;border-radius:5px}

.tg-ring-create-modal h3{margin:0 0 16px}.tg-ring-create-modal>label{display:block;font-size:12px}.tg-ring-create-modal .tg-message{min-height:16px}.tg-ring-create-modal .modal-actions{margin-top:14px}

/* The same compact group/item actions used by the Colors library. */
.tg-group-action{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:26px;padding:4px;border:0;border-radius:5px;background:transparent;color:#bfc4cf;cursor:pointer}
.tg-group-action:hover{color:#fff;background:#ffffff10}.tg-group-action:focus-visible{outline:2px solid #7196ff;outline-offset:1px}
.tg-group-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tg-group-row>.ut-group-menu-btn{order:5}
.tg-layer-row{display:flex;align-items:center;gap:3px;min-width:0;margin-top:3px}
.tg-layer-row>.tg-layer{flex:1;min-width:0;margin:0;width:auto}
.tg-layer-row>.ut-group-menu-btn{flex:0 0 23px;width:23px;height:23px;padding:4px;background:transparent;border-color:transparent;color:#999}
.tg-layer-row>.ut-group-menu-btn:hover,.tg-layer-row>.ut-group-menu-btn[aria-expanded="true"]{color:#fff;background:#ffffff10;border-color:#454545}

/* Native: css/timelineOrganizer.css */
.to-topbar,.to-options,.to-search,.to-paging,.to-card-title{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.to-topbar{margin:14px 0 8px;gap:8px}.to-search input{flex:1;min-width:100px}.to-search select{flex:1;min-width:100px}.to-search{margin:7px 0}.to-check{display:flex;align-items:center;gap:4px;font-size:11px;color:#ccc;min-width:0}.to-check input{margin:0;flex:0 0 auto;width:auto}.to-disclosure{border:1px solid #414141;border-radius:6px;margin:8px 0;padding:7px}.to-disclosure summary{cursor:pointer;font-size:11px;color:#b6cafa}.to-disclosure[open] summary{margin-bottom:8px}.to-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:7px 0}.to-fields label,.to-field{display:flex;flex-direction:column;gap:4px;font-size:10px;color:#bbb;min-width:0}.to-fields input,.to-fields select,.to-field select{width:100%;min-width:0;box-sizing:border-box}.to-fields .to-check{flex-direction:row;align-items:center}.to-fields .to-check input{width:auto}.to-wide{grid-column:1/-1}.to-options{margin:6px 0}.to-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:7px 0}.to-actions button{min-width:0;white-space:normal;font-size:10px;line-height:1.3;min-height:31px;padding:5px}.to-count{font-size:11px;color:#d1dbee;line-height:1.5;margin:6px 0}.to-focus{border-top:1px solid #424242;border-bottom:1px solid #424242;padding:5px 0;margin-bottom:8px}.to-note{font-size:10px;color:#a2a2a2;line-height:1.5;overflow-wrap:anywhere;margin:5px 0}.to-workspace{position:relative;max-height:370px;overflow:auto;overscroll-behavior:contain;min-width:0;border:1px solid #3d3d3d;border-radius:6px}.to-pinned{position:sticky;top:0;z-index:2;background:#30333b;border-bottom:1px solid #535b6b;max-height:145px;overflow:auto;padding:5px}.to-pinned:empty{display:none}.to-pin-title{font-size:10px;font-weight:bold;color:#b7caeb;margin:0 2px 5px}.to-list{display:flex;flex-direction:column;min-width:0}.to-layer{border-bottom:1px solid #3c3c3c;padding:6px;min-width:0}.to-layer:last-child{border-bottom:0}.to-layer.selected{background:#55739f23}.to-layer-top,.to-pin{display:flex;gap:5px;align-items:center;min-width:0}.to-index{font-size:9px;color:#969696;min-width:19px;text-align:right}.to-label-chip{width:7px;height:18px;border-radius:3px;flex:0 0 7px;border:1px solid #ffffff20}.to-layer-name,.to-pin-name{background:none;border:0;padding:3px 0;text-align:left;color:#eee;font-size:12px;flex:1;min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer}.to-layer-name:hover,.to-pin-name:hover{color:#9ab7ff}.to-layer-meta{font-size:9px;color:#a9a9a9;overflow-wrap:anywhere;margin:3px 0 3px 31px}.to-badges{display:flex;gap:4px;flex-wrap:wrap;margin-left:31px}.to-badge{border:1px solid #4d5e77;border-radius:4px;background:#789de110;color:#b8cfee;font-size:9px;padding:2px 5px;cursor:pointer}.to-badge.error{border-color:#b66860;color:#ffb2a9}.to-badge:focus-visible,.to-layer-name:focus-visible,.to-pin-name:focus-visible{outline:2px solid #7196ff;border-radius:3px}.to-paging{justify-content:space-between;margin:7px 0;font-size:10px;color:#aaa}.to-card{border:1px solid #515765;background:#ffffff03;border-radius:6px;padding:8px;margin:9px 0;min-width:0}.to-card-title{justify-content:space-between;font-size:11px;color:#c5d6f3;margin-bottom:8px}.to-detail,.to-saved,.to-rule{display:flex;align-items:center;gap:5px;padding:5px 0;border-bottom:1px solid #3c3c3c;min-width:0}.to-detail button:first-child,.to-saved button:first-child{flex:1;min-width:0;white-space:normal;text-align:left;overflow-wrap:anywhere}.to-rule span{flex:1;min-width:0;font-size:10px;overflow-wrap:anywhere}.to-rule-actions{display:flex;flex-direction:column;gap:4px;justify-content:end}.to-preview{max-height:260px;overflow:auto;margin-top:7px;min-width:0}.to-preview table{width:100%;border-collapse:collapse;font-size:10px;table-layout:fixed}.to-preview td,.to-preview th{padding:5px;border:1px solid #434b59;overflow-wrap:anywhere;text-align:left;vertical-align:top}.to-preview th{color:#bed0eb}.to-empty{padding:14px 8px;color:#999;font-size:11px;line-height:1.6}.to-locked{color:#e2bf89}.to-pin button:disabled{opacity:.5}.to-workspace .ut-group-menu-btn{flex:0 0 22px}.to-saved .ut-group-menu-btn{flex:0 0 22px}[data-section="timelineorganizer"] button:disabled{opacity:.5;cursor:default}[data-section="timelineorganizer"] [hidden]{display:none!important}

.tw-scroll{max-height:270px;overflow-y:auto}.tw-item{display:flex;align-items:flex-start;gap:5px;margin:5px 0}.tw-item-title{flex:1;min-width:0;white-space:normal;text-align:start;overflow-wrap:anywhere}.tw-status-review{border-inline-start:3px solid #dca95b;padding-inline-start:5px}.tw-status-done{border-inline-start:3px solid #76b69b;padding-inline-start:5px}.tw-status-todo{border-inline-start:3px solid #699dc8;padding-inline-start:5px}#twNoteText{width:100%;min-height:65px;resize:vertical;box-sizing:border-box;background:var(--input-bg,#252b37);color:inherit;border:1px solid var(--border,#3b4453);border-radius:6px;padding:6px}.to-fields select{max-width:100%}
.to-search .to-check{flex:0 0 auto;white-space:nowrap}.to-search .to-check input{min-width:0;width:13px;flex:0 0 13px}
@media(max-width:480px){.to-search>input{flex-basis:100%}.to-search>select{flex:1 1 120px}.to-search>.to-check{flex:0 0 auto}}

/* Native: css/formTheme.css */
/* One dark form surface, including dynamic dialogs and HTML Ring controls. */
:root{color-scheme:dark;--ut-field-bg:#181818;--ut-field-text:#f4f4f4;--ut-field-border:#444;--ut-field-focus:#4b79ff}
select,textarea,input:not([type]),input[type="text"],input[type="number"],input[type="password"],input[type="search"],input[type="email"],input[type="url"],input[type="tel"],input[type="date"],input[type="time"]{box-sizing:border-box;background-color:var(--ut-field-bg);color:var(--ut-field-text);border:1px solid var(--ut-field-border);border-radius:7px;padding:7px;font-family:inherit;font-size:12px;outline:none;min-width:0}
select option,select optgroup{background-color:var(--ut-field-bg);color:var(--ut-field-text)}
input::placeholder,textarea::placeholder{color:#909090;opacity:1}
select:focus,textarea:focus,input:not([type]):focus,input[type="text"]:focus,input[type="number"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="email"]:focus,input[type="url"]:focus{border-color:var(--ut-field-focus);box-shadow:0 0 0 1px #4b79ff33}
input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:#4b79ff;color-scheme:dark}
select:disabled,textarea:disabled,input:disabled{opacity:.55;cursor:default}
input[type="file"]::file-selector-button{background:#383838;color:#f4f4f4;border:1px solid #505050;border-radius:6px;padding:6px 9px}
.ut-label-select{font-weight:600}.ut-library-menu button.ut-label-choice{margin:3px 0;border-radius:5px;position:relative;padding-right:30px}
.ut-library-menu button.ut-label-choice:hover,.ut-library-menu button.ut-label-choice:focus-visible{outline:2px solid #fff;outline-offset:-2px;filter:brightness(1.12)}
.ut-library-menu button.ut-label-choice[aria-checked="true"]::after{content:'✓';position:absolute;right:10px;font-weight:bold}
#twNoteText{background-color:var(--ut-field-bg);color:var(--ut-field-text);border-color:var(--ut-field-border)}

/* 1.2.104: saved-layer browsing and shared New Layer Options. */
.layers-save-preview{display:flex;align-items:center;gap:6px;margin:6px 0 10px;font-size:12px}
.layers-preview{min-height:110px;max-height:260px;overflow:auto;padding:10px;margin:8px 0 12px;background:#1a1d24;border:1px solid #3a404c;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#c2c8d3;text-align:center}
.layers-preview img{max-width:100%;max-height:210px;object-fit:contain;background:repeating-conic-gradient(#30343c 0% 25%,#242832 0% 50%) 50%/16px 16px}
.layers-preview-title{font-size:12px;font-weight:600}
.layers-thumb{padding:0;width:70px;height:48px;flex:0 0 70px;border:1px solid #454c59;border-radius:4px;background:#191c22;cursor:pointer}
.layers-thumb img{width:100%;height:100%;object-fit:contain}.layers-thumb.missing{display:none}
.layers-card.ut-group-item{position:relative;padding-right:34px}.layers-card>.ut-group-menu-btn{position:absolute;right:5px;top:7px}
.layers-card-main{min-width:0}.layers-card-actions{flex-wrap:wrap}.layers-list .ut-subgroup-items{display:flex;flex-direction:column;gap:6px}
.library-create-options .asset-options-body{padding:8px 0}.library-create-options .create-options-row{flex-wrap:wrap}
.library-create-options .create-options-presets{display:flex;flex-wrap:wrap;gap:6px}.library-create-options .create-effects-list{max-height:210px;overflow:auto}
.asset-specific-options{margin:8px 0 12px}.ut-dialog-error{color:#ff8c8c;margin-top:6px}

.layers-card.ut-group-item{grid-template-columns:minmax(0,1fr)!important;padding:9px 40px 9px 10px!important}
.layers-card.ut-group-item.has-preview{grid-template-columns:70px minmax(0,1fr)!important}
.layers-card.ut-group-item>.layers-card-main{grid-column:1;grid-row:1}
.layers-card.ut-group-item>.layers-card-actions{grid-column:1;grid-row:2;justify-self:start!important;justify-content:flex-start!important;flex-wrap:wrap!important;max-width:100%!important}
.layers-card.ut-group-item.has-preview>.layers-card-main,.layers-card.ut-group-item.has-preview>.layers-card-actions{grid-column:2}
.layers-card.ut-group-item>.layers-thumb{grid-column:1;grid-row:1 / span 2}
.layers-legacy-preset-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0;font-size:11px}
.layers-legacy-preset-row select{min-width:120px;flex:1}

/* 1.2.105: Layers reuses Assets geometry, including nested thumbnail groups. */
#layersList.assets-view-thumb {display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:7px;padding:7px;}
#layersList>.ut-library-subgroup {grid-column:1 / -1;}
.layers-menu-check {display:flex;gap:7px;align-items:center;padding:8px;font-size:11px;white-space:normal;}
#layersPreview {height:var(--assets-preview-height,142px);min-height:var(--assets-preview-height,142px);max-height:var(--assets-preview-height,142px);box-sizing:border-box;}
#layersPreview.collapsed {display:none;}
#layersPreview .assets-preview-placeholder {white-space:normal;text-align:center;}

/* Native: css/transcriptEdit.css */
.te-controls {display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center;}
.te-controls label {display:flex;flex-direction:column;gap:4px;min-width:0;font-size:11px;color:#ccc;}
.te-controls select {width:100%;min-width:0;}
.te-actions {display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;}
.te-group {padding:8px;border:1px solid #414141;border-radius:6px;margin:7px 0;background:#242424;}
.te-group-head {display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:#ddd;}
.te-take {display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px;margin-top:8px;align-items:start;}
.te-take label {display:flex;align-items:center;gap:4px;font-size:11px;}
.te-take-text {overflow-wrap:anywhere;line-height:1.65;font-size:12px;}
.te-take>button {grid-column:2;justify-self:start;}
#ltTxGroups {max-height:360px;overflow:auto;}
#ltTxWords {display:flex;flex-wrap:wrap;gap:3px;padding:8px;background:#1e1e1e;border:1px solid #3c3c3c;border-radius:6px;max-height:260px;overflow:auto;line-height:1.8;}
.te-word,.te-silence {font:inherit;color:inherit;border:1px solid transparent;background:#333;border-radius:3px;padding:2px 4px;cursor:pointer;}
.te-word:hover,.te-silence:hover {border-color:#858585;}
.te-word.removed,.te-silence.removed {background:#552e2e;color:#f0aaaa;text-decoration:line-through;}
.te-silence {border-style:dashed;border-color:#586771;background:#283037;color:#bdcbd5;font-size:11px;white-space:nowrap;}
.te-pages {display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0;font-size:11px;}
#ltTxAudio {width:100%;height:38px;margin:7px 0;}
#ltTxSummary {padding:7px 0;font-size:11px;color:#ccc;}
#ltTxStatus.error {color:#eeabab;}
.te-busy {pointer-events:none;opacity:.65;}
#ltTxReview[hidden],#ltTxCancel[hidden] {display:none!important;}
.fc-output {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;font-size:11px;}
.fc-output label {display:flex;align-items:center;gap:5px;white-space:nowrap;}
.fc-output input[type="text"] {min-width:100px;flex:1;width:140px;box-sizing:border-box;}
.fc-after[hidden] {display:none!important;}
.te-applied .te-word:not(.removed),.te-applied .te-silence:not(.removed) {background:#263e30;color:#b9e4c5;}
.te-applied .te-word {cursor:pointer;}
.te-applied #ltTxSummary {color:#b9e4c5;}

.te-applied .te-word-pending {border-color:#d6b36a;}
.te-pending #ltTxSummary {color:#e5c987;}

/* Native: css/timelineEdit.css */
#ltEditTools {min-width:0;}
#ltEditTools [hidden] {display:none!important;}
#ltEditTools .lte-modes {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
#ltEditTools .lte-modes .active {border-color:#84a9e8;background:#35445d;}
#ltEditTools .lte-note,#ltEditStatus {font-size:11px;line-height:1.5;color:inherit;overflow-wrap:anywhere;}
#ltEditTools .lte-note {opacity:.75;margin:7px 0;}
#ltEditResizeRow {display:flex;align-items:center;gap:6px;font-size:11px;margin:8px 0;}
#ltEditStatus {min-height:17px;margin-top:7px;}
#ltEditStatus.error {color:#efaaaa;}

/* Native: css/aeWindows.css */
/* Uses the current Ultimate Tools font, colors and form controls. */
[data-section="aewindows"] .ut-ae-windows-intro { margin:0 0 10px;font-size:11px;line-height:1.5; }
[data-section="aewindows"] .ut-ae-windows-search { display:flex;gap:8px;align-items:center;margin-bottom:14px; }
[data-section="aewindows"] #aeWindowsSearch { flex:1;min-width:0;width:100%; }
[data-section="aewindows"] #aeWindowsRefreshBtn { flex:0 0 auto; }
[data-section="aewindows"] .ut-ae-windows-group { margin:0 0 12px; }
[data-section="aewindows"] h4 { margin:0 0 6px;font-size:11px;opacity:.7;letter-spacing:.03em; }
[data-section="aewindows"] .ut-ae-window-row { margin:0 0 5px; }
[data-section="aewindows"] .ut-ae-window-open { width:100%;height:auto;min-height:39px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;text-align:left;padding:7px 10px;white-space:normal; }
[data-section="aewindows"] .ut-ae-window-open > span { font-weight:600; }
[data-section="aewindows"] .ut-ae-window-open > small { font-size:10px;font-weight:400;opacity:.65;line-height:1.35; }
[data-section="aewindows"] [hidden] { display:none!important; }
[data-section="aewindows"] #aeWindowsStatus { margin:10px 0 0;font-size:11px;line-height:1.45;min-height:16px; }
[data-section="aewindows"] .ut-ae-windows-error { color:#f48771; }
[data-section="aewindows"] .ut-ae-windows-footer { border-top:1px solid var(--border,#3a3a3a);padding-top:10px;margin-top:12px;font-size:11px; }

/* Native: css/carousel.css */
/* Scoped to the Carousel builder; uses the existing panel font/theme. */
.ut-carousel-overlay{z-index:10040}
.ut-carousel-modal{width:min(620px,calc(100vw - 24px));max-width:620px;max-height:calc(100vh - 24px);padding:14px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.ut-carousel-modal *{box-sizing:border-box}
.ut-carousel-modal header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:0 0 auto}
.ut-carousel-modal h3{margin:0 0 4px;font-size:16px}
.ut-carousel-modal header p,.ut-carousel-note{margin:0;color:var(--muted,#9ea9b8);font-size:11px;line-height:1.45}
.ut-carousel-modal .ut-carousel-close{flex:0 0 28px;width:28px;height:28px;min-width:28px;padding:0;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
.ut-carousel-scroll{overflow:auto;min-height:0;overscroll-behavior:contain;padding-right:3px;overflow-anchor:none}
.ut-carousel-source{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:12px}
.ut-carousel-preview{height:165px;border:1px solid #ffffff16;border-radius:8px;background:#151920;overflow:hidden}
.ut-carousel-preview svg{height:100%;width:100%;display:block}
.ut-carousel-preview-row{display:flex;align-items:center;gap:8px;margin:7px 0 12px;color:var(--muted,#9ea9b8);font-size:10px}
.ut-carousel-preview-row>span{margin-right:auto}.ut-carousel-preview-row input{width:95px;min-width:60px}
.ut-carousel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;margin-bottom:12px}
.ut-carousel-field{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:11px;color:var(--muted,#aab4c2)}
.ut-carousel-field[data-field="name"]{grid-column:span 2}
.ut-carousel-field input:not([type="checkbox"]),.ut-carousel-field select{width:100%;min-width:0;height:30px;font:inherit;color:var(--text,#e5e9ef)}
.ut-carousel-field input[type="checkbox"]{align-self:flex-start}
.ut-carousel-field[hidden]{display:none!important}
.ut-carousel-check{justify-content:center}.ut-carousel-images,.ut-carousel-help{font-size:11px;margin-top:9px;line-height:1.5}
.ut-carousel-images summary,.ut-carousel-help summary{cursor:pointer;color:var(--muted,#aab4c2)}
.ut-carousel-images ol{max-height:90px;overflow:auto;padding-left:24px;margin:5px 0}
.ut-carousel-modal footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ffffff14;padding-top:10px}
.ut-carousel-modal footer>div{display:flex;gap:8px;flex-shrink:0}
#carouselStatus{margin:0;font-size:11px;line-height:1.4;min-height:16px;color:var(--muted,#aab4c2)}#carouselStatus.error{color:#ff9c94}
/* Bound the builder itself, not the OS window, on small displays. */
#utFloatingContent #carouselOverlay .ut-carousel-modal{max-height:820px!important}
@media(max-width:480px){.ut-carousel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ut-carousel-modal footer{flex-wrap:wrap}.ut-carousel-modal footer>div{margin-left:auto}.ut-carousel-preview{height:135px}.ut-carousel-source{flex-wrap:wrap}}

.ut-carousel-field[data-field="template"]{grid-column:1/-1}
.ut-carousel-template-note{font-size:11px;line-height:1.4;color:var(--muted,#aab4c2);margin:0 0 12px;min-height:30px}

/* Native: css/proximity.css */
/* Scoped, inherited Ultimate Tools typography and colors. */
.ut-proximity-overlay{z-index:10040}
.ut-proximity-modal{width:560px;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);box-sizing:border-box;padding:14px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.ut-proximity-modal *{box-sizing:border-box}
.ut-proximity-modal header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ut-proximity-brand{font-size:9px;letter-spacing:1.5px;color:var(--muted,#9ea9b8)}
.ut-proximity-modal h3{font-size:17px;margin:3px 0 0}
#proximityCloseBtn{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;padding:0;font-size:22px;line-height:1}
.ut-proximity-scroll{overflow:auto;min-height:0;overscroll-behavior:contain;overflow-anchor:none;padding-right:3px}
.ut-proximity-intro,.ut-proximity-hint,.ut-proximity-help{font-size:11px;line-height:1.5;color:var(--muted,#9ea9b8);margin:0 0 10px}
.ut-proximity-source{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:12px}
.ut-proximity-controller{display:flex;align-items:center;gap:10px;font-size:12px}.ut-proximity-controller select{flex:1;min-width:0}
.ut-proximity-source-choice{display:flex;gap:10px;margin:0 0 10px;flex-wrap:wrap}.ut-proximity-source-choice label{display:flex;flex:1;min-width:130px;flex-direction:column;gap:4px;font-size:11px}.ut-proximity-source-choice select,.ut-proximity-setup select{width:100%;min-width:0}
.ut-proximity-setup{padding:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ut-proximity-full,.ut-proximity-background-fields{grid-column:1/-1}.ut-proximity-background-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ut-proximity-setup small{font-size:10px;line-height:1.5;color:var(--muted,#aab4c2)}
.ut-proximity-general{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.ut-proximity-field{display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--muted,#aab4c2);min-width:0}
.ut-proximity-field input{width:100%;min-width:0;height:27px;font:inherit;color:var(--text,#e5e9ef)}
.ut-proximity-field input[type=color]{padding:2px;cursor:pointer}
.ut-proximity-group{border:1px solid #ffffff16;border-radius:7px;margin-bottom:8px;overflow:hidden}
.ut-proximity-group>summary{padding:9px 10px;cursor:pointer;font-size:12px;background:#ffffff04}
.ut-proximity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px}
.ut-proximity-response{min-width:0;padding:8px;border:1px solid #ffffff0c;border-radius:5px}
.ut-proximity-check{display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer}.ut-proximity-check input{margin:0}
.ut-proximity-amounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:7px}.ut-proximity-amounts:empty{display:none}.ut-proximity-amounts small{grid-column:1/-1;color:var(--muted,#aab4c2);font-size:10px}
.ut-proximity-amounts>.ut-proximity-field:only-child{grid-column:1/-1}
.ut-proximity-modal footer{flex:0 0 auto;border-top:1px solid #ffffff16;padding-top:9px}
#proximityStatus{font-size:11px;line-height:1.45;white-space:pre-line;margin:0 0 8px;max-height:100px;overflow:auto;color:var(--muted,#aab4c2)}#proximityStatus.error{color:#ff9c94}
.ut-proximity-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.ut-proximity-help summary{cursor:pointer;color:var(--text,#e5e9ef)}.ut-proximity-help p{margin:6px 0}
#utFloatingContent #proximityOverlay .ut-proximity-modal{width:100%!important;max-width:none!important;max-height:none!important}
@media(max-width:380px){.ut-proximity-grid{grid-template-columns:1fr}.ut-proximity-actions .btn{flex:1}.ut-proximity-source{flex-wrap:wrap}}

.ut-proximity-inline{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:7px}
.ut-proximity-inline .ut-proximity-check{flex:1;min-width:0;font-size:11px}
.ut-proximity-inline .ut-proximity-amounts{width:62px;flex:0 0 62px;margin:0}
.ut-proximity-inline .ut-proximity-field>span{display:none}

/* Native: css/bounce.css */
/* Compact settings window; inherit Ultimate Tools colors and typography. */
.ut-bounce-overlay{z-index:10040}
.ut-bounce-modal{box-sizing:border-box;width:430px;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.ut-bounce-modal *{box-sizing:border-box}
.ut-bounce-modal header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ut-bounce-brand{font-size:9px;letter-spacing:1.5px;color:var(--muted,#9ea9b8)}
.ut-bounce-modal h3{margin:3px 0 0;font-size:18px}
#bounceCloseBtn{display:flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;min-width:28px;padding:0;font-size:22px;line-height:1}
.ut-bounce-selection{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted,#9ea9b8)}
#bounceSelection{min-width:0;overflow-wrap:anywhere}
.ut-bounce-controls{position:relative;isolation:isolate;padding:12px 0;display:flex;flex-direction:column;gap:19px}
.ut-bounce-curve{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;color:var(--accent,#8bbcaf)}
.ut-bounce-curve path{fill:none;stroke:currentColor;stroke-width:2.2;opacity:.3;vector-effect:non-scaling-stroke}
.ut-bounce-curve .ut-bounce-baseline{stroke-width:1;opacity:.1;stroke-dasharray:3 5}
.ut-bounce-row{display:grid;grid-template-columns:76px minmax(40px,1fr) 64px;gap:12px;align-items:center;font-size:12px;min-width:0}
.ut-bounce-row input{width:100%;min-width:0;margin:0}
.ut-bounce-row input[type=number]{height:29px;padding:4px 6px;font:inherit;color:var(--text,#e5e9ef)}
.ut-bounce-row input[type=range]{accent-color:var(--accent,#8bbcaf);height:20px;padding:0;cursor:pointer}
#bounceStatus{margin:0;font-size:11px;line-height:1.5;color:var(--muted,#9ea9b8);white-space:pre-line}
#bounceStatus:empty{display:none}#bounceStatus.error{color:#ff9c94}
.ut-bounce-modal footer{display:flex;gap:8px;justify-content:flex-end}.ut-bounce-modal footer .btn{min-width:64px}
.ut-bounce-modal footer #bounceResetBtn{margin-right:auto}
#utFloatingContent #bounceOverlay .ut-bounce-modal{width:100%!important;max-width:none!important;max-height:none!important}
@media(max-width:360px){.ut-bounce-modal{padding:12px}.ut-bounce-row{grid-template-columns:66px minmax(35px,1fr) 57px;gap:7px;font-size:11px}.ut-bounce-selection{flex-wrap:wrap}}

/* Native: css/morphing.css */
.ut-morph-overlay{z-index:10040}
.ut-morph-modal{box-sizing:border-box;width:300px;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);padding:14px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.ut-morph-modal *{box-sizing:border-box}.ut-morph-modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.ut-morph-brand{font-size:9px;letter-spacing:1.5px;color:var(--muted,#9ea9b8)}.ut-morph-modal h3{margin:3px 0 0;font-size:18px}.ut-morph-top-actions{display:flex;gap:6px}
.ut-morph-top-actions .btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;min-width:26px;padding:0}.ut-morph-top-actions #morphCloseBtn{font-size:22px;line-height:1}
.ut-morph-commands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ut-morph-commands>div{display:flex;flex-direction:column;gap:8px;min-width:0}.ut-morph-commands .btn{width:100%;min-height:32px}
.ut-morph-commands,#morphHelp{flex-shrink:0}#morphHelp{max-height:260px}
.ut-morph-commands label{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted,#aab1bf)}.ut-morph-commands input{width:0;min-width:0;flex:1;height:28px;padding:4px 6px;font:inherit;border-radius:5px}
#morphItBtn{width:100%;min-height:35px;font-weight:600;flex-shrink:0}#morphHelp{font-size:11px;line-height:1.6;color:var(--muted,#aab1bf);overflow:auto;min-height:0}#morphHelp p{margin:0 0 9px}#morphHelp p:last-child{margin:0}
#morphStatus{margin:0;font-size:11px;line-height:1.5;overflow-wrap:anywhere;max-height:90px;overflow:auto;color:var(--muted,#aab1bf)}#morphStatus:empty{display:none}#morphStatus.error{color:#ff9c94}.ut-morph-modal .hidden{display:none!important}
#utFloatingContent #morphingOverlay .ut-morph-modal{width:100%!important;max-width:none!important;max-height:calc(100vh - 16px)!important;min-height:0}
#utFloatingContent.ut-user-sized #morphingOverlay .ut-morph-modal{height:calc(100vh - 16px)!important}.ut-morph-modal button:disabled{opacity:.5}

.ut-morph-commands,#morphHelp{flex-shrink:0}#morphHelp{max-height:260px}

/* Native: css/textMarks.css */
.ut-text-marks-overlay{z-index:10040}
.ut-text-marks-modal{box-sizing:border-box;width:440px;max-width:calc(100vw - 24px);height:calc(100vh - 24px);max-height:900px;overflow:hidden;padding:14px;display:flex;flex-direction:column;gap:10px}
.ut-text-marks-modal *{box-sizing:border-box}
.ut-text-marks-modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.ut-tm-scroll{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:2px}
.ut-tm-scroll>*{flex-shrink:0}
.ut-tm-brand{font-size:9px;letter-spacing:1.5px;color:var(--muted,#a6adb8)}
.ut-text-marks-modal h3{margin:3px 0 0;font-size:18px}
#tmClose{display:flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;min-width:28px;padding:0;font-size:22px;line-height:1}
.ut-tm-selection{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted,#a6adb8)}
#tmSelection{min-width:0;overflow-wrap:anywhere}
.ut-tm-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.ut-tm-style{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:63px;padding:6px!important;min-width:0;white-space:normal;font-size:11px!important;line-height:1.2!important}
.ut-tm-style svg{height:28px;width:74px;max-width:100%;color:#e6bd59}
.ut-tm-style[aria-pressed=true]{border-color:var(--accent,#8bbcaf);background:rgba(139,188,175,.1)}
#tmPreview{width:100%;height:76px;flex:0 0 76px;border-radius:8px;background:var(--ut-field-bg,#181818);color:#f5f5f5;overflow:hidden}
.ut-tm-fields{display:grid;grid-template-columns:minmax(105px,1fr) minmax(95px,1fr);gap:7px 12px;align-items:center;font-size:12px;min-width:0}
.ut-tm-fields label{min-width:0;line-height:1.3}
.ut-tm-fields input:not([type=checkbox]),.ut-tm-fields select{width:100%;height:28px;min-width:0;margin:0;padding:4px 7px;font:inherit}
.ut-tm-fields input[type=color]{cursor:pointer;background:transparent;border:1px solid var(--ut-field-border,#444);border-radius:6px;padding:2px}
.ut-tm-fields input[type=checkbox]{margin:0;justify-self:start;accent-color:var(--accent,#8bbcaf)}
#tmStatus{margin:0;font-size:11px;line-height:1.4;color:var(--muted,#a6adb8);white-space:pre-line;flex-shrink:0;max-height:64px;overflow:auto}#tmStatus:empty{display:none}#tmStatus.error{color:#ff9c94}
.ut-text-marks-modal footer{display:flex;gap:8px;justify-content:space-between;flex-shrink:0;margin-top:auto}.ut-text-marks-modal footer .btn{min-width:65px}
#utFloatingContent #textMarksOverlay .ut-text-marks-modal{width:100%!important;max-width:none!important;height:calc(100vh - 16px);max-height:calc(100vh - 16px)!important}
@media(max-width:360px){.ut-text-marks-modal{padding:12px}.ut-tm-fields{grid-template-columns:minmax(95px,1fr) minmax(85px,1fr);gap:8px}.ut-tm-style{font-size:10px!important}.ut-tm-selection{flex-wrap:wrap}}

.ut-tm-modes{display:flex;align-items:center;gap:7px;flex-shrink:0}.ut-tm-modes .aa-group-toggle{min-width:54px}

/* Native: css/animation.css */
.ut-animation {display:flex;flex-direction:column;gap:12px;min-width:0;font:inherit;color:inherit}
.ut-animation * {box-sizing:border-box}
.ut-animation .ut-anim-hint {font-size:11px;line-height:1.55;opacity:.75;margin:0}
.ut-anim-presets {display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:7px}
.ut-anim-preset {display:flex!important;flex-direction:column;align-items:center;gap:7px;height:88px!important;padding:8px!important;white-space:normal!important;min-width:0!important}
.ut-anim-preset.active {border-color:var(--accent,#81b44d)!important;background:rgba(129,180,77,.12)!important}
.ut-anim-art {width:100%;height:42px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(0,0,0,.16);border-radius:4px}
.ut-motion {display:block;width:100%;height:100%;overflow:hidden;color:var(--accent,#81b44d)}
.ut-motion-track {transform-origin:0 0}
.ut-anim-box {border:1px solid var(--border,#444);border-radius:6px;padding:10px;min-width:0}
.ut-anim-box legend {font-size:12px;padding:0 5px;color:inherit}
.ut-animation .ut-anim-section {padding:0;overflow:hidden;flex-shrink:0}
.ut-animation .ut-anim-section-toggle {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;height:auto;min-height:37px;margin:0;padding:10px 12px;border:0;border-radius:5px;background:rgba(255,255,255,.025);color:inherit;font:inherit;font-size:12px;font-weight:600;text-align:left;white-space:normal;cursor:pointer}
.ut-animation .ut-anim-section-toggle:hover {background:rgba(255,255,255,.065)}
.ut-animation .ut-anim-section-toggle:focus-visible {outline:2px solid var(--accent,#81b44d);outline-offset:-3px}
.ut-anim-chevron {display:block;flex:0 0 7px;width:7px;height:7px;margin-right:3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);pointer-events:none}
.ut-anim-section-toggle[aria-expanded="true"] .ut-anim-chevron {transform:rotate(45deg);margin-top:-4px}
.ut-anim-section-content {display:flex;flex-direction:column;gap:10px;padding:12px;min-width:0;border-top:1px solid var(--border,#444)}
.ut-anim-section-content[hidden] {display:none!important}
.ut-anim-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ut-animation label {display:flex;flex-direction:column;gap:5px;font-size:11px;min-width:0}
.ut-animation label.ut-anim-check {flex-direction:row;align-items:center;gap:6px}
.ut-animation input:not([type="checkbox"]):not([type="range"]),.ut-animation select {width:100%;min-width:0;height:29px;font:inherit;border-radius:4px}
.ut-animation input[type="range"] {width:100%;min-width:0;margin:0;accent-color:var(--accent,#81b44d)}
.ut-anim-row {display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ut-anim-row input[type="text"] {flex:1;min-width:100px!important}
.ut-anim-channel {display:flex;flex-direction:column;gap:8px}
.ut-anim-channel+.ut-anim-channel {margin-top:10px;border-top:1px solid var(--border,#444);padding-top:10px}
.ut-anim-graph {height:106px;width:100%;display:block;background:rgba(0,0,0,.15);border-radius:4px}
.ut-anim-graph .grid {stroke:currentColor;opacity:.13;stroke-width:1;fill:none}
.ut-anim-graph .curve {stroke:var(--accent,#81b44d);stroke-width:2;fill:none;vector-effect:non-scaling-stroke}
.ut-anim-graph-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ut-anim-map-row {display:grid;grid-template-columns:64px 1fr;gap:7px;align-items:center;margin:10px 0}
.ut-anim-map-row>span {font-size:11px}
.ut-anim-map-range {display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ut-anim-map-bar {height:5px;background:#6664;border-radius:3px;grid-column:1 / -1;position:relative}
.ut-anim-map-bar i {position:absolute;height:5px;background:var(--accent,#81b44d);border-radius:3px}
.ut-anim-map-range label {gap:2px}
.ut-anim-stage {width:100%;height:142px;position:relative;overflow:hidden;border:1px solid var(--border,#444);border-radius:6px;background:repeating-linear-gradient(0deg,transparent 0px,transparent 27px,#8881 28px),repeating-linear-gradient(90deg,transparent 0px,transparent 27px,#8881 28px),#15191c}
.ut-anim-sprite {position:absolute;width:40px;height:40px;left:calc(50% - 20px);top:calc(50% - 20px);display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--accent,#81b44d);color:#111;font-size:13px;font-weight:700;animation-fill-mode:both}
.ut-anim-actions {position:relative;display:flex;gap:7px;padding:8px 0;background:transparent;z-index:2}
.ut-anim-actions button {flex:1;min-width:0}
.ut-anim-status {font-size:11px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;min-height:17px}
.ut-anim-status.error {color:#f4a199}
.ut-animation details>summary {cursor:pointer;font-size:12px;line-height:1.8}
.ut-animation [hidden] {display:none!important}
@media(max-width:390px){.ut-anim-grid,.ut-anim-graph-row{grid-template-columns:1fr}.ut-anim-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ut-animation-tabs {display:flex;gap:6px;margin-bottom:12px;position:relative;background:transparent;z-index:3;padding:5px 0}
.ut-animation-tabs button {flex:1;min-width:0;white-space:normal}
.ut-animation-tabs .active,.ut-text-animation button.active {border-color:var(--accent,#81b44d)!important;background:rgba(129,180,77,.14)!important}
#animationLayerBody[hidden],#animationTextBody[hidden] {display:none!important}
.ut-text-top {display:grid;grid-template-columns:minmax(132px,160px) minmax(0,1fr);gap:14px;align-items:center}
.ut-text-pad {display:grid;grid-template-columns:repeat(3,40px);grid-auto-rows:40px;gap:6px;justify-content:center}
.ut-text-pad button {display:flex!important;align-items:center;justify-content:center;width:40px!important;height:40px!important;min-width:0!important;padding:0!important;line-height:1!important;border-radius:8px!important;overflow:hidden}
.ut-text-pad button svg {display:block;flex:none;width:22px;height:22px;overflow:hidden;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ut-text-pad button circle {fill:currentColor;stroke:none}
.ut-text-pad button:focus-visible {outline:2px solid var(--accent,#81b44d);outline-offset:2px}
.ut-text-top .ut-anim-grid {grid-template-columns:1fr}
.ut-text-stage {height:128px;border:1px solid var(--border,#444);border-radius:5px;overflow:hidden;background:rgba(0,0,0,.15);margin-bottom:8px}
.ut-text-motion {width:100%;height:100%;display:block;fill:var(--accent,#81b44d);font-family:inherit;font-weight:600;overflow:hidden}
.ut-text-presets {display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px;margin:10px 0}
.ut-text-animation .ut-anim-box>.ut-anim-row {margin-top:9px}
.ut-text-animation .ut-anim-box>.ut-anim-hint {margin-top:8px}
.ut-text-animation .ut-anim-actions {flex-wrap:wrap}
.ut-text-animation .ut-anim-actions button {min-width:75px;white-space:normal;height:auto;min-height:32px;padding:6px}
@media(max-width:440px){.ut-text-top{grid-template-columns:1fr}.ut-text-pad{max-width:180px;width:100%;justify-self:center}.ut-text-top .ut-anim-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ut-text-top .ut-anim-grid>label:first-child{grid-column:1 / -1}}

/* Native select text must fit its content box in CEP and detached windows. */
.ut-animation select {height:34px;min-height:34px;padding:4px 28px 4px 8px;line-height:24px;font-size:12px;text-indent:0}
.ut-animation select option {line-height:normal;padding:4px 8px}
.ut-anim-graph-delete {margin-top:7px;width:100%;white-space:normal!important;height:auto!important;min-height:29px}

/* One bounded scroll area per tab. The transparent footer never covers inputs. */
.animation-accordion > #animationBody {
 display:flex!important;flex-direction:column!important;min-height:0;overflow:hidden!important;
 height:calc(100vh - 190px);min-width:0;
}
.app.side-ui > .animation-accordion.side-active > #animationBody,
#utFloatingContent.ut-section-window > .animation-accordion > #animationBody {
 display:flex!important;flex-direction:column!important;flex:1 1 0!important;height:auto!important;overflow:hidden!important;
}
#animationBody > .ut-animation-tabs {flex:0 0 auto;margin-bottom:8px}
#animationBody > .ut-animation {
 flex:1 1 0!important;min-height:0!important;overflow:hidden;gap:0;
}
#animationBody > .ut-animation > .ut-anim-scroll {
 flex:1 1 0!important;min-height:0;overflow-y:auto;overflow-x:hidden;
 display:flex;flex-direction:column;gap:12px;padding:0 4px 12px 0;
}
.ut-anim-scroll > * {flex-shrink:0;min-width:0}
#animationBody > .ut-animation > .ut-anim-dock {
 flex:0 0 auto;display:flex;flex-direction:column;gap:6px;min-width:0;padding-top:6px;
 background:transparent!important;border:0!important;box-shadow:none!important;
}
.ut-anim-dock .ut-anim-actions {flex:0 0 auto;padding:4px 0 0;margin:0;background:transparent!important;border:0!important;box-shadow:none!important;flex-wrap:nowrap}
.ut-anim-dock .ut-anim-actions button {min-width:0;min-height:32px}
.ut-anim-dock .ut-anim-status {max-height:38px;min-height:0;overflow:auto}
.ut-anim-dock .ut-anim-status:empty {display:none}
.ut-animation .ut-anim-preview-section {position:relative}
.ut-anim-preview-header {display:flex;align-items:center;gap:10px;min-width:0;min-height:42px}
.ut-animation .ut-anim-preview-header > .ut-anim-section-toggle {flex:1 1 auto;width:auto;min-width:0;gap:6px}
.ut-anim-preview-header .ut-anim-chevron {display:none}
.ut-animation .ut-anim-pin {position:relative;flex:0 0 auto;margin:5px 7px 5px 0;min-height:27px;height:27px;padding:4px 7px;font-size:10px;max-width:102px}
.ut-animation .ut-anim-pin[aria-pressed="true"] {border-color:var(--accent,#81b44d)}
.ut-anim-pinned > .ut-anim-section-content {padding:7px;gap:6px}
.ut-anim-pinned .ut-anim-hint {display:none}
.ut-anim-pinned .ut-anim-stage,.ut-anim-pinned .ut-text-stage {height:clamp(65px,18vh,142px);margin:0}
.ut-anim-pinned #animPreview,.ut-anim-pinned #textAnimPreview {min-height:25px;height:25px;padding:3px 6px;font-size:10px}
@media(max-height:540px){.ut-anim-pinned .ut-anim-stage,.ut-anim-pinned .ut-text-stage{height:65px}.ut-anim-dock .ut-anim-status{max-height:18px}}