/* components.css — UI components, layout, animations
   Dark mode overrides for component-specific styles are co-located here.
   Global dark mode tokens → theme.css
   ---------------------------------------------------------------- */
@keyframes qe-spin { to { transform: rotate(360deg); } }
.qe-gen-spinner {
  will-change: transform;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: var(--txt);
  display: inline-block;
  animation: qe-spin .7s linear infinite;
  flex-shrink: 0;
}
.qe-generate-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none !important;
}

.qe-copy-btn {
  transition: all var(--dur-base) var(--spring) !important;
}

#qe-custom-input-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
#qe-custom-input-overlay.show { opacity: 1; pointer-events: auto; }
#qe-custom-input-overlay.show .qe-custom-input-box { transform: translateY(0) scale(1); opacity: 1; }
.qe-custom-input-box {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--r20); padding: 0;
  width: 100%; max-width: 320px;
  transform: translateY(6px) scale(.99); opacity: 0;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.qe-custom-input-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.qe-custom-input-title { font-size: 14px; font-weight: 800; color: var(--txt); }
.qe-custom-input-close {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border2);
  background: transparent; color: var(--txt3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: all var(--dur-fast);
}
.qe-custom-input-close:hover { background: rgba(0,0,0,.07); color: var(--txt); }
.qe-custom-input-body { padding: 16px 18px 18px; }
.qe-custom-input-label {
  font-size: 10.5px; font-weight: 700; color: var(--txt3);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 7px; display: block;
}
.qe-custom-input-field {
  width: 100%; padding: 10px 13px;
  border-radius: var(--r8); border: 1.5px solid var(--border2);
  background: rgba(0,0,0,.03); color: var(--txt);
  font-size: 14px; font-family: inherit; outline: none; transition: border-color var(--dur-base);
}
.qe-custom-input-field:focus { border-color: var(--border3); }
.qe-custom-input-actions { display: flex; gap: 8px; margin-top: 14px; }


#qe-generate-btn.qe-gen-sticky {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.15) !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  /* Android: geser ke atas keyboard menggunakan CSS env jika tersedia */
  bottom: env(keyboard-inset-height, 0px);
}

/* Desktop sticky mode active above. Mobile @media (max-width:600px) below resets to static. */

@keyframes pageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.qe-active-tpl-banner {
  display: none;
  align-items: center; gap: 12px;
  padding: 12px 16px 12px 18px;
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: var(--r12);
  margin-bottom: 12px;
  animation: tplBannerIn .3s var(--spring);
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

@keyframes tplBannerIn {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tplNameSwap {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes tplIconSwap {
  0%   { opacity: 0; transform: scale(.6) rotate(-15deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.qe-active-tpl-name.name-anim { animation: tplNameSwap .25s cubic-bezier(.34,1.56,.64,1); }
.qe-active-tpl-icon.icon-anim { animation: tplIconSwap .28s cubic-bezier(.34,1.56,.64,1); }
.qe-active-tpl-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
.qe-active-tpl-info { flex: 1; min-width: 0; }
.qe-active-tpl-name {
  font-size: 13.5px; font-weight: 700; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.2px; line-height: 1.25;
}
.qe-banner-lock-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0; line-height: 1;
  filter: none !important; opacity: 1 !important;
  color: initial;
  font-style: normal;
  vertical-align: middle;
}
.qe-active-tpl-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.qe-active-tpl-open-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: var(--r8);
  background: rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.14);
  color: rgba(0,0,0,.65); font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base) var(--spring); white-space: nowrap;
  letter-spacing: .1px;
}
.qe-active-tpl-open-btn:hover {
  background: rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.22);
  color: var(--txt);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: var(--topbar-h);
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid rgba(0,0,0,.09);
  transform: translateZ(0);
  display: flex; align-items: center; padding: 0 12px; gap: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.07);
}
.topbar-left { display: flex; align-items: center; gap: 6px; flex: 1; flex-shrink: 0; }
.topbar-right { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: flex-end; flex-shrink: 0; }
.topbar-brand { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; text-decoration: none; }
.topbar-logo-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  transition: transform var(--dur-base) var(--spring), box-shadow var(--dur-base) var(--spring); flex-shrink: 0;
}
.topbar-brand:hover .topbar-logo-icon { transform: rotate(-5deg) scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.topbar-brand-text {
  font-size: 15px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--txt); font-family: var(--font-sans); font-style: normal;
}
.topbar-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
  border-radius: var(--r8);
  background: var(--bg3);
  border: 1px solid transparent;
  transition: border-color var(--dur-base), background var(--dur-base), width var(--dur-base) cubic-bezier(.4,0,.2,1), flex var(--dur-base) cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  flex-shrink: 0;
}
.topbar-search:focus-within {
  border-color: var(--border2);
  background: var(--bg2);
}

.topbar-search-icon {
  position: absolute;
  left: 9px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
  color: var(--txt3); opacity: .6;
  display: flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0; z-index: 2;
}

.topbar-search input {
  flex: 1; min-width: 0; width: 100%;
  height: 34px; background: transparent;
  border: none; padding: 0 10px 0 30px;
  font-size: 16px; font-weight: 500;
  letter-spacing: -.1px; color: var(--txt);
  font-family: inherit;
}
.topbar-search input::placeholder { color: var(--txt3); font-weight: 500; }

@media (min-width: 769px) {
  .topbar-left  { flex: 0 0 auto !important; }
  .topbar-right { flex: 0 0 auto !important; }

  .topbar-search {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0 16px;
    cursor: text;
  }
  .topbar-search:hover {
    border-color: var(--border);
    background: var(--bg4);
  }
  .topbar-search.tb-search-expanded-desktop {
    flex: 1 1 0;
    width: auto;
    border-color: var(--border2);
    background: var(--bg2);
  }

  #tb-search-icon-mobile { display: none !important; }
}

#tb-search-icon-mobile { display: none; } .tb-search-dd {
  display: none; position: fixed; top: 52px; left: 50%; transform: translateX(-50%);
  width: min(480px, 96vw);
  background: var(--bg2); border: 1px solid rgba(0,0,0,.10); border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden; z-index: 9999; max-height: 380px; overflow-y: auto;
}
.tb-search-dd.open { display: block; }
.tb-search-dd::-webkit-scrollbar { width: 0; }
.tb-search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer; transition: background var(--dur-fast);
  border-radius: 0;
}
.tb-search-item:hover, .tb-search-item.active { background: var(--bg4); }
.tb-search-item-icon { font-size: 15px; flex-shrink: 0; width: 22px; text-align: center; }
.tb-search-item-body { flex: 1; min-width: 0; }
.tb-search-item-name { font-size: 12.5px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-search-item-sub { font-size: 10.5px; color: var(--txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.tb-search-empty { padding: 20px 14px; text-align: center; color: var(--txt3); font-size: 12px; }

.tb-btn,
#tb-search-icon-mobile,
.hamburger {
  width: 32px; height: 32px;
  border-radius: var(--r8);
  border: none; background: transparent;
  color: var(--txt3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.tb-btn:hover,
#tb-search-icon-mobile:hover {
  background: var(--bg4);
  color: var(--txt2);
}
.tb-btn.active-fullview,
.tb-btn.tb-btn--active,
#tb-rp-btn.active-fullview {
  background: var(--bg5);
  color: var(--txt);
}
.hamburger {
  flex-direction: column; gap: 4.5px;
  padding: 0;
}
.hamburger:hover { background: var(--bg4); }
.hamburger.nav-hidden { opacity: .38; }

.main-layout { display: flex; min-height: 100vh; padding-top: var(--topbar-h); }

.left-nav {
  width: var(--nav-w); min-width: var(--nav-w);
  height: calc(100vh - var(--topbar-h));
  position: fixed; top: var(--topbar-h); left: 0;
  background: var(--bg2); border-right: 1px solid rgba(0,0,0,.07);
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  z-index: 200;
  transition: transform var(--dur-base) var(--ease);
  transform: translate3d(0,0,0);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.left-nav::-webkit-scrollbar { width: 0; }
.nav-profile { padding: 18px 14px 14px; border-bottom: 1px solid var(--border); }
.nav-profile-inner { display: flex; align-items: center; gap: 11px; }
.nav-avatar-ring {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ui-muted), var(--txt3)); padding: 1.5px;
  cursor: pointer; transition: box-shadow var(--dur-base);
}
.nav-avatar-ring:hover { box-shadow: 0 0 0 3px rgba(0,0,0,.10); }
.nav-avatar-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: rgba(0,0,0,.75);
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
}
.nav-profile-name { font-size: 15px; font-weight: 800; color: var(--txt); margin-bottom: 3px; cursor: pointer; letter-spacing: -.5px; line-height: 1.2; font-family: var(--font-sans); font-style: normal; }
.nav-profile-name:hover { color: var(--txt2); }
.nav-profile-handle { font-size: 10.5px; color: var(--txt3); font-family: var(--font-mono); letter-spacing: .1px; }

.qnote-wrap {
  margin-top: 10px;
  border-radius: var(--r12);
  background: var(--bg2);
  border: 1px solid var(--border2);
  overflow: hidden;
  transition: border-color var(--dur-base);
}
.qnote-header {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px 7px 11px;
  cursor: pointer; user-select: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base), background var(--dur-base);
  background: #F7F7F7;
}
.qnote-wrap:not(.qnote-minimized) .qnote-header { border-bottom-color: rgba(0,0,0,.07); }
.qnote-header:hover { background: #EFEFEF; }
.qnote-macos-dots { display: flex; gap: 5px; flex-shrink: 0; align-items: center; }
.qnote-dot {
  width: 9px; height: 9px; border-radius: 50%;
  opacity: 1; flex-shrink: 0;
  cursor: pointer; transition: transform var(--dur-base) var(--spring), filter var(--dur-base);
}
.qnote-dot:hover { transform: scale(1.25); filter: brightness(1.15); }
.qnote-dot:active { transform: scale(.9); }
.qnote-dot-r { background: #ff5f57; }
.qnote-dot-y { background: #febc2e; }
.qnote-dot-g { background: var(--success); }

.qnote-wrap.qnote-expanded {
  position: fixed !important;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  max-width: calc(100vw - 48px);
  margin: 0 !important; z-index: 201 !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.14), 0 2px 16px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.18);
  animation: qnoteExpandIn var(--dur-base) var(--ease) !important;
}
.qnote-wrap.qnote-expanded .qnote-body { height: 340px !important; }
@keyframes qnoteExpandIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
#qnote-expand-backdrop {
  display: none; position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,.20); animation: pageIn .2s var(--ease);
  left: var(--nav-w);
}
#qnote-expand-backdrop.show { display: block; }

.qnote-title-area { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.qnote-title-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--txt2); font-family: var(--font-mono); line-height: 1;
}
.qnote-counter { font-size: 8px; font-weight: 600; color: var(--txt3); font-family: var(--font-mono); line-height: 1; }
.qnote-chevron { font-size: 9px; color: var(--txt3); transition: transform var(--dur-base) var(--ease); flex-shrink: 0; line-height: 1; }
.qnote-minimized .qnote-chevron { transform: rotate(-90deg); }

.qnote-body {
  height: 148px;
  overflow: hidden;
  transition: height var(--dur-base) var(--ease), opacity var(--dur-base);
  display: flex; flex-direction: column;
}
.qnote-minimized .qnote-body { height: 0; opacity: 0; pointer-events: none; }

.qnote-textarea {
  flex: 1;
  width: 100%; resize: none;
  background: transparent; border: none; outline: none;
  color: var(--txt); font-size: 11px; line-height: 1.6;
  font-family: var(--font-sans);
  padding: 9px 11px 4px;
  caret-color: var(--txt);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-appearance: none;
  box-shadow: none;
}
.qnote-textarea::placeholder { color: var(--txt3); font-style: italic; }
.qnote-textarea:focus { outline: none; box-shadow: none; border: none; }
.qnote-textarea::-webkit-scrollbar { width: 3px; }
.qnote-textarea::-webkit-scrollbar-track { background: transparent; }
.qnote-textarea::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.qnote-preview {
  flex: 1;
  width: 100%;
  background: transparent; border: none; outline: none;
  color: var(--txt); font-size: 11px; line-height: 1.6;
  font-family: var(--font-sans);
  padding: 9px 11px 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 0;
}
.qnote-preview::-webkit-scrollbar { width: 3px; }
.qnote-preview::-webkit-scrollbar-track { background: transparent; }
.qnote-preview::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }
.qnote-preview-empty { color: var(--txt3); font-style: italic; }

.qnote-nav-row {
  display: flex; align-items: center;
  padding: 4px 6px 6px;
  flex-shrink: 0; gap: 4px;
}
.qnote-nav-arrow {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.09);
  color: var(--txt3);
  -webkit-text-fill-color: var(--txt3);
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--dur-base); user-select: none;
  -webkit-appearance: none; appearance: none;
}
.qnote-nav-arrow:hover { background: rgba(0,0,0,.09); border-color: rgba(0,0,0,.16); color: var(--txt) !important; -webkit-text-fill-color: var(--txt); }
.qnote-nav-arrow:active { transform: scale(.9); }
.qnote-nav-arrow:disabled { opacity: .2; cursor: default; }
.qnote-dots-row { display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1; }
.qnote-slide-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(0,0,0,.18);
  cursor: pointer;
  transition: background var(--dur-base), transform var(--dur-base), width var(--dur-base);
  flex-shrink: 0;
}
.qnote-slide-dot:hover { background: rgba(0,0,0,.40); transform: scale(1.3); }
.qnote-slide-dot.active { background: rgba(0,0,0,.70); width: 14px; border-radius: 99px; }
.qnote-slide-dot.has-content { background: rgba(0,0,0,.30); }
.qnote-slide-dot.has-content.active { background: rgba(0,0,0,.80); }

.qnote-link {
  color: #0077CC;
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
  transition: color var(--dur-base), background var(--dur-base);
  word-break: break-all;
  pointer-events: auto;
}
.qnote-link:hover { color: #005FA3; background: rgba(0,119,204, 0.07); }
.nav-section { padding: 2px 8px; }
.nav-section-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(0,0,0,.28);
  padding: 10px 4px 4px; display: flex; align-items: center; gap: 7px;
}
.nav-section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.nav-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px;
  border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 500;
  color: var(--txt2) !important; transition: background .1s, color .1s, border-color .1s; margin-bottom: 1px;
  user-select: none; position: relative; letter-spacing: -.1px; min-height: 30px;
  border: 1px solid transparent;
}
.nav-item .ni-icon {
  font-size: 13px; width: 18px; height: 18px; text-align: center; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .55; transition: opacity .1s; color: currentColor;
}
.nav-item .ni-icon svg { display: block; }
.nav-item .ni-label { flex: 1; font-weight: 500; font-size: 12px; color: inherit; }
.nav-item .ni-badge { font-size: 8.5px; font-weight: 600; padding: 1px 5px; border-radius: var(--r99); background: rgba(0,0,0,.06); color: var(--txt3); }
.nav-item .nav-item-chevron { font-size: 12px; color: rgba(0,0,0,.18); line-height: 1; flex-shrink: 0; }
.nav-item:hover { background: rgba(0,0,0,.05) !important; color: var(--txt) !important; border-color: rgba(0,0,0,.07) !important; }
.nav-item:hover .ni-icon { opacity: .80; }
.nav-item.active {
  background: rgba(0,0,0,.07);
  color: var(--txt);
  border: 1px solid rgba(0,0,0,.10); border-radius: 7px;
  font-weight: 600;
}
.nav-item.active .ni-label { font-weight: 600; color: var(--txt) !important; }
.nav-item.active .ni-icon { opacity: 1 !important; color: var(--txt) !important; }
.nav-item.active .nav-item-chevron { color: rgba(0,0,0,.35); }

#nav-lib-toggle-btn {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px;
  border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 500;
  color: var(--txt2); transition: background .1s, color .1s, border-color .1s;
  user-select: none; min-height: 30px; position: relative; margin-bottom: 1px;
  letter-spacing: -.1px; border: 1px solid transparent;
}
#nav-lib-toggle-btn:hover { background: rgba(0,0,0,.05); color: var(--txt); border-color: rgba(0,0,0,.07); }
#nav-lib-toggle-btn:hover .ni-icon { opacity: .80; }
#nav-lib-toggle-btn .ni-icon {
  font-size: 13px; width: 18px; height: 18px; text-align: center; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; opacity: .55; color: currentColor;
}
#nav-lib-toggle-btn .ni-icon svg { display: block; }
#nav-lib-toggle-btn .ni-label { flex: 1; font-weight: 500; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nav-lib-toggle-btn .ni-badge { font-size: 8.5px; font-weight: 600; padding: 1px 5px; border-radius: var(--r99); background: rgba(0,0,0,.06); color: var(--txt3); flex-shrink: 0; }
#nav-lib-toggle-btn .nav-lib-toggle-chev {
  display: none;
}

#nav-lib-open-btn {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.10); background: transparent;
  color: rgba(0,0,0,.32); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; transition: all var(--dur-fast); line-height: 1;
  padding: 0; box-sizing: border-box;
}
#nav-lib-open-btn:hover { background: rgba(0,0,0,.07); color: rgba(0,0,0,.65); border-color: rgba(0,0,0,.18); }

.feed-col {
  flex: 1; margin-left: var(--nav-w); margin-right: var(--rp-w);
  min-width: 0; overflow-y: auto; overflow-x: hidden;
  min-height: calc(100vh - var(--topbar-h));
  transition: margin var(--dur-base) var(--ease);
}
.page { padding: 24px; animation: pageIn var(--dur-base) var(--ease); contain: layout style paint; }

.right-panel {
  width: var(--rp-w); min-width: var(--rp-w);
  height: calc(100vh - var(--topbar-h));
  position: fixed; top: var(--topbar-h); right: 0;
  background: var(--bg2); border-left: 1px solid rgba(0,0,0,.07);
  overflow-y: auto; overflow-x: hidden;
  transition: transform var(--dur-base) var(--ease);
  transform: translate3d(0,0,0);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scroll-behavior: auto;
  contain: layout style paint;
  pointer-events: auto;
}
.right-panel::-webkit-scrollbar { width: 0; }
.rp-divider { height: 0.5px; background: rgba(0,0,0,.07); margin: 2px 0; }

.rp-section { padding: 14px 14px; }
.rp-title { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--txt3); margin-bottom: 10px; }

body.left-nav-hidden .left-nav { transform: translateX(-100%); }
body.left-nav-hidden .feed-col { margin-left: 0 !important; }
body.right-panel-hidden .right-panel { transform: translateX(100%); }
body.right-panel-hidden .feed-col { margin-right: 0 !important; }
.tb-btn.nav-hidden { opacity: .38; }

body.fullview .left-nav { transform: translateX(-100%); }
body.fullview .right-panel { transform: translateX(100%); }
body.fullview .feed-col { margin-left: 0 !important; margin-right: 0 !important; }

#fullview-overlay {
  position: fixed; inset: 0; z-index: 49;
  opacity: 0; visibility: hidden;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease),
  visibility var(--dur-base) var(--ease);
  left: 0; right: 0;
}
#fullview-overlay.show { opacity: 1; visibility: visible; }

body.fullview .left-nav {
  z-index: 51 !important;
  filter: none !important;
  opacity: 1;
}

@keyframes posBlinkDot {
  0%, 100% { opacity: 1; }
  40%       { opacity: .2; }
  50%       { opacity: 0; }
}

.ctr-storage-meter {
  border: 1px solid var(--border);
  border-radius: var(--r12);
  background: var(--bg2);
  padding: 13px 14px;
  margin-bottom: 8px;
  transition: border-color var(--dur-base);
}
.ctr-storage-meter:hover { border-color: var(--border2); }
.ctr-sm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ctr-sm-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--txt3);
  font-family: var(--font-mono);
}
.ctr-sm-icon { font-size: 12px; }
.ctr-sm-used-label {
  font-size: 10.5px; font-weight: 700;
  color: var(--txt3);
  font-family: var(--font-mono);
}
.ctr-sm-used-label span { color: var(--txt2); }

.ctr-sm-bar {
  height: 100%; border-radius: 99px;
  background: rgba(0,0,0,.22);
  min-width: 0;
  position: relative;
  overflow: visible;
  transition: background .4s;
}

.ctr-sm-bar[data-level="warn"]     { background: rgba(255,185,50,.85); }
.ctr-sm-bar[data-level="critical"] { background: rgba(255,75,50,.90); }

.ctr-sm-track {
  width: 100%; height: 6px; border-radius: 99px;
  background: var(--bg5);
  border: 1px solid var(--border);
  overflow: hidden; margin-bottom: 10px;
  position: relative;
}

@keyframes ctrPctPop {
  0%   { transform: scale(1);    opacity: .5; }
  40%  { transform: scale(1.15); opacity: 1;  }
  70%  { transform: scale(.97);  }
  100% { transform: scale(1);    }
}
.ctr-sm-pct-animating { display: inline-block; animation: ctrPctPop .55s cubic-bezier(.34,1.56,.64,1) forwards; }

@keyframes ctrRowIn {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ctr-sm-row-animate { animation: ctrRowIn .35s var(--ease) both; }

@keyframes ctrTrackGlowLight {
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,.14); }
  40%  { box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,.0); }
}
.ctr-sm-track.animating { animation: ctrTrackGlowLight 1.6s ease forwards; }

.ctr-sm-refresh.spinning { pointer-events: none; }

.ctr-sm-breakdown {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  padding: 8px 10px;
  background: var(--bg3);
  border-radius: var(--r8);
  border: 1px solid var(--border);
  margin-bottom: 2px;
}
.ctr-sm-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; color: var(--txt2); }
.ctr-sm-row-label {
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
}
.ctr-sm-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: rgba(0,0,0,.28); }
.ctr-sm-row-val { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--txt); flex-shrink: 0; }
.ctr-sm-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--border);
}
.ctr-sm-quota-info { font-size: 9.5px; color: var(--txt3); font-family: var(--font-mono); }
.ctr-sm-quota-info strong { color: var(--txt2); }
.ctr-sm-refresh {
  font-size: 10px; font-weight: 700; color: var(--txt3);
  background: none; border: 1px solid var(--border2);
  border-radius: var(--r8); padding: 3px 9px;
  cursor: pointer; transition: all var(--dur-base);
}
.ctr-sm-refresh:hover { border-color: var(--border3); color: var(--txt2); background: var(--bg3); }

.ctr-sm-alert {
  display: none; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  padding: 6px 10px; border-radius: var(--r8);
  margin-top: 9px;
}
.ctr-sm-alert.warn { display:flex; background:rgba(255,185,50,.10); border:1px solid rgba(255,185,50,.22); color:#ffb932; }
.ctr-sm-alert.critical { display:flex; background:rgba(255,75,50,.10); border:1px solid rgba(255,75,50,.22); color:#ff6050; }

.qe-lib-storage-bar {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 9px 18px 10px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg3);
}
.qe-lib-sm-label {
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--txt3); white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-mono);
}
.qe-lib-sm-track { flex: 1; height: 4px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; position: relative; }
.qe-lib-sm-fill {
  height: 100%; border-radius: 99px; width: 0%;
  background: rgba(60,60,67,.55);
  transition: width .45s cubic-bezier(.4,0,.2,1), background .3s;
}
.qe-lib-sm-fill[data-level="warn"]     { background: rgba(255,185,50,.85); }
.qe-lib-sm-fill[data-level="critical"] { background: rgba(255,75,50,.90); }
.qe-lib-sb-fill[data-level="warn"]     { background: rgba(255,185,50,.85); }
.qe-lib-sb-fill[data-level="critical"] { background: rgba(255,75,50,.90); }
.qe-lib-sm-nums { font-size: 10px; font-weight: 600; color: var(--txt3); font-family: var(--font-mono); white-space: nowrap; flex-shrink: 0; }
.qe-lib-sm-nums span { color: var(--txt2); }
.qe-lib-sm-link {
  font-size: 10px; font-weight: 700; color: var(--txt3); cursor: pointer;
  padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border2);
  background: transparent; transition: all var(--dur-fast); white-space: nowrap; flex-shrink: 0;
  letter-spacing: .2px;
}
.qe-lib-sm-link:hover { background: var(--bg4); color: var(--txt2); border-color: var(--border3); }

.ctr-mgmt-panel {
  border: 1px solid var(--border);
  border-radius: var(--r12);
  background: var(--bg2);
  overflow: hidden;
  margin-bottom: 8px;
}
.ctr-mgmt-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast);
}
.ctr-mgmt-row:last-child { border-bottom: none; }
.ctr-mgmt-row:hover { background: var(--bg3); }
.ctr-mgmt-icon { font-size: 15px; flex-shrink: 0; width: 22px; text-align: center; }
.ctr-mgmt-info { flex: 1; min-width: 0; }
.ctr-mgmt-label { font-size: 12px; font-weight: 700; color: var(--txt); display: flex; align-items: center; gap: 7px; }
.ctr-mgmt-sublabel { font-size: 10px; color: var(--txt3); margin-top: 2px; line-height: 1.4; }
.ctr-mgmt-sublabel strong { color: var(--txt2); font-weight: 600; }
.ctr-mgmt-badge {
  font-size: 9.5px; font-weight: 800;
  font-family: var(--font-mono);
  color: var(--txt3);
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--r99);
  padding: 2px 8px;
  flex-shrink: 0;
}
.ctr-mgmt-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.ctr-mgmt-slider-wrap { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--txt3); }
.ctr-mgmt-slider {
  -webkit-appearance: none; appearance: none;
  width: 90px; height: 4px;
  border-radius: 99px;
  background: var(--bg5);
  cursor: pointer; outline: none;
}
.ctr-mgmt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--txt2);
  border: 2px solid var(--bg2);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  cursor: pointer;
}
.ctr-mgmt-slider-val {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800;
  color: var(--txt2); min-width: 28px; text-align: right;
}

.ctr-mgmt-clear-btn {
  padding: 4px 11px; border-radius: var(--r8);
  background: rgba(255,60,40,.07);
  border: 1px solid rgba(255,60,40,.18);
  color: #e86050;
  font-size: 10px; font-weight: 800; cursor: pointer;
  transition: all var(--dur-base) var(--spring);
  white-space: nowrap;
}
.ctr-mgmt-archive-btn {
  background: rgba(255,180,30,.10);
  color: #8A6800;
  border-color: rgba(255,180,30,.30);
}
.ctr-mgmt-archive-btn:hover { background: rgba(255,180,30,.18); border-color: rgba(255,180,30,.45); }
.ctr-mgmt-clear-btn:hover {
  background: rgba(255,60,40,.14);
  border-color: rgba(255,60,40,.35);
  color: #ff6050;
  transform: translateY(-1px);
}

.ctr-sweep-panel {
  border: 1px solid var(--border2);
  border-radius: var(--r12);
  overflow: hidden;
  background: var(--bg2);
  margin-bottom: 8px;
}
.ctr-sweep-header {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: rgba(217,48,37,.04);
  border-bottom: 1px solid rgba(217,48,37,.10);
  cursor: pointer; user-select: none;
  transition: background var(--dur-fast);
}
.ctr-sweep-header:hover { background: rgba(217,48,37,.08); }
.ctr-sweep-header-icon { font-size: 15px; flex-shrink: 0; }
.ctr-sweep-header-body { flex: 1; min-width: 0; }
.ctr-sweep-header-title { font-size: 12px; font-weight: 800; color: var(--danger); margin-bottom: 1px; letter-spacing: -.1px; }
.ctr-sweep-header-sub { font-size: 10.5px; color: var(--txt3); line-height: 1.4; }
.ctr-sweep-chev {
  font-size: 10px; color: rgba(217,48,37,.5); transition: transform var(--dur-base) var(--ease);
  flex-shrink: 0;
}
.ctr-sweep-panel.open .ctr-sweep-chev { transform: rotate(90deg); }
.ctr-sweep-body { display: none; padding: 12px 14px; border-top: 1px solid rgba(217,48,37,.10); }
.ctr-sweep-panel.open .ctr-sweep-body { display: block; }
.ctr-sweep-scan-btn {
  width: 100%; padding: 9px 14px; border-radius: var(--r8);
  border: 1.5px solid rgba(217,48,37,.30);
  background: transparent; color: var(--danger);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all var(--dur-base); display: flex; align-items: center;
  justify-content: center; gap: 7px;
  font-family: inherit;
}
.ctr-sweep-scan-btn:hover { background: rgba(217,48,37,.08); border-color: rgba(217,48,37,.55); }
.ctr-sweep-scan-btn:active { transform: scale(.98); }
.ctr-sweep-result { margin-top: 11px; }
.ctr-sweep-empty {
  padding: 14px; text-align: center;
  font-size: 11.5px; color: var(--txt3);
  background: var(--bg3); border-radius: var(--r8);
  border: 1px solid var(--border);
}
.ctr-sweep-empty strong { color: var(--success); display: block; font-size: 13px; margin-bottom: 3px; }
.ctr-sweep-list { display: flex; flex-direction: column; gap: 4px; }
.ctr-sweep-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r8);
  background: var(--bg2); border: 1px solid var(--border2);
  transition: background var(--dur-fast);
}
.ctr-sweep-item:hover { background: rgba(217,48,37,.04); }
.ctr-sweep-item-chk {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--border2); flex-shrink: 0;
  cursor: pointer; accent-color: var(--danger);
}
.ctr-sweep-item-key {
  flex: 1; min-width: 0;
  font-family: var(--font-mono);
  font-size: 10px; color: var(--txt2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctr-sweep-item-size { font-size: 9.5px; color: var(--txt3); flex-shrink: 0; font-family: var(--font-mono); }
.ctr-sweep-item-del {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid rgba(217,48,37,.25); background: transparent;
  color: var(--danger); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-base); font-family: inherit;
}
.ctr-sweep-item-del:hover { background: rgba(217,48,37,.10); border-color: var(--danger); }
.ctr-sweep-actions { display: flex; gap: 7px; margin-top: 10px; }
.ctr-sweep-del-sel {
  flex: 1; padding: 8px 12px; border-radius: var(--r8);
  border: 1.5px solid rgba(217,48,37,.35);
  background: transparent; color: var(--danger);
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: all var(--dur-base); font-family: inherit;
}
.ctr-sweep-del-sel:hover { background: rgba(217,48,37,.08); border-color: var(--danger); }
.ctr-sweep-del-sel:disabled { opacity: .38; cursor: default; }
.ctr-sweep-del-all {
  flex: 1; padding: 8px 12px; border-radius: var(--r8);
  border: none; background: var(--danger);
  color: #fff; font-size: 11.5px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base); font-family: inherit;
}
.ctr-sweep-del-all:hover { background: #b5271f; }
.ctr-sweep-del-all:disabled { opacity: .38; cursor: default; }
.ctr-sweep-summary { margin-bottom: 9px; font-size: 10.5px; color: var(--txt3); display: flex; align-items: center; justify-content: space-between; }
.ctr-sweep-summary strong { color: var(--danger); }
.ctr-sweep-chk-all { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--txt3); cursor: pointer; }
.ctr-sweep-chk-all input { accent-color: var(--danger); }

.ctr-sweep-orphan-section { margin-top: 14px; }
.ctr-sweep-orphan-title {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(0,0,0,.28); margin-bottom: 7px; font-family: var(--font-mono);
}
.ctr-sweep-orphan-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r8);
  background: rgba(255,180,30,.07); border: 1px solid rgba(255,180,30,.22);
  margin-bottom: 5px; cursor: pointer; transition: background var(--dur-fast);
}
.ctr-sweep-orphan-row:hover { background: rgba(255,180,30,.14); }
.ctr-sweep-orphan-icon { font-size: 13px; flex-shrink: 0; }
.ctr-sweep-orphan-name { flex: 1; font-size: 11.5px; font-weight: 600; color: var(--txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctr-sweep-orphan-badge {
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: 99px; background: rgba(255,160,0,.18);
  color: #b06000; flex-shrink: 0;
}
.ctr-sweep-orphan-del {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid rgba(217,48,37,.25); background: transparent;
  color: var(--danger); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-base); font-family: inherit;
}
.ctr-sweep-orphan-del:hover { background: rgba(217,48,37,.10); border-color: var(--danger); }

.ctr-mgmt-divider {
  padding: 5px 16px 4px;
  font-size: 8px; font-weight: 900; letter-spacing: 2px;
  text-transform: uppercase; color: var(--txt3);
  background: var(--bg3); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}

.ctr-storage-meter { padding: 9px 12px !important; }
.ctr-sm-header { margin-bottom: 5px !important; }
.ctr-sm-title { font-size: 8px !important; letter-spacing: 1.4px !important; gap: 5px !important; }
.ctr-sm-icon { font-size: 10px !important; }
.ctr-sm-used-label { font-size: 9px !important; }
.ctr-sm-track { height: 3px !important; margin-bottom: 5px !important; }
.ctr-sm-breakdown {
  gap: 1px 8px !important; padding: 5px 8px !important;
  margin-bottom: 0 !important;
}
.ctr-sm-row { font-size: 9px !important; }
.ctr-sm-row-label { gap: 4px !important; font-size: 9px !important; }
.ctr-sm-dot { width: 5px !important; height: 5px !important; }
.ctr-sm-row-val { font-size: 8.5px !important; }
.ctr-sm-footer { margin-top: 5px !important; padding-top: 5px !important; }
.ctr-sm-quota-info { font-size: 8.5px !important; }
.ctr-sm-refresh { font-size: 9px !important; padding: 2px 7px !important; }

.ctr-mgmt-panel { margin-bottom: 6px !important; }
.ctr-mgmt-divider { padding: 4px 12px 3px !important; font-size: 7.5px !important; letter-spacing: 1.5px !important; }
.ctr-mgmt-row { padding: 7px 12px !important; gap: 9px !important; }
.ctr-mgmt-icon { font-size: 12px !important; width: 18px !important; }
.ctr-mgmt-label { font-size: 11px !important; gap: 6px !important; }
.ctr-mgmt-sublabel { font-size: 9px !important; margin-top: 1px !important; }
.ctr-mgmt-badge { font-size: 8.5px !important; padding: 1px 6px !important; }
.ctr-mgmt-slider { width: 70px !important; }
.ctr-mgmt-slider-val { font-size: 9px !important; min-width: 22px !important; }
.ctr-mgmt-clear-btn { padding: 3px 9px !important; font-size: 9px !important; }
.ctr-sweep-panel { margin-bottom: 6px !important; }
.ctr-sweep-header { padding: 8px 12px !important; gap: 8px !important; }
.ctr-sweep-header-icon { font-size: 12px !important; }
.ctr-sweep-header-title { font-size: 11px !important; margin-bottom: 0 !important; }
.ctr-sweep-header-sub { font-size: 9px !important; }

.pos-ab-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.pos-ab-row:last-child { border-bottom: none; }
.pos-ab-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ui-muted); flex-shrink: 0; transition: background .3s;
}
.pos-ab-label { flex: 1; font-size: 11px; font-weight: 700; color: var(--txt); }
.pos-ab-sub { font-size: 9.5px; color: var(--txt3); }
.pos-ab-btn-sm {
  padding: 4px 11px; border-radius: 99px; border: 1px solid var(--border2);
  background: transparent; color: var(--txt2); font-size: 10px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-fast); white-space: nowrap; flex-shrink: 0;
  font-family: inherit;
}
.pos-ab-btn-sm:hover { border-color: var(--border3); background: var(--bg3); color: var(--txt); }
.pos-ab-gear {
  width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border);
  background: transparent; color: var(--txt3); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast); flex-shrink: 0;
}
.pos-ab-gear:hover { background: var(--bg3); color: var(--txt2); }
.pos-ab-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pos-ab-chip {
  padding: 3px 9px; border-radius: 99px; border: 1px solid var(--border);
  background: transparent; color: var(--txt3); font-size: 10px; font-weight: 600;
  cursor: pointer; transition: all var(--dur-fast); font-family: inherit; white-space: nowrap;
}
.pos-ab-chip:hover { border-color: var(--border3); color: var(--txt2); }
.pos-ab-chip.active { background: var(--txt); color: #fff; border-color: var(--txt); }
.funnel-card { margin-bottom: 4px; border-radius: var(--r8); overflow: clip; border: 0.5px solid rgba(0,0,0,.09); transition: border-color .12s, background .12s; background: var(--bg2); contain: layout style; }
.funnel-card:hover { border-color: rgba(0,0,0,.18); }
.funnel-card.funnel-card-open { border: 1.5px solid rgba(0,0,0,.28); background: var(--bg2); position: relative; z-index: 1; margin-bottom: 8px; margin-top: 2px; border-radius: 10px; }
.funnel-head { display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; user-select: none; background: transparent; overflow: clip; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.funnel-head:active { background: rgba(0,0,0,.04); }
.funnel-card-open .funnel-head { background: #F5F5F5; border-bottom: 1px solid rgba(0,0,0,.10); }
.funnel-badge { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: var(--txt); letter-spacing: .3px; flex-shrink: 0; background: #F2F2F7; border: 0.5px solid rgba(0,0,0,.10); }
.funnel-titles { flex: 1; min-width: 0; }
.funnel-name { font-size: 12px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: clip; text-overflow: ellipsis; letter-spacing: -.1px; }
.funnel-sub { font-size: 9.5px; color: var(--txt3); margin-top: 1px; white-space: nowrap; overflow: clip; text-overflow: ellipsis; font-weight: 500; }
.funnel-arrow { font-size: 8px; color: var(--ui-muted); transition: transform .2s cubic-bezier(.4,0,.2,1); line-height: 1; flex-shrink: 0; will-change: transform; }
.funnel-body { max-height: 0; overflow: hidden; transition: max-height .22s cubic-bezier(.4,0,.2,1), opacity .18s ease; opacity: 0; background: #FAFAFA; will-change: max-height, opacity; }
.funnel-body.open { opacity: 1; }
.funnel-inner { padding: 10px 12px 12px; border-top: 0.5px solid rgba(0,0,0,.07); contain: layout style; }

.rp-ratio-box { margin-top: 10px; padding: 9px 10px; background: var(--bg2); border: 0.5px solid var(--border2); border-radius: var(--r8); }
.rp-ratio-label { font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--txt3); margin-bottom: 7px; }
.rp-ratio-bar { display: flex; height: 3px; border-radius: 99px; overflow: hidden; gap: 2px; margin-bottom: 7px; }
.rp-ratio-t { flex: 5; background: var(--txt); border-radius: 99px; }
.rp-ratio-m { flex: 3; background: var(--txt3); border-radius: 99px; }
.rp-ratio-b { flex: 2; background: var(--ui-muted); border-radius: 99px; }
.rp-ratio-row { display: flex; gap: 12px; }
.rp-ratio-item { font-size: 10px; color: var(--txt3); font-weight: 500; }
.rp-ratio-item strong { color: var(--txt); font-weight: 600; }

.fw-section { padding: 12px 14px 8px; }
.fw-section-title { font-size: 9.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--txt3); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }

/* ── RIGHT PANEL: Premium macOS-Inspired Section Headers ── */
.rp-collapsible-head {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px 10px;
  cursor: pointer; user-select: none;
  background: var(--bg2);
  transition: background var(--dur-base) var(--ease);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid transparent;
  touch-action: pan-y !important;
}
.rp-collapsible-head::before {
  content: '';
  display: block;
  width: 2.5px;
  height: 14px;
  border-radius: 99px;
  background: var(--ui-muted);
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease), height var(--dur-base) var(--spring), opacity var(--dur-base);
  opacity: .45;
}
.rp-collapsible-head.open::before {
  background: var(--txt2);
  height: 18px;
  opacity: .8;
}
.rp-collapsible-head:hover { background: var(--bg4); }
.rp-collapsible-head:active { background: var(--bg5); }
.rp-collapsible-head:hover::before { opacity: .65; }

.rp-divider + .rp-collapsible-head,
.rp-collapsible-body + .rp-collapsible-head,
.rp-collapsible-body + .rp-divider + .rp-collapsible-head {
  border-top: 1px solid var(--border);
}

.rp-section-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base) var(--spring);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.rp-collapsible-head:hover .rp-section-icon {
  background: var(--bg5);
  transform: scale(1.06);
}
.rp-collapsible-head.open .rp-section-icon {
  background: var(--txt);
  border-color: var(--txt);
  color: var(--bg);

}

.rp-collapsible-head-label {
  flex: 1;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .25px;
  color: var(--txt2);
  font-feature-settings: 'ss01';
}
.rp-collapsible-head.open .rp-collapsible-head-label {
  color: var(--txt);
  font-weight: 700;
}

/* When open: add bottom border + slight bg shift to separate header from content */
.rp-collapsible-head.open {
  border-bottom: 1.5px solid var(--border2);
  background: var(--bg2);
}
.rp-collapsible-head.open:hover {
  background: var(--bg4);
}
.rp-collapsible-head:not(.open) {
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.rp-collapsible-body.open {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

/* Chevron — refined SVG-style using CSS */
.rp-collapsible-head-chev {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg4);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; color: var(--txt3);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0; line-height: 1;
  will-change: transform;
}
.rp-collapsible-head:hover .rp-collapsible-head-chev {
  background: var(--bg5);
  border-color: var(--border2);
  color: var(--txt2);
}
.rp-collapsible-head.open .rp-collapsible-head-chev {
  transform: rotate(180deg);
  background: var(--bg5);
  border-color: var(--border2);
  color: var(--txt);
}

.rp-collapsible-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .22s cubic-bezier(.4,0,.2,1), opacity .16s ease;
  will-change: max-height, opacity;
  contain: layout style;
}
.rp-collapsible-body.open { opacity: 1; overflow: clip; }
.fw-card { margin-bottom: 4px; border-radius: var(--r8); overflow: clip; border: 0.5px solid rgba(0,0,0,.09); transition: border-color .12s, background .12s; background: var(--bg2); contain: layout style; }
.fw-card:hover { border-color: rgba(0,0,0,.18); }
.fw-card.fw-card-open { border: 1.5px solid rgba(0,0,0,.28); background: var(--bg2); position: relative; z-index: 1; margin-bottom: 8px; margin-top: 2px; border-radius: 10px; }
.fw-head { display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; user-select: none; background: var(--bg2); overflow: clip; touch-action: pan-y !important; -webkit-tap-highlight-color: transparent; }
.fw-head:active { background: rgba(0,0,0,.04); }
.fw-card-open .fw-head { background: var(--bg3); border-bottom: 1px solid rgba(0,0,0,.10); }
.fw-badge { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 600; color: var(--txt); letter-spacing: .3px; flex-shrink: 0; background: #F2F2F7; border: 0.5px solid rgba(0,0,0,.10); }
.fw-info { flex: 1; min-width: 0; }
.fw-name { font-size: 12px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: clip; text-overflow: ellipsis; letter-spacing: -.1px; }
.fw-sub { font-size: 9.5px; color: var(--txt3); margin-top: 1px; white-space: nowrap; overflow: clip; text-overflow: ellipsis; font-weight: 500; }
.fw-chevron { font-size: 8px; color: var(--ui-muted); transition: transform .2s cubic-bezier(.4,0,.2,1); flex-shrink: 0; line-height: 1; will-change: transform; }
.fw-chevron.open { transform: rotate(180deg); }
.fw-body { max-height: 0; overflow: hidden; transition: max-height .22s cubic-bezier(.4,0,.2,1), opacity .18s ease; opacity: 0; background: var(--bg3); touch-action: pan-y; will-change: max-height, opacity; }
.fw-body.open { opacity: 1; }
.fw-inner { padding: 10px 12px 12px; border-top: 0.5px solid rgba(0,0,0,.07); background: var(--bg3); touch-action: pan-y; contain: layout style; }
.fw-desc { font-size: 11px; color: var(--txt2); line-height: 1.58; margin-bottom: 8px; font-weight: 500; }
.fw-struct-title { font-size: 8.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--txt3); margin-bottom: 5px; }
.fw-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.fw-tag { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 99px; border: 0.5px solid rgba(0,0,0,.12); color: var(--txt2); background: transparent; }
.fw-example { background: #F2F2F7; border-radius: var(--r8); border: 0.5px solid rgba(0,0,0,.07); padding: 7px 10px; font-size: 10.5px; color: var(--txt2); line-height: 1.55; }
.fw-example strong { color: var(--txt); font-weight: 600; }

.qe-page { padding: 24px 24px 40px; animation: pageIn var(--dur-base) var(--ease); }
.qe-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.qe-logo { width:44px; height:44px; border-radius:13px; background:var(--bg4); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; border:1px solid var(--border2); box-shadow: none; }
.qe-title { font-size:16px; font-weight:700; color:var(--txt); letter-spacing:-.4px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif; margin-bottom:3px; }
.qe-subtitle { font-size:11.5px; color:var(--txt3); margin-top:2px; }
.qe-flow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.qe-flow-step { font-size:11px; font-weight:700; color:var(--txt2); background:rgba(0,0,0,.04); border:1px solid var(--border2); padding:4px 10px; border-radius:99px; }
.qe-flow-arrow { color:var(--txt3); font-size:12px; }

.qe-card { background:var(--bg2); border:1.5px solid rgba(0,0,0,.18); border-radius:var(--r16); margin-bottom:10px; overflow:hidden; box-shadow:none; display:flex; flex-direction:column; }
.qe-card-head { display:flex; align-items:center; gap:10px; padding:11px 16px; flex-shrink:0; }
.qe-step-num { width:24px; height:24px; border-radius:50%; background:var(--bg2); color:var(--txt); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900 !important; flex-shrink:0; border:1.5px solid rgba(0,0,0,.18); box-shadow:none; }
.qe-step-label { font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--txt); }
.qe-card-body { padding:10px 16px 16px; flex:1; min-height:0; display:flex; flex-direction:column; }

.qe-bracket-row { display:flex; gap:5px; flex-wrap:nowrap; align-items:center; }
/* ── FORMAT row buttons unified token ── */
.qe-bracket-btn,
.qe-syntax-hl-btn,
.qe-tpl-expand-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 3px 10px; height: 26px; border-radius: 6px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--txt3); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  white-space: nowrap; flex-shrink: 0; user-select: none; line-height: 1;
  font-family: var(--font-mono);
}
.qe-bracket-btn:hover,
.qe-syntax-hl-btn:hover,
.qe-tpl-expand-btn:hover {
  border-color: var(--border3); background: rgba(0,0,0,.05); color: var(--txt2);
}
.qe-bracket-btn.active,
.qe-syntax-hl-btn.active,
.qe-tpl-expand-btn.active {
  border-color: var(--border3); background: rgba(0,0,0,.08); color: var(--txt);
}
.qe-tpl-expand-btn { padding: 3px 8px; }


.qe-hint { font-size:11px; color:var(--txt3); display:flex; align-items:center; gap:6px; padding:8px 11px; background:rgba(0,0,0,.03); border:1px solid var(--border); border-radius:var(--r8); margin-bottom:10px; }
.qe-hint code { font-family:var(--font-mono); font-size:11px; color:var(--txt2); background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px; }

.qe-textarea {
  width:100%; height:110px; min-height:110px; padding:10px 12px;
  background: transparent; border: none;
  border-radius: calc(var(--r12) - 1.5px); color:var(--txt); font-size:13px; font-family: var(--font-sans);
  line-height:1.5; resize:vertical; transition: none;
  overflow-y: auto;
  position: relative; z-index: 1;
  display: block;
}
.qe-textarea.auto-expand {
  height: auto;
  resize: none;
  overflow-y: hidden;
}
.qe-textarea:focus { outline:none; background: transparent; }
.qe-textarea::placeholder { color:var(--txt3); }

.qe-actions-row { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.qe-parse-status { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--txt3); flex:1; min-width:0; line-height:1; white-space:nowrap; }
.qe-parse-status .dot { width:7px; height:7px; border-radius:50%; background:rgba(0,0,0,.28); flex-shrink:0; align-self:center; }
.qe-parse-status.found .dot { background:#6BCA6B; box-shadow:0 0 6px rgba(107,202,107,.5); }
.qe-parse-status.found { color:var(--txt2); }
.qe-parse-status .mono { font-family:var(--font-mono); font-size:11px; }

.qe-btn-outline { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1.5px solid var(--border2); background:transparent; border-radius:var(--r8); font-size:12px; font-weight:700; color:var(--txt2); cursor:pointer; transition:all var(--dur-base); }
.qe-btn-outline:hover { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.18); color:var(--txt); }

.qe-fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:1; }
@media(max-width:560px) { .qe-fields-grid { grid-template-columns:1fr; } }

.qe-field-item.qe-field-expanded,
.qe-field-item.qe-field-full { grid-column: 1 / -1; }

.qe-field-expand-btn {
  width:24px; height:24px; border-radius:6px; border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.04); color:var(--txt3); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1; transition:all var(--dur-base); flex-shrink:0;
  margin-left:8px; font-family:var(--font-mono); font-weight:900;
  position:relative;
}
.qe-field-expand-btn:hover { background:rgba(0,0,0,.08); border-color:rgba(0,0,0,.18); color:var(--txt); transform:scale(1.08); }
.qe-field-expand-btn.active { background:rgba(0,0,0,.10); border-color:rgba(0,0,0,.22); color:var(--txt); }

.qe-field-expand-btn[data-mode="color"]    { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.18); }
.qe-field-expand-btn[data-mode="date"]     { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.18); }
.qe-field-expand-btn[data-mode="textarea"] { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.20); }
.qe-field-expand-btn[data-mode="dropdown"] { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.18); color: var(--txt2); font-size:15px; font-weight:900; }

.qe-field-textarea {
  padding:7px 10px; background:rgba(0,0,0,.04); border:1.5px solid rgba(0,0,0,.10);
  border-radius:var(--r8); color:var(--txt); font-size:12.5px; font-family: var(--font-sans);
  transition:border-color var(--dur-base); width:100%; resize:vertical; min-height:68px; line-height:1.45;
}
.qe-field-textarea:focus { border-color:rgba(0,0,0,.22); outline:none; background:rgba(0,0,0,.06); }
.qe-field-textarea::placeholder { color:rgba(0,0,0,.28); font-style:italic; }

.qe-color-field {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 6px;
  border-radius: var(--r8); border: 1.5px solid rgba(0,0,0,.10);
  background: var(--bg3); transition: border-color var(--dur-base);
  cursor: default;
}
.qe-color-field:focus-within { border-color: rgba(0,0,0,.22); }
.qe-color-swatch {
  -webkit-appearance: none; appearance: none;
  width: 36px; height: 36px; border: none; border-radius: 8px;
  padding: 0; cursor: pointer; flex-shrink: 0;
  background: transparent; outline: none;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.10);
  transition: box-shadow var(--dur-base), transform var(--dur-fast);
}
.qe-color-swatch::-webkit-color-swatch-wrapper { padding: 0; border-radius: 7px; }
.qe-color-swatch::-webkit-color-swatch { border: none; border-radius: 7px; }
.qe-color-swatch:hover { box-shadow: 0 0 0 2.5px rgba(0,0,0,.28), 0 3px 10px rgba(0,0,0,.14); transform: scale(1.06); }
.qe-color-hex {
  flex: 1; background: transparent; border: none; box-shadow: none;
  font-family: var(--font-mono); font-size: 12.5px;
  font-weight: 700; color: var(--txt); letter-spacing: .5px;
  padding: 0; outline: none;
}
.qe-color-preview {
  font-size: 9.5px; font-weight: 800; font-family: var(--font-mono);
  padding: 3px 9px; border-radius: var(--r99);
  color: rgba(255,255,255,.92); letter-spacing: .4px;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  flex-shrink: 0; pointer-events: none;
  transition: background var(--dur-fast);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.qe-date-field {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; position: relative; cursor: pointer;
  border-radius: var(--r8); border: 1.5px solid rgba(0,0,0,.10);
  background: var(--bg3); transition: border-color var(--dur-base);
}
.qe-date-field:hover { border-color: rgba(0,0,0,.18); }
.qe-date-field:focus-within { border-color: rgba(0,0,0,.22); }
.qe-date-icon {
  flex-shrink: 0; color: var(--txt3); transition: color var(--dur-fast);
}
.qe-date-field:hover .qe-date-icon, .qe-date-field:focus-within .qe-date-icon { color: var(--txt2); }
.qe-date-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: none; background: transparent; box-shadow: none;
  opacity: 0; outline: none; padding: 0; margin: 0;
  pointer-events: none; -webkit-appearance: none; appearance: none;
}
.qe-date-display {
  flex: 1; font-size: 12.5px; font-weight: 600;
  color: var(--txt); font-family: var(--font-sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .2px;
}
.qe-date-display.qe-date-placeholder {
  color: var(--txt3); font-style: italic; font-weight: 400; opacity: .7;
}

/* (syntax-hl-btn now in FORMAT row unified token) */
.qe-syntax-hl-btn .sh-dot { display: none; }

#qe-syntax-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  padding: 10px 12px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  line-height: 1.5; letter-spacing: 0;
  white-space: pre-wrap; word-break: break-word;
  overflow: hidden;
  border-radius: 0;
  color: var(--txt);
  background: transparent;
  z-index: 2;
  box-sizing: border-box;
  display: none;
}
.sh-bracket  { color: #0066CC; }
.sh-dm-sq  { color: #0066CC; }   .sh-dm-cu  { color: inherit; }   .sh-dm-an  { color: inherit; }   .sh-dm-ro  { color: inherit; }   .sh-sep      { color: #C07000; }
.sh-note-txt { color: #8B5500; }

.sh-url {
  color: var(--link, #3C78DC);
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
  transition: background var(--dur-fast), opacity var(--dur-fast);
}
.sh-url:hover {
  background: rgba(60,120,220,.10);
  opacity: .85;
}

#qe-url-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  padding: 10px 12px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  line-height: 1.5; letter-spacing: 0;
  white-space: pre-wrap; word-break: break-word;
  overflow: auto;
  border-radius: 0;
  color: transparent;
  background: transparent;
  z-index: 3;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#qe-url-overlay::-webkit-scrollbar { display: none; }
#qe-url-overlay .sh-url {
  color: transparent;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 2px;
  transition: background var(--dur-fast);
}
#qe-url-overlay .sh-url:hover {
  background: rgba(60,120,220,.10);
}

#qe-url-overlay .sh-url::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--txt);
  color: var(--bg2);
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base);
  z-index: 99;
  letter-spacing: .2px;
}
#qe-url-overlay .sh-url:hover::after {
  opacity: 1;
}
#qe-url-overlay .sh-url {
  position: relative;
}

#qe-template.sh-active {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: var(--txt);
  background: transparent !important;
}
#qe-syntax-overlay.sh-visible {
  background: transparent;
}
.qe-textarea-wrap {
  position: relative;
  border-radius: var(--r12);
  overflow: hidden;
  border: 1.5px solid rgba(0,0,0,.10);
  transition: border-color var(--dur-base);
  background: rgba(0,0,0,.03);
}
.qe-textarea-wrap:focus-within {
  border-color: rgba(0,0,0,.20);
  background: rgba(0,0,0,.05);
}

/* URL Chip Strip — disembunyikan, sudah digantikan oleh embed card */
#qe-url-chip-strip {
  display: none !important;
}

#qe-yt-preview-strip {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  max-width: 100%;
  overflow: hidden;
}
#qe-yt-preview-strip.has-items {
  display: flex;
}

.qe-vpc {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.09);
  background: rgba(0,0,0,.03);
  overflow: hidden;
  transition: border-color var(--dur-base);
  cursor: pointer;
}
.qe-vpc:hover { border-color: rgba(0,0,0,.16); background: rgba(0,0,0,.045); }

.qe-vpc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.qe-vpc-head:hover .qe-vpc-thumb-wrap { filter: brightness(.88); }

.qe-vpc-thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,.10);
  transition: filter var(--dur-base);
  display: flex; align-items: center; justify-content: center;
}
.qe-vpc-thumb-wrap.tt { width: 80px; height: 56px; } .qe-vpc-thumb-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity var(--dur-slow);
}
.qe-vpc-thumb-wrap img.loaded { opacity: 1; }
.qe-vpc-play-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.30);
}
.qe-vpc-play-badge svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }

.qe-vpc-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.qe-vpc-platform {
  font-size: 9px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; display: flex; align-items: center; gap: 4px;
}
.qe-vpc-platform.yt  { color: #FF0000; }
.qe-vpc-platform.tt  { color: #010101; }

.qe-vpc-platform.ig  {
  background: linear-gradient(90deg,#833ab4,#fd1d1d,#fcb045);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.qe-vpc-yt-err {
  position: absolute; inset: 0; z-index: 10;
  background: #111;
  display: flex; align-items: center; justify-content: center;
}
.qe-vpc-url {
  font-size: 10.5px; font-family: var(--font-mono);
  color: var(--txt2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.qe-vpc-hint {
  font-size: 9px; color: var(--txt3); opacity: .75;
}

.qe-vpc-actions {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.qe-vpc-eye {
  width: 28px; height: 28px; border-radius: 7px;
  border: none; background: transparent;
  color: var(--txt3);
  cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0; line-height: 1;
}
.qe-vpc-eye:hover { color: var(--txt); background: rgba(0,0,0,.07); }
.qe-vpc-eye.active { color: var(--txt); }
.qe-vpc-dismiss {
  width: 22px; height: 22px; border-radius: 6px;
  border: none; background: transparent; color: var(--txt3);
  font-size: 11px; cursor: pointer; opacity: .45;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--dur-fast), background var(--dur-fast); padding: 0; flex-shrink: 0;
}
.qe-vpc-dismiss:hover { opacity: 1; background: rgba(0,0,0,.08); }

.qe-vpc-visit {
  width: 28px; height: 28px; border-radius: 7px;
  border: none; background: transparent;
  color: var(--txt3); cursor: pointer; opacity: .6;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
  padding: 0; flex-shrink: 0;
}
.qe-vpc-visit:hover { opacity: 1; background: rgba(0,0,0,.07); color: var(--link); }

.qe-vpc-player {
  display: none;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  position: relative;
}
.qe-vpc-player.active { display: block; }
.qe-vpc-player iframe {
  width: 100%; height: 100%;
  border: none; display: block;
}
.qe-vpc-player-close {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 7px;
  border: none; background: rgba(0,0,0,.65); color: #fff;
  font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 5; opacity: .8; transition: opacity var(--dur-fast);
}
.qe-vpc-player-close:hover { opacity: 1; }

.qe-vpc-tt-embed {
  display: none;
  padding: 10px;
  background: rgba(0,0,0,.02);
  border-top: 1px solid rgba(0,0,0,.06);
  display: none;
  align-items: center;
  justify-content: center;
}
.qe-vpc-tt-embed.active { display: flex; flex-direction: column; align-items: center; }

.qe-vpc-thumb-wrap.loading::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.12) 50%,rgba(0,0,0,.06) 75%);
  background-size: 200% 100%;
  animation: qe-vpc-shimmer 1.2s ease infinite;
}
@keyframes qe-vpc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.qe-vpc-thumb-wrap img.loaded ~ .qe-vpc-thumb-wrap::after { display: none; }

.qe-vpc-platform.gd { color: #1a73e8; }
.qe-vpc-thumb-wrap.gd {
  background: linear-gradient(135deg, #e8f0fe, #d2e3fc);
}

.qe-vpc-thumb-wrap.ig-thumb {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
}

.qe-vpc-platform.img { color: #34a853; }
.qe-vpc-viewer {
  display: none;
  width: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.10);
  align-items: center;
  justify-content: center;
}
.qe-vpc-viewer.active { display: flex; flex-direction: column; }
.qe-vpc-viewer iframe {
  width: 100%; height: 100%;
  border: none; display: block;
}
.qe-vpc-viewer img {
  width: 100%; display: block;
  object-fit: contain; max-height: 400px;
  background: #f0f0f0;
}
.qe-vpc-viewer-close {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 7px;
  border: none; background: rgba(0,0,0,.60); color: #fff;
  font-size: 12px; cursor: pointer; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  opacity: .8; transition: opacity var(--dur-fast);
}
.qe-vpc-viewer-close:hover { opacity: 1; }

.qe-vpc-platform.file { color: #5f6368; }
.qe-vpc-thumb-wrap.file {
  background: rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center;
}

/* ── GitHub / GitHub Gist card (Update Tahap 2) ── */
.qe-vpc-platform.gh { color: #24292e; }
.qe-vpc-thumb-wrap.gh {
  background: rgba(36,41,46,.07);
  display: flex; align-items: center; justify-content: center;
}
.qe-vpc-viewer.gh-text {
  background: var(--bg3);
  align-items: stretch;
  justify-content: flex-start;
}
.qe-vpc-gh-pre {
  width: 100%; max-height: 320px; overflow: auto; margin: 0;
  padding: 34px 16px 16px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.55;
  color: var(--txt2); white-space: pre-wrap; word-break: break-word;
  box-sizing: border-box;
}
.qe-vpc-gh-msg {
  width: 100%; padding: 26px 16px; text-align: center;
  font-size: 10.5px; color: var(--txt3); line-height: 1.6;
}

/* (tpl-expand-btn now in FORMAT row unified token) */

/* ── Link Library Button (FORMAT row) — sengaja TIDAK ada override lagi,
   supaya tampilannya identik dengan tombol toolbar lain (.qe-tb-btn):
   borderless & polos by default, baru kelihatan (background abu) saat
   hover atau saat class .has-pinned aktif lewat aturan umum
   .qe-tb-btn.active/.is-on di bawah. Tidak ada indikator titik terpisah —
   background abu itu sendiri sudah cukup jadi penanda "aktif". ── */
.qe-link-lib-btn.has-pinned {
  background: rgba(0,0,0,.07);
  border-color: transparent;
  color: var(--txt);
}

/* ── Pinned Link Strip (above textarea, always visible until X) ── */
#qe-pinned-link-strip {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
#qe-pinned-link-strip.has-items { display: flex; }

/* ── Link Library Picker Modal ── */
#qe-link-lib-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.28);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
#qe-link-lib-overlay.show { display: flex; animation: pageIn .18s var(--ease); }
.qe-link-lib-box {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--r20); padding: 0;
  width: 100%; max-width: 420px;
  box-shadow: var(--shadow-modal);
  max-height: 80vh; display: flex; flex-direction: column;
}
.qe-link-lib-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.qe-link-lib-title { font-size: 13.5px; font-weight: 800; color: var(--txt); display: flex; align-items: center; gap: 7px; }
.qe-link-lib-title svg { flex-shrink: 0; opacity: .7; }
.qe-link-lib-close {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border2);
  background: transparent; color: var(--txt3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: all var(--dur-fast);
}
.qe-link-lib-close:hover { background: rgba(0,0,0,.07); color: var(--txt); }
.qe-link-lib-body {
  overflow-y: auto; flex: 1;
  padding: 12px 14px 16px;
}
.qe-link-lib-empty {
  text-align: center; padding: 28px 16px; color: var(--txt3);
  font-size: 12px; font-weight: 500;
}
.qe-link-lib-empty-icon { font-size: 28px; margin-bottom: 8px; opacity: .4; }
.qe-link-lib-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: var(--r12);
  border: 1px solid var(--border);
  background: var(--bg3); margin-bottom: 7px;
  cursor: pointer; transition: all var(--dur-base);
  position: relative;
}
.qe-link-lib-item:last-child { margin-bottom: 0; }
.qe-link-lib-item:hover { border-color: rgba(0,80,220,.25); background: rgba(0,80,220,.04); }
.qe-link-lib-item.pinned { border-color: rgba(0,80,220,.30); background: rgba(0,80,220,.06); }
.qe-link-lib-item-icon {
  font-size: 20px; flex-shrink: 0; line-height: 1; margin-top: 1px;
}
.qe-link-lib-item-body { flex: 1; min-width: 0; }
.qe-link-lib-item-name {
  font-size: 12.5px; font-weight: 700; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.qe-link-lib-item-links {
  font-size: 10px; color: var(--txt3); font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qe-link-lib-item-pin-btn {
  flex-shrink: 0; padding: 4px 10px; border-radius: var(--r8);
  border: 1px solid var(--border2); background: transparent;
  font-size: 10.5px; font-weight: 700; color: var(--txt3);
  cursor: pointer; transition: all var(--dur-base); white-space: nowrap;
}
.qe-link-lib-item-pin-btn:hover { background: rgba(0,80,220,.08); border-color: rgba(0,80,220,.25); color: #0055DD; }
.qe-link-lib-item.pinned .qe-link-lib-item-pin-btn {
  background: rgba(0,80,220,.10); border-color: rgba(0,80,220,.30); color: #0055DD;
}
.qe-link-lib-item-count-badge {
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 99px;
  background: rgba(0,80,220,.10); color: #0055DD;
  flex-shrink: 0; align-self: flex-start; margin-top: 2px;
}

@media (max-width: 600px) {
  .qe-tpl-fv-box { max-width: 100%; border-radius: var(--r16); }
  #qe-tpl-fv-textarea { font-size: 13px; }
}

.qe-bracket-preview-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r8);
  border: 1.5px solid rgba(0,0,0,.10);
  background: transparent;
  color: var(--txt3); font-size: 10.5px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base) var(--ease);
  font-family: var(--font-mono); letter-spacing: .2px;
  flex-shrink: 0;
}
.qe-bracket-preview-toggle:hover {
  background: rgba(0,80,220,.06);
  border-color: rgba(0,80,220,.22);
  color: #0055DD;
}
.qe-bracket-preview-toggle.active {
  background: rgba(0,80,220,.09);
  border-color: rgba(0,80,220,.30);
  color: #0055DD;
  box-shadow: 0 0 0 3px rgba(0,80,220,.08);
}
.qe-bracket-preview-toggle .bpt-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
  opacity: 0; transition: opacity var(--dur-base);
}
.qe-bracket-preview-toggle.active .bpt-dot { opacity: 1; }

.qe-bp-bracket {
  color: #2563EB;
  font-weight: 500;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.qe-bp-bracket-empty {
  color: rgba(37,99,235,.38);
  font-weight: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.qe-step23-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:start; /* Step 2 tinggi natural, Step 3 tidak paksa Step 2 melar */
}
/* Step 2: tinggi mengikuti kontennya sendiri */
.qe-step23-row .qe-card { margin-bottom:0; height:auto; }
/* Step 3: tinggi di-clamp via JS (max-height diset dari offsetHeight Step 2) */
.qe-step23-row .qe-result-card {
  margin-bottom:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  /* max-height diset oleh JS: _qeSyncResultCardHeight() */
}

/* ── ALIGNMENT FIX: Generate btn & action buttons presisi sejajar ── */
/* Step 2: fields-grid meregang, generate btn + fast-mode-row didorong ke bawah */
.qe-step23-row .qe-card .qe-card-body { min-height:0; }
.qe-step23-row #qe-step2 .qe-card-body .qe-fields-grid { flex:1; min-height:0; }
.qe-step23-row #qe-step2 .qe-card-body #qe-field-progress-wrap { flex-shrink:0; }
.qe-step23-row #qe-step2 .qe-card-body .qe-generate-btn { flex-shrink:0; margin-top:auto; margin-bottom:4px; }
.qe-step23-row #qe-step2 .qe-card-body #qe-generate-sticky-placeholder { flex-shrink:0; }
/* Garis divider Step 2 (border-top di fast-mode-row) sejajar dengan garis di Step 3 (border-top di qe-open-header) */
/* Step 2: fast-mode-row padding-top:14px → margin dari btn ke garis = margin-bottom:4px + margin-top:6px + padding-top:14px → garis ada 10px di bawah btn */
/* Step 3: result-actions margin-top:10px → open-section margin-top:12px → open-header padding-top:12px → garis ada 12px di bawah result-actions */
/* Fine-tune: samakan spacing agar garis benar-benar sejajar */
/* Total jarak result-actions → garis Step3 = open-section margin-top:12px + open-header padding-top:12px = 24px dari bottom result-actions ke border */
/* Maka fast-mode-row: margin-bottom generate(4px) + margin-top fast-mode-row + padding-top fast-mode-row = 24px → margin-top:6px + padding-top:14px = 20px, perlu +4px */
.qe-step23-row #qe-step2 .qe-card-body #qe-fast-mode-row { flex-shrink:0; margin-top:8px !important; padding-top:12px !important; }
.qe-step23-row #qe-step2 .qe-card-body > div[style*="position:relative"] { flex-shrink:0; }

/* ── Step 3: flex chain scroll — konten hasil generate scroll di dalam box ── */
.qe-step23-row .qe-result-card .qe-result-body { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.qe-step23-row .qe-result-card .qe-result-body .qe-result-text { flex:1; min-height:0; overflow-y:auto; }
.qe-step23-row .qe-result-card .qe-result-body .qe-result-actions { flex-shrink:0; }
.qe-step23-row .qe-result-card .qe-result-body .qe-open-section { flex-shrink:0; }

@media(max-width:720px) {
  .qe-step23-row { grid-template-columns:1fr; }
  .qe-step23-row .qe-result-card,
  .qe-step23-row .qe-card { height:auto; max-height:none !important; }
  /* Mobile: result-text punya max-height agar tetap scrollable */
  .qe-step23-row .qe-result-card .qe-result-body .qe-result-text { max-height:55vh; flex:none; }
  /* Mobile: batalkan margin-top auto, kembali ke normal */
  .qe-step23-row #qe-step2 .qe-card-body .qe-generate-btn { margin-top:14px; }
  .qe-step23-row #qe-step2 .qe-card-body .qe-fields-grid { flex:none; }
}

.qe-field-mode-badge {
  font-size: 8.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 1.5px 6px; border-radius: var(--r99);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.qe-field-mode-badge--color    { background: rgba(0,0,0,.06); color: var(--txt3); border: 1px solid rgba(0,0,0,.10); }
.qe-field-mode-badge--date     { background: rgba(0,0,0,.06); color: var(--txt3); border: 1px solid rgba(0,0,0,.10); }
.qe-field-mode-badge--textarea { background: rgba(0,0,0,.06); color: var(--txt3); border: 1px solid rgba(0,0,0,.10); }
.qe-field-mode-badge--dropdown { background: rgba(0,0,0,.06); color: var(--txt3); border: 1px solid rgba(0,0,0,.10); }

/* FIX 3: Indikator "Live" — dot biru berkedip saat Realtime Mode aktif */
.qe-live-indicator {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #0A84FF;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.qe-live-indicator.active { display: inline-flex; }
.qe-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #0A84FF; flex-shrink: 0;
  animation: qeLiveDotPulse 1.6s ease-in-out infinite;
}
@keyframes qeLiveDotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(10,132,255,.45); }
  50%      { opacity: .55; box-shadow: 0 0 0 4px rgba(10,132,255,0); }
}

.qe-dropdown-field { display: block; }

/* ── Custom Dropdown: struktur identik antara mode pilih & mode ketik ── */
/* Wrapper selalu position:relative (diset inline di JS) */
.qe-dd-wrap { position: relative; display: block; }

/* Input custom dropdown — SATU rule untuk SEMUA mode, tidak ada <select> native */
.qe-dd-wrap .qe-dd-input {
  width: 100%;
  padding: 7px 30px 7px 10px !important;  /* kanan: ruang untuk chevron */
  border-radius: var(--r8);
  border: 1.5px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  color: var(--txt);
  font-size: 12.5px;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base);
  animation: none !important;
}
.qe-dd-wrap .qe-dd-input[data-mode="manual"] { cursor: text; }
.qe-dd-wrap .qe-dd-input:focus { border-color: rgba(0,0,0,.22); outline: none; background: rgba(0,0,0,.06); }
.qe-dd-wrap .qe-dd-input::placeholder { color: rgba(0,0,0,.35); font-style: italic; }

/* Chevron button — posisi FIXED: right:0, full-height, centered */
.qe-dd-chevron {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--txt3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0 var(--r8) var(--r8) 0;
  transition: color var(--dur-base);
  pointer-events: auto;
}
.qe-dd-chevron:hover { color: var(--txt2); }
.qe-dropdown-select {
  width: 100%;
  padding: 7px 28px 7px 10px;
  border-radius: var(--r8); border: 1.5px solid rgba(0,0,0,.10);
  background-color: rgba(0,0,0,.04);
  color: var(--txt); font-size: 12.5px; font-family: inherit;
  /* BUG FIX: line-height & box-sizing harus identik dengan .qe-field-input
     agar height sama persis saat switch mode — cegah panah bergeser */
  line-height: 1.4; box-sizing: border-box;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  cursor: pointer; transition: border-color var(--dur-base), background var(--dur-base);
}
.qe-dropdown-select:focus { border-color: rgba(0,0,0,.22); outline: none; background-color: rgba(0,0,0,.06); }
.qe-dropdown-text-input {
  width: 100%; padding: 7px 10px;
  border-radius: var(--r8); border: 1.5px solid rgba(100,60,220,.30);
  background: rgba(100,60,220,.04);
  color: var(--txt); font-size: 12.5px; font-family: inherit;
  transition: border-color var(--dur-base), background var(--dur-base);
  /* BUG FIX: Hapus animasi — mencegah visual shift/flash saat switch ke mode manual */
  animation: none;
}
/* BUG FIX: .qe-field-input dalam .qe-dropdown-field (mode manual) override agar
   height PERSIS sama dengan .qe-dropdown-select — tidak ada rule tambahan yang bisa
   memperbesar field. box-sizing + line-height wajib eksplisit. */
.qe-dropdown-field .qe-field-input {
  box-sizing: border-box !important;
  line-height: 1.4 !important;
  padding: 7px 28px 7px 10px !important;
  animation: none !important;
}
.qe-dropdown-text-input:focus { border-color: rgba(100,60,220,.50); outline: none; background: rgba(100,60,220,.07); }
.qe-dropdown-text-input::placeholder { color: var(--txt3); font-style: italic; }

.qe-field-item { display:flex; flex-direction:column; gap:6px; animation: fieldFadeIn .2s ease; min-width:0; }
@keyframes fieldFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.qe-field-label { font-size:11px; font-weight:700; color:var(--txt2); display:flex; align-items:center; justify-content:space-between; cursor:default; user-select:none; gap:6px; }
.qe-field-label .qe-field-tag { font-size:9.5px; color:var(--txt3); font-family:var(--font-mono); }
/* FIX 2: wrapper boleh menyusut (min-width:0) sehingga teks label bisa
   ter-ellipsis menyesuaikan lebar field, sementara mode-badge & tombol
   expand (flex-shrink:0) — tempat dot biru indikator berada — tidak
   pernah tertimpa/tergeser. */
/* padding-right memberi jarak antara akhir label-text (]) dengan dot biru */
.qe-field-label-main { display:flex; align-items:center; gap:4px; min-width:0; flex:1 1 auto; overflow:hidden; padding-right:6px; }
/* label-text: flex:0 1 auto agar tidak stretch penuh — ] mengikuti panjang teks, bukan mentok kanan */
.qe-field-label-text { display:flex; align-items:center; min-width:0; overflow:hidden; white-space:nowrap; flex:0 1 auto; }
.qe-field-label-bracket { flex-shrink:0; }
.qe-field-label-inner { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto; }
.qe-field-input {
  padding:7px 10px; background:rgba(0,0,0,.04); border:1.5px solid rgba(0,0,0,.09);
  border-radius:var(--r8); color:var(--txt); font-size:12.5px; font-family: var(--font-sans);
  line-height:1.4; transition:border-color var(--dur-base); width:100%;
}
.qe-field-input:focus { border-color:rgba(0,0,0,.20); outline:none; background:rgba(0,0,0,.06); }
.qe-field-input::placeholder { color:rgba(0,0,0,.28); font-style:italic; }
.qe-field-input.qe-field-empty-highlight {
  border-color: rgba(0,0,0,.14) !important;
  background: rgba(0,0,0,.03) !important;
}
/* Dot indicator: kiri expand button, tengah vertikal */
.qe-field-item:has(.qe-field-empty-highlight),
.qe-field-item.qe-field-dot-empty {
  position: relative;
}
.qe-field-item:has(.qe-field-empty-highlight)::after,
.qe-field-item.qe-field-dot-empty::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 32px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #0A84FF;
  pointer-events: none;
}
/* Edit mode: result box itself becomes editable — no new textarea spawned */
#qe-result-text.qe-edit-active {
  background: var(--bg2) !important;
  border-color: rgba(0,0,0,.22) !important;
  cursor: text !important;
  caret-color: var(--txt);
  outline: none;
}
#qe-result-text.qe-edit-active .cr-anchor,
#qe-result-text.qe-edit-active .qe-result-content {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  outline: none;
  min-height: 40px;
}
html.dark #qe-result-text.qe-edit-active {
  background: #1C1C1E !important;
  border-color: rgba(255,255,255,.20) !important;
}
#qe-edit-result-btn.editing {
  background: var(--txt) !important;
  color: var(--bg2) !important;
  border-color: var(--txt) !important;
}

.qe-fields-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; color:var(--txt3); font-size:12px; gap:6px; text-align:center; flex:1; min-height:120px; }

.qe-generate-btn {
  width:100%; height:40px; padding:0 12px; background:var(--txt); color:var(--bg); border:1.5px solid transparent;
  border-radius:var(--r12); font-size:12.5px; font-weight:900; cursor:pointer;
  transition:all var(--dur-base) var(--spring); box-shadow:0 2px 10px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; margin-bottom:4px;
  flex-shrink:0;
}
.qe-generate-btn:hover { transform:translateY(-1px); box-shadow:none; }

.qe-result-card { background:var(--bg2); border:1.5px solid rgba(0,0,0,.18); border-radius:var(--r16); overflow:hidden; box-shadow:none; display:flex; flex-direction:column; }
.qe-result-head { display:flex; align-items:center; justify-content:space-between; padding:11px 16px; gap:10px; flex-shrink:0; }
.qe-result-meta { font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--txt3); }
.qe-result-stats { font-size:11px; color:var(--txt3); font-family:var(--font-mono); }
.qe-result-meta-row { display:flex; align-items:center; gap:8px; }
.qe-result-body { padding:0 16px 16px; flex:1; display:flex; flex-direction:column; min-height:0; }
.qe-result-text {
  font-family: var(--font-sans); font-size:13px; color:var(--txt);
  line-height:1.5; white-space:pre-wrap; word-break:break-word;
  background:rgba(0,0,0,.03); padding:10px 12px; border-radius:var(--r12);
  border:1.5px solid rgba(0,0,0,.10); min-height:80px;
  flex:1; display:flex; flex-direction:column; align-items:stretch;
  position: relative;
  overflow-y: auto; /* ← scroll konten panjang, tidak mendorong card melebar */
  overflow-x: hidden;
  letter-spacing: 0;
  margin-top: 10px;
  /* Scrollbar tipis agar tidak mengganggu layout */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.18) transparent;
}
.qe-result-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--txt3); font-size:12px; text-align:center;
  font-family: var(--font-sans); font-weight:500;
  flex:1; min-height:96px;
}
.qe-result-text.has-content .qe-result-placeholder { display:none; }
.qe-result-content { display:block; width:100%; white-space:pre-wrap; word-break:break-word; font-size:13px; line-height:1.5; font-weight:500; -webkit-font-smoothing:antialiased; }
.qe-result-actions { display:flex; gap:8px; flex-wrap:nowrap; margin-top:10px; align-items:center; width:100%; }
.qe-copy-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; background:var(--txt); border:1.5px solid transparent; border-radius:var(--r8); color:var(--bg); font-size:12.5px; font-weight:800; cursor:pointer; transition:all var(--dur-base) var(--spring); box-shadow:none; }
.qe-copy-btn:hover { transform:translateY(-1px); box-shadow:none; opacity:.9; }
.qe-save-btn { flex:1; min-width:120px; padding:10px 16px; background:rgba(0,0,0,.04); border:1.5px solid rgba(0,0,0,.10); border-radius:var(--r8); color:var(--txt2); font-size:12.5px; font-weight:700; cursor:pointer; transition:all var(--dur-base); display:flex; align-items:center; justify-content:center; gap:7px; }
.qe-save-btn:hover { background:rgba(0,0,0,.08); border-color:rgba(0,0,0,.18); color:var(--txt); }
.qe-open-section { margin-top:12px; padding-top:0; border-top:none; }
.qe-open-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; padding-top:12px; border-top:1px solid var(--border); min-height:20px; }
/* ── Step 3 header mini-buttons: [ ] · × · Kelola — SATU class, SERAGAM ── */
.qe-open-action-btn,
.qe-open-kelola-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 3px 10px;
  height: 20px; line-height: 1;
  font-size: 10px; font-weight: 600;
  font-family: var(--font-sans);
  color: var(--txt3);
  cursor: pointer;
  white-space: nowrap;
  min-width: 20px;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.qe-open-action-btn:hover,
.qe-open-kelola-btn:hover { background: rgba(0,0,0,.06); border-color: var(--border3); color: var(--txt2); }
/* dark mode — langsung tampil tanpa hover dulu */
html.dark .qe-open-action-btn,
html.dark .qe-open-kelola-btn { border-color: rgba(255,255,255,.15); color: var(--txt3); background: transparent; }
html.dark .qe-open-action-btn:hover,
html.dark .qe-open-kelola-btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.28); color: var(--txt); }
/* [ ] bracket-btn active state */
.qe-open-action-btn.qe-bp-bracket-btn.active { border-color: rgba(0,80,220,.35); color: #0055DD; background: rgba(0,80,220,.08); }
html.dark .qe-open-action-btn.qe-bp-bracket-btn.active { border-color: #7BBEFF; color: #7BBEFF; background: rgba(123,190,255,.10); }
.qe-open-row { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.qe-open-label { font-size:9px; font-weight:500; letter-spacing:0.3px; text-transform:none; color:var(--txt3); opacity:0.55; }
.qe-open-ai-btn { display:flex; align-items:center; justify-content:center; gap:4px; height:24px; padding:0 7px; border-radius:var(--r8); border:1px solid var(--border2); background:transparent; font-size:10px; font-weight:600; color:var(--txt2); cursor:pointer; transition:all var(--dur-base); text-decoration:none; text-align:center; }
.qe-open-ai-btn:hover { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.16); color:var(--txt); }

.qe-result-card.hidden .qe-result-body { display:none; }
.qe-result-card .qe-result-body { display:flex; }
.qe-result-card .qe-result-empty {
  display:flex;
  flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:40px 20px;
  color:var(--txt3); font-size:12px; text-align:center;
  min-height:160px;
}
.qe-result-card.has-result .qe-result-empty { display:none; }
.qe-result-card.hidden .qe-result-empty { display:flex; }
.qe-result-card.hidden .qe-result-meta-row { opacity:0; pointer-events:none; }

/* ── UNIFIED action button token (Step 1 header) ── */
.qe-btn-ghost,
.qe-lib-inline-btn,
.qe-save-tpl-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; height: 26px; border-radius: 6px;
  background: transparent; border: 1px solid var(--border2);
  color: var(--txt3); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  white-space: nowrap; flex-shrink: 0;
}
.qe-save-tpl-btn--icon {
  padding: 0; width: 26px; height: 26px; justify-content: center;
}
.qe-btn-ghost:hover,
.qe-lib-inline-btn:hover,
.qe-save-tpl-btn:hover {
  background: rgba(0,0,0,.05); border-color: var(--border3); color: var(--txt2);
}
/* lib count badge */
.qe-lib-inline-count { color: var(--txt3); font-size: 9.5px; font-weight: 800; font-family: var(--font-mono); }
/* reset btn tweak — icon only, slightly wider touch */
.qe-reset-btn { padding: 4px 8px; }

.qe-bracket-label {
  font-size: 9.5px; font-weight: 700; color: var(--txt3);
  padding: 0 2px 0 0; white-space: nowrap; letter-spacing: .3px;
  text-transform: uppercase; line-height: 26px;
}

.qe-bracket-btn {
  padding: 3px 9px;
  font-size: 11px;
  height: 26px;
  min-height: 26px;
  min-width: 0;
  max-height: 26px;
  letter-spacing: .1px;
  line-height: 1;
}

.qe-step1-head {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 11px 14px 10px;
  background: transparent !important;
}
.qe-card-head { background: transparent !important; }
.qe-step1-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 28px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.qe-step1-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.qe-step1-divider {
  width: 1px; height: 14px;
  background: var(--border2);
  flex-shrink: 0;
  margin: 0 1px;
}
/* ── Step 1: clean header ── */
.qe-step1-head {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 12px 14px 10px;
  background: transparent !important;
}
.qe-card-head { background: transparent !important; }
.qe-step1-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  flex-wrap: nowrap;
}
.qe-step1-row-top .qe-parse-status {
  font-size: 10.5px;
  justify-content: flex-end;
}
/* Hide old bottom row — now inline in header */
.qe-step1-row-bottom { display: none; }

/* ── Unified toolbar below textarea ── */
/* Toolbar wrapper — scroll-fade menggunakan mask-image (works in dark mode) */
.qe-unified-toolbar-wrap {
  position: relative;
  overflow: visible;
}

.qe-unified-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r8);
  min-height: 34px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* DIHAPUS: mask-image fade kanan yang memblokir klik tombol Publish */
  -webkit-mask-image: none;
  mask-image: none;
  transition: none;
}
.qe-unified-toolbar::-webkit-scrollbar { display: none; }

/* Fade kiri/kanan dihapus — mask-image memblokir klik tombol Publish */
.qe-unified-toolbar.scrolled {
  -webkit-mask-image: none;
  mask-image: none;
}

.qe-unified-toolbar.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.qe-unified-toolbar.at-end:not(.scrolled) {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Generic toolbar button */
.qe-tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  min-width: 26px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--txt3);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.qe-tb-btn:hover {
  background: rgba(0,0,0,.06);
  border-color: var(--border2);
  color: var(--txt2);
}
.qe-tb-btn.active,
.qe-tb-btn.is-on,
.qe-bracket-btn.active {
  background: rgba(0,0,0,.07);
  border-color: transparent;
  color: var(--txt);
  box-shadow: none;
}

/* ── Tombol Publish (Kirim ke Engine Builder) — mode kilat ── */
.qe-publish-qe-btn {
  position: relative;
  overflow: hidden;
}
.qe-publish-qe-btn:hover {
  background: rgba(0,0,0,.06);
  border-color: var(--border2) !important;
  color: var(--txt2) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
html.dark .qe-publish-qe-btn:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--txt2) !important;
  box-shadow: none;
}
/* Animasi kilat saat klik */
@keyframes qe-kilat-flash {
  0%   { opacity: 0; transform: translateX(-100%) skewX(-20deg); }
  50%  { opacity: 1; transform: translateX(60%) skewX(-20deg); }
  100% { opacity: 0; transform: translateX(200%) skewX(-20deg); }
}
.qe-publish-qe-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  opacity: 0;
  pointer-events: none;
}
.qe-publish-qe-btn.qe-publish-kilat::after {
  animation: qe-kilat-flash 0.4s ease-out forwards;
}
.qe-publish-qe-btn.qe-publish-kilat {
  box-shadow: 0 0 0 2px rgba(59,130,246,.45), 0 2px 10px rgba(59,130,246,.2);
  transform: scale(1.04);
  transition: transform .1s, box-shadow .1s;
}

/* Step 2 — "Reset semua field" button (qe-fast-mode-row) */
.qe-row-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 20px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--txt3);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.qe-row-reset-btn:hover {
  background: rgba(0,0,0,.06);
  border-color: var(--border3);
  color: var(--txt2);
}
html.dark .qe-row-reset-btn { border-color: rgba(255,255,255,.15); color: var(--txt3); background: transparent; }
html.dark .qe-row-reset-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); color: var(--txt2); }
.qe-row-reset-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

/* Toolbar button label — hide on small screens */
.qe-tb-lbl { font-size: 11px; font-weight: 600; }

/* Vertical divider between groups */
.qe-tb-divider-v {
  width: 1px;
  height: 16px;
  background: var(--border2);
  flex-shrink: 0;
  margin: 0 3px;
}

/* Button groups */
.qe-tb-group {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

/* Custom bracket inputs inside toolbar */
.qe-tb-custom-input {
  width: 32px;
  height: 24px;
  padding: 0 4px;
  border-radius: 5px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--txt);
  font-size: 12px;
  font-family: var(--font-mono);
  text-align: center;
  outline: none;
  flex-shrink: 0;
}
.qe-tb-custom-preview {
  font-size: 10px;
  color: var(--txt2);
  font-family: var(--font-mono);
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid var(--border2);
  background: var(--bg4);
  height: 24px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Mobile: hide text labels, keep icons */
@media (max-width: 480px) {
  .qe-tb-lbl { display: none; }
  .qe-lib-btn-label { display: none; }
  .qe-tb-btn { padding: 0 6px; min-width: 28px; }
}

/* Dark mode toolbar */
html.dark .qe-unified-toolbar { background: transparent; border-color: transparent; }
html.dark .qe-tb-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: var(--txt2); }
html.dark .qe-tb-btn.active, html.dark .qe-bracket-btn.active { background: rgba(255,255,255,.12); border-color: transparent; color: var(--txt); box-shadow: none; }
html.dark .qe-tb-custom-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.13); }
html.dark .qe-tb-custom-preview { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }

/* ── File Import Button ── */
.qe-import-file-btn { position: relative; }
.qe-import-file-btn.is-loading { pointer-events: none; opacity: .6; }
@keyframes qe-import-spin { to { transform: rotate(360deg); } }
.qe-import-file-spinner {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.15); border-top-color: var(--txt3);
  animation: qe-import-spin .7s linear infinite;
  display: none; flex-shrink: 0;
}
.qe-import-file-btn.is-loading .qe-import-file-spinner { display: inline-block; }
.qe-import-file-btn.is-loading .qe-import-file-icon { display: none; }

/* ── QR Import Button ── */
.qe-import-qr-btn { position: relative; }
.qe-import-qr-btn.is-loading { pointer-events: none; opacity: .6; }
.qe-import-qr-spinner {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.15); border-top-color: var(--txt3);
  animation: qe-import-spin .7s linear infinite;
  display: none; flex-shrink: 0;
}
.qe-import-qr-btn.is-loading .qe-import-qr-spinner { display: inline-block; }
.qe-import-qr-btn.is-loading .qe-import-qr-icon { display: none; }
html.dark .qe-import-qr-spinner { border-color: rgba(255,255,255,.15); border-top-color: var(--txt3); }

/* ── Export Template btn ── */
.qe-export-tpl-btn { gap: 5px; }
.qe-export-fmt-btn {
  padding: 5px 11px; border-radius: 7px;
  border: 1.5px solid var(--border2);
  background: transparent; color: var(--txt3);
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: var(--font-mono); transition: all var(--dur-fast);
  line-height: 1;
}
.qe-export-fmt-btn:hover { background: rgba(0,0,0,.05); color: var(--txt2); border-color: var(--border3); }
.qe-export-fmt-btn.active { background: var(--txt); color: var(--bg2); border-color: var(--txt); }
html.dark .qe-export-fmt-btn { color: var(--txt3); border-color: rgba(255,255,255,.15); }
html.dark .qe-export-fmt-btn:hover { background: rgba(255,255,255,.08); color: var(--txt2); border-color: rgba(255,255,255,.25); }
html.dark .qe-export-fmt-btn.active { background: var(--txt); color: #1C1C1E; border-color: var(--txt); }
html.dark #qe-export-tpl-overlay > div { background: #252528 !important; border: 1px solid rgba(255,255,255,.10); }
html.dark #qe-export-filename { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.13) !important; }
html.dark #qe-export-filename:focus { border-color: rgba(255,255,255,.30) !important; }
html.dark #qe-export-tpl-filename { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.13) !important; }
html.dark #qe-export-tpl-filename:focus { border-color: rgba(255,255,255,.30) !important; }
html.dark .qe-import-file-spinner { border-color: rgba(255,255,255,.15); border-top-color: var(--txt3); }

@media (max-width: 540px) {
  .qe-lib-btn-label { display: none; }
}

@media (max-width: 400px) {
  .qe-step1-divider { display: none; }
}

.qe-card-head .qe-parse-status { font-size: 10.5px; flex: 0 1 auto; display: inline-flex; align-items: center; }

.qe-result-meta { font-size: 12px; font-weight: 700; color: var(--txt); }
.qe-result-stats { font-size: 10px; color: var(--txt3); font-family: var(--font-mono); margin-top: 1px; }
/* .qe-result-head padding now unified in base rule */

.qe-lib-preview-pop {
  position: fixed; z-index: 800;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--r12); padding: 0;
  width: min(360px, calc(100vw - 32px)); max-height: 65vh; overflow: hidden;
  box-shadow: var(--shadow-modal);
  opacity: 0; transform: translateY(4px);
  pointer-events: none; transition: opacity var(--dur-base), transform var(--dur-base);
  display: flex; flex-direction: column;
}
.qe-lib-preview-pop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.qe-lib-preview-pop-head {
  font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--txt3); background: var(--bg3); padding: 10px 14px 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
#qe-lib-preview-content {
  font-size: 11.5px; line-height: 1.65; color: var(--txt2);
  font-family: var(--font-mono);
  white-space: pre-wrap; word-break: break-word;
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
}
#qe-lib-preview-content::-webkit-scrollbar { width: 4px; }
#qe-lib-preview-content::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.ctr-dl-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(24px);
  z-index: 9999999; opacity: 0; pointer-events: none;
  transition: all .3s var(--spring);
  display: flex; align-items: center; gap: 12px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 16px; padding: 12px 18px 12px 14px;
  box-shadow: var(--shadow-modal);
  max-width: 340px; min-width: 240px;
}
.ctr-dl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.ctr-dl-toast-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.ctr-dl-toast-body { flex: 1; min-width: 0; }
.ctr-dl-toast-title { font-size: 12px; font-weight: 800; color: var(--txt); letter-spacing: -.1px; }
.ctr-dl-toast-sub { font-size: 10.5px; color: var(--txt3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr-dl-toast-close {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border2); color: var(--txt3);
  display: flex; align-items: center; justify-content: center; font-size: 10px;
  cursor: pointer; transition: all var(--dur-fast); pointer-events: auto;
}
.ctr-dl-toast-close:hover { background: var(--bg4); color: var(--txt); }
/* reset-btn now inherits from unified token; padding only override */

.qe-lib-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; background: var(--bg3);
  border: 1px solid var(--border2); border-radius: 99px;
  cursor: pointer; transition: all var(--dur-base); font-size: 11.5px;
  font-weight: 700; color: var(--txt2); flex-shrink: 0;
}
.qe-lib-pill:hover { background: var(--bg4); color: var(--txt); }

.qe-lib-overlay {
  contain: layout paint;
  position: fixed; inset: 0; background: transparent;
  z-index: 9100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) cubic-bezier(.2,0,.2,1);
}
/* Hanya Library utama yang gelap — sub-modal (export, confirm, edit, dll) tetap transparent agar tidak double-dark */
#qe-lib-overlay { background: rgba(0,0,0,.55); }
.qe-lib-overlay.show { opacity: 1; pointer-events: auto; }
.qe-lib-overlay.hiding { opacity: 0; pointer-events: none; }
.qe-lib-modal {
  width: 100%; max-width: 960px; height: 88vh; max-height: 88vh;
  background: var(--bg2); border: 1px solid rgba(0,0,0,.09);
  border-radius: 20px; display: flex; flex-direction: column;
  overflow: clip;
  box-shadow: 0 20px 60px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.07);
  transform: translateY(6px) scale(.99);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  opacity: 0;
  position: relative; }
.qe-lib-overlay.show .qe-lib-modal { transform: translateY(0) scale(1); opacity: 1; }
.qe-lib-overlay.hiding .qe-lib-modal {
  transform: translateY(3px) scale(.997);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}

.qe-lib-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: var(--bg3);
}
.qe-lib-head-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.qe-lib-head-info { flex: 1; min-width: 0; }
.qe-lib-head-title { font-size: 14px; font-weight: 800; color: var(--txt); letter-spacing: -.2px; }
.qe-lib-head-sub { font-size: 10.5px; color: var(--txt3); margin-top: 2px; }
.qe-lib-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qe-lib-add-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r8);
  background: var(--txt); color: var(--bg); border: none;
  font-size: 12px; font-weight: 800; cursor: pointer;
  transition: all var(--dur-base) var(--spring);
}
.qe-lib-add-btn:hover { transform: translateY(-1px); opacity: .88; }
.qe-lib-close {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border2);
  background: transparent; color: var(--txt3); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: all var(--dur-base); flex-shrink: 0;
}
.qe-lib-close:hover { background: rgba(255,60,60,.12); border-color: rgba(255,60,60,.25); color: #ff6060; }

.qe-lib-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: #F2F2F5;
  overflow: visible;
  position: relative;
  z-index: 9999;
}
.qe-lib-search-wrap {
  position: relative; flex: 0 0 180px; min-width: 120px; max-width: 180px; z-index: 9999;
  padding-left: 8px;
  overflow: visible;
}
.qe-lib-action-bar {
  display: flex; align-items: center; gap: 6px; padding: 0 6px;
  flex: 1 1 0%; min-width: 0;
  background: transparent; position: relative; z-index: 10;
  justify-content: center;
}
.qe-lib-search {
  width: 100%; padding: 6px 10px 6px 28px;
  background: var(--bg3); border: 1px solid transparent;
  border-radius: var(--r8); color: var(--txt); font-size: 12px;
  transition: border-color var(--dur-base), background var(--dur-base); font-family: inherit;
}
.qe-lib-search:focus { border-color: var(--border2); outline: none; background: var(--bg2); }
.qe-lib-search::placeholder { color: var(--txt3); }
.qe-lib-search-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; color: var(--txt3); pointer-events: none; line-height: 1; }

.qe-lib-tags-row {
  display: flex; align-items: center; gap: 2px;
  padding: 5px 8px; border-bottom: none; flex-shrink: 0;
  overflow-x: auto; flex-wrap: nowrap; flex: 1; min-width: 0;
}
.qe-lib-tags-row::-webkit-scrollbar { height: 0; }
.qe-lib-tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid transparent; background: transparent;
  color: var(--txt3); font-size: 10.5px; font-weight: 600; cursor: pointer;
  transition: all var(--dur-fast); white-space: nowrap; user-select: none; letter-spacing: .1px;
}
.qe-lib-tag-chip:hover { color: var(--txt2); background: var(--bg3); }
.qe-lib-tag-chip.active { color: var(--txt); background: var(--bg4); border-color: var(--border2); }
.qe-lib-tag-name { line-height: 1; }
.qe-lib-tag-count {
  font-size: 8.5px; font-weight: 700; line-height: 1;
  color: var(--txt3); font-family: var(--font-mono);
  opacity: .55; letter-spacing: .2px;
}
.qe-lib-tag-chip.active .qe-lib-tag-count { opacity: .85; color: var(--txt2); }
.qe-lib-tag-chip:hover .qe-lib-tag-count { opacity: .8; color: var(--txt2); }

.qe-lib-body { flex: 1; overflow-y: auto; padding: 14px 20px 20px; min-height: 0; overscroll-behavior: contain; }

.qe-lib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .qe-lib-grid { grid-template-columns: 1fr; } }

.qe-lib-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r12); overflow: hidden; cursor: pointer;
  transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
  display: flex; flex-direction: column;
}
.qe-lib-card:hover { border-color: var(--border3); transform: translateY(-1px); box-shadow: none; }

.qe-lib-card-head { padding: 11px 13px 8px; display: flex; align-items: flex-start; gap: 8px; border-bottom: 1px solid var(--border); }
.qe-lib-card-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.qe-lib-card-meta { flex: 1; min-width: 0; }
.qe-lib-card-name {
  font-size: 12px; font-weight: 700; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.1px;
}
.qe-lib-card-date { font-size: 9.5px; color: var(--txt3); font-family: var(--font-mono); margin-top: 2px; }
.qe-lib-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.qe-lib-card-btn {
  width: 26px; height: 26px; border-radius: 7px; border: none;
  background: transparent; color: var(--txt3); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast);
}
.qe-lib-card-btn:hover { background: var(--bg4); color: var(--txt2); }
.qe-lib-card-btn.del:hover { background: rgba(255,60,60,.10); color: #ff453a; }

.qe-lib-card-body { padding: 9px 13px; flex: 1; }
.qe-lib-card-preview {
  font-size: 11px; color: var(--txt3); line-height: 1.55;
  font-family: var(--font-mono);
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.qe-lib-card-foot {
  padding: 7px 13px 9px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.qe-lib-card-tag {
  font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  background: var(--bg4); border: 1px solid var(--border2);
  color: var(--txt3); letter-spacing: .3px;
}

.qe-lib-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; color: var(--txt3); font-size: 12px; gap: 8px; text-align: center;
  grid-column: 1 / -1;
}
.qe-lib-empty-icon { font-size: 32px; opacity: .35; color: var(--txt3); }

.qe-save-tpl-overlay {
  contain: layout paint;
  position: fixed; inset: 0; background: rgba(0,0,0,.40);
  z-index: 9100;
  display: none; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base);
}
.qe-save-tpl-overlay.show { display: flex; opacity: 1; pointer-events: auto; }
.qe-save-tpl-box {
  width: 100%; max-width: 420px;
  background: var(--bg2); border: 1px solid rgba(0,0,0,.09);
  border-radius: 18px; padding: 24px 22px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.07);
  transform: translateY(14px) scale(.97); transition: transform .26s var(--spring);
}
.qe-save-tpl-overlay.show .qe-save-tpl-box { transform: translateY(0) scale(1); }
.qe-save-tpl-title { font-size: 14px; font-weight: 800; color: var(--txt); margin-bottom: 16px; }
.qe-save-tpl-label { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--txt3); margin-bottom: 6px; }
.qe-save-tpl-input {
  width: 100%; padding: 9px 12px; border-radius: var(--r8);
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--txt); font-size: 13px; font-family: inherit; margin-bottom: 12px;
  transition: border-color var(--dur-base);
}
.qe-save-tpl-input:focus { border-color: var(--border3); outline: none; }
.qe-save-tpl-input::placeholder { color: var(--txt3); }
.qe-save-tpl-emoji-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.qe-save-tpl-emoji {
  width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--border2);
  background: transparent; font-size: 14px; cursor: pointer; transition: all var(--dur-base);
  display: flex; align-items: center; justify-content: center;
}
.qe-save-tpl-emoji:hover { border-color: var(--border3); background: var(--bg4); transform: scale(1.12); }
.qe-save-tpl-emoji.sel { border-color: var(--border3); background: var(--bg4); }
.qe-save-tpl-tags-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.qe-save-tpl-tag-btn {
  padding: 4px 11px; border-radius: 99px; border: 1.5px solid var(--border2);
  background: var(--bg3); color: var(--txt3); font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base); user-select: none;
}
.qe-save-tpl-tag-btn:hover { border-color: var(--border3); color: var(--txt2); }
.qe-save-tpl-tag-btn.sel { border-color: var(--txt3); background: var(--bg4); color: var(--txt); }
.qe-save-tpl-actions { display: flex; gap: 8px; }
.qe-save-tpl-cancel {
  flex: 1; padding: 10px; border-radius: var(--r8); border: 1.5px solid var(--border2);
  background: transparent; color: var(--txt2); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base);
}
.qe-save-tpl-cancel:hover { background: var(--bg3); color: var(--txt); }
.qe-save-tpl-confirm {
  flex: 1.6; padding: 10px; border-radius: var(--r8); border: none;
  background: var(--txt); color: var(--bg); font-size: 12px; font-weight: 800;
  cursor: pointer; transition: all var(--dur-base) var(--spring);
}
.qe-save-tpl-confirm:hover { transform: translateY(-1px); opacity: .88; }

.qe-modal-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--txt3); margin-bottom: 6px; display: block;
}
.qe-modal-input {
  width: 100%; padding: 10px 13px; border-radius: 10px;
  background: var(--bg3); border: 1.5px solid var(--border2);
  color: var(--txt); font-size: 13px; font-family: inherit;
  transition: border-color var(--dur-base); display: block;
}
.qe-modal-input:focus { border-color: var(--border3); outline: none; }
.qe-modal-input::placeholder { color: var(--txt3); }
.qe-modal-btn-cancel {
  flex: 1; padding: 10px; border-radius: 10px; border: 1.5px solid var(--border2);
  background: transparent; color: var(--txt2); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base);
}
.qe-modal-btn-cancel:hover { background: var(--bg3); color: var(--txt); }
.qe-modal-btn-save {
  flex: 1.4; padding: 10px; border-radius: 10px; border: none;
  background: var(--txt); color: var(--bg); font-size: 12px; font-weight: 800;
  cursor: pointer; transition: all var(--dur-base) var(--spring);
}
.qe-modal-btn-save:hover { opacity: .88; transform: translateY(-1px); }

.qe-lib-manage-btn {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border2);
  background: transparent; color: var(--txt2); font-size: 11.5px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base); white-space: nowrap;
}
.qe-lib-manage-btn:hover { background: rgba(0,0,0,.05); border-color: var(--border3); color: var(--txt); }

.qe-meta-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 99px; cursor: pointer;
  font-size: 12px; font-weight: 600; transition: all var(--dur-base);
  border: 1.5px solid var(--border2); background: rgba(0,0,0,.04); color: var(--txt2);
  user-select: none;
}
.qe-meta-chip:hover { background: rgba(255,60,40,.10); border-color: rgba(255,60,40,.28); color: #ff7060; }
.qe-meta-chip .qe-meta-chip-del { font-size: 9px; opacity: .6; }
.qe-meta-chip:hover .qe-meta-chip-del { opacity: 1; }

.qe-save-tpl-box { max-height: 92vh; overflow-y: auto; }
.qe-save-tpl-box::-webkit-scrollbar { width: 3px; }
.qe-save-tpl-box::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.qe-lib-content-wrap { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* ── Library Sidebar Wrap: folder + storage + tools all-in-one ── */
.qe-lib-sidebar-wrap {
  display: flex; flex-direction: column;
  width: 220px; min-width: 200px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: rgba(0,0,0,.015);
  overflow: hidden;
  position: relative;
}
.qe-lib-sidebar-wrap .qe-lib-folder-sidebar {
  flex: 1; min-height: 0;
  width: 100% !important; min-width: unset !important;
  border-right: none !important;
  background: transparent !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Storage block in sidebar */
.qe-lib-sb-storage {
  flex-shrink: 0; border-top: 1px solid var(--border);
  padding: 8px 10px 7px; background: transparent;
}
.qe-lib-sb-storage-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;
}
.qe-lib-sb-storage-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--txt3); font-family: var(--font-mono);
}
.qe-lib-sb-storage-nums { font-size: 8.5px; color: var(--txt3); font-family: var(--font-mono); }
.qe-lib-sb-track {
  height: 3px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; margin-bottom: 5px;
}
.qe-lib-sb-fill {
  height: 100%; border-radius: 99px; width: 0%; background: rgba(60,60,67,.55); transition: width .5s ease;
}
.qe-lib-sb-detail-toggle {
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 9px; color: var(--txt3); font-family: var(--font-mono);
  padding: 2px 0; transition: color var(--dur-fast); user-select: none;
}
.qe-lib-sb-detail-toggle:hover { color: var(--txt2); }
.qe-lib-sb-detail-chev { font-size: 7px; transition: transform var(--dur-base) var(--ease); color: rgba(0,0,0,.20); }
#qe-lib-sb-detail-body { padding-top: 8px; animation: pageIn .15s var(--ease); }
/* Sidebar tool panels */
.qe-lib-sb-tool-panel { flex-shrink: 0; border-top: 1px solid var(--border); }
.qe-lib-sb-tool-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; cursor: pointer; min-height: 27px;
  transition: background var(--dur-fast); user-select: none;
}
.qe-lib-sb-tool-head:hover { background: rgba(0,0,0,.04); }
.qe-lib-sb-tool-head--danger:hover { background: rgba(217,48,37,.05); }
.qe-lib-sb-tool-icon { font-size: 10px; flex-shrink: 0; opacity: .5; line-height: 1; }
.qe-lib-sb-tool-label {
  flex: 1; font-size: 9.5px; font-weight: 600; color: var(--txt3); letter-spacing: .1px;
}
.qe-lib-sb-tool-label--danger { color: rgba(217,48,37,.55); }
.qe-lib-sb-tool-chev {
  font-size: 7px; color: rgba(0,0,0,.18); transition: transform var(--dur-base) var(--ease); flex-shrink: 0; line-height: 1;
}
.qe-lib-sb-tool-panel.open .qe-lib-sb-tool-chev { transform: rotate(90deg); }
.qe-lib-sb-tool-body {
  display: none; padding: 4px 10px 10px; border-top: 1px solid rgba(0,0,0,.05);
  overflow-y: auto; max-height: 260px; animation: pageIn .15s var(--ease);
}
.qe-lib-sb-tool-panel.open .qe-lib-sb-tool-body { display: block; }
.qe-lib-sb-sweep-info {
  font-size: 9px; color: var(--txt3); line-height: 1.55;
  padding: 5px 7px; border-radius: 5px;
  background: rgba(60,120,220,.05); border: 1px solid rgba(60,120,220,.09); margin-bottom: 6px;
}
.qe-lib-sb-scan-btn {
  width: 100%; padding: 5px 8px; border-radius: 5px;
  border: 1px solid rgba(0,0,0,.12); background: transparent;
  color: var(--txt3); font-size: 9.5px; font-weight: 600; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; transition: all var(--dur-fast);
}
.qe-lib-sb-scan-btn:hover { background: rgba(217,48,37,.06); border-color: rgba(217,48,37,.25); color: var(--danger); }
.qe-lib-sb-scan-btn:active { transform: scale(.98); }
.qe-lib-sb-danger-btn {
  width: 100%; padding: 6px 8px; border-radius: 5px;
  border: 1px solid rgba(217,48,37,.18); background: rgba(217,48,37,.04);
  color: rgba(217,48,37,.75); font-size: 10.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 7px; transition: all var(--dur-base); text-align: left;
}
.qe-lib-sb-danger-btn:hover { background: rgba(217,48,37,.10); border-color: rgba(217,48,37,.35); }
.qe-lib-sb-danger-btn:active { transform: scale(.98); }

.qe-lib-folder-sidebar {
  width: 220px; min-width: 200px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  background: rgba(0,0,0,.015);
}
.qe-lib-folder-sidebar::-webkit-scrollbar { width: 0; }

.qe-lib-folder-item {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; border-radius: 9px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--txt2);
  transition: all var(--dur-fast); position: relative;
  border: 1px solid transparent;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.qe-lib-folder-item:hover { background: rgba(0,0,0,.05); color: var(--txt); }
.qe-lib-folder-item.active { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.14); color: var(--txt); }
.qe-lib-folder-item-sub { padding-left: 20px; font-size: 11px; font-weight: 500; }
.qe-lib-folder-item-sub .qe-lib-fi-icon { font-size: 11px; }

.qe-lib-fi-icon {
  font-size: 12px; flex-shrink: 0;
  width: 16px; text-align: center;
  line-height: 1; display: flex; align-items: center; justify-content: center;
}
.qe-lib-fi-name { flex: 1; overflow: clip; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; align-self: center; }

.qe-lib-folder-item .qe-lib-fi-note { display: none; font-size: 9px; font-weight: 500; color: var(--txt3); white-space: normal; line-height: 1.35; margin-top: 2px; opacity: .8; }
.qe-lib-folder-item--default { align-items: center; }
.qe-lib-folder-item--default .qe-lib-fi-icon { margin-top: 0; }
.qe-lib-folder-item--default .qe-lib-fi-name-wrap { flex: 1; min-width: 0; display: contents; }
.qe-lib-folder-item--default .qe-lib-fi-note { display: none; }
.qe-lib-fi-count {
  font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 99px;
  background: rgba(0,0,0,.07); color: var(--txt3);
  font-family: var(--font-mono);
  min-width: 18px; text-align: center;
}
.qe-lib-fi-del {
  display: none; width: 18px; height: 18px; border-radius: 5px; border: none;
  background: rgba(255,60,60,.14); color: #ff7060; font-size: 9px; cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.qe-lib-fi-ren {
  display: none; width: 18px; height: 18px; border-radius: 5px; border: none;
  background: rgba(0,0,0,.07); color: var(--txt2); font-size: 11px; cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.qe-lib-folder-item:hover .qe-lib-fi-del { display: flex; }
.qe-lib-folder-item:hover .qe-lib-fi-ren { display: flex; }

.qe-lib-fi-more {
  display: none; width: 20px; height: 20px; border-radius: 5px; border: none;
  background: transparent; color: var(--txt3);
  font-size: 14px; font-weight: 900; cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
  transition: background var(--dur-fast), color var(--dur-fast);
  line-height: 1; padding: 0; letter-spacing: -1px;
}
.qe-lib-folder-item:hover .qe-lib-fi-more { display: flex; }
.qe-lib-fi-more:hover { background: rgba(0,0,0,.07); color: var(--txt); }
.qe-lib-fi-more.open { display: flex; background: rgba(0,0,0,.06); color: var(--txt); }

.qe-lib-fi-ctx {
  position: fixed; z-index: 9999;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 10px; padding: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  min-width: 170px; display: none;
}
.qe-lib-fi-ctx.open { display: block; animation: pageIn .12s var(--ease); }
.qe-lib-fi-ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--txt2);
  transition: background .1s, color .1s; user-select: none;
}
.qe-lib-fi-ctx-item:hover { background: rgba(0,0,0,.05); color: var(--txt); }
.qe-lib-fi-ctx-item.danger { color: #ff6050; }
.qe-lib-fi-ctx-item.danger:hover { background: rgba(255,60,40,.10); color: #ff7060; }
.qe-lib-fi-ctx-icon { font-size: 11px; width: 16px; text-align: center; flex-shrink: 0; opacity: .7; }
.qe-lib-fi-ctx-sep { height: 1px; background: var(--border); margin: 3px 4px; }
.qe-lib-add-folder-btn {
  margin-top: 8px; padding: 7px 10px; border-radius: 9px;
  border: 1.5px dashed var(--border2); background: transparent;
  color: var(--txt3); font-size: 11px; font-weight: 700; cursor: pointer; transition: all var(--dur-base);
  text-align: left;
}
.qe-lib-add-folder-btn:hover { border-color: var(--border3); color: var(--txt2); background: rgba(0,0,0,.04); }

.qe-lib-fav-item { color: var(--txt2); }
.qe-lib-fav-item:hover { background: rgba(0,0,0,.05) !important; color: var(--txt) !important; }
.qe-lib-fav-item.active {
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.14);
  color: var(--txt);
}

.qe-lib-folder-separator { height: 1px; background: var(--border); margin: 4px 4px; }

.qe-lib-sort-btn { font-variant-numeric: tabular-nums; }

.qe-ab-btn {
  height: 30px;
  padding: 0 11px;
  border-radius: 7px;
  background: #FFFFFF;
  color: var(--txt2);
  border: 1px solid rgba(0,0,0,.18);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
}
.qe-ab-btn:hover {
  background: #F5F5F7;
  border-color: rgba(0,0,0,.26);
  color: var(--txt);
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
.qe-ab-btn:active {
  background: #EBEBED;
  border-color: rgba(0,0,0,.30);
  transform: scale(.97);
  box-shadow: none;
}
.qe-ab-btn--primary {
  background: #1C1C1E;
  color: #FFFFFF;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.qe-ab-btn--primary:hover {
  background: #3A3A3C;
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.22);
}
.qe-ab-btn--primary:active {
  background: #000;
  transform: scale(.97);
  box-shadow: none;
}

.qe-lib-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.qe-lib-ab-icon-btn {
  width: 30px; height: 30px; padding: 0; border-radius: 7px;
  background: transparent; border: 1px solid transparent;
  color: rgba(0,0,0,.60); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  font-family: inherit;
}
.qe-lib-ab-icon-btn:hover { background: rgba(255,255,255,.70); border-color: rgba(0,0,0,.15); color: rgba(0,0,0,.85); }
.qe-lib-ab-icon-btn:active { background: rgba(0,0,0,.07); transform: scale(.95); }
.qe-lib-ab-icon-btn.danger { color: #D93025; }
.qe-lib-ab-icon-btn.danger:hover { background: rgba(217,48,37,.10); border-color: rgba(217,48,37,.18); }
.qe-lib-ab-sep { width: 1px; height: 16px; background: rgba(0,0,0,.15); flex-shrink: 0; margin: 0 3px; }

.qe-lib-action-bar--inline {
  border-bottom: none !important;
}
.qe-lib-del-sel-btn {
  padding: 4px 9px; border-radius: 6px; border: 1px solid rgba(0,0,0,.13);
  background: transparent; color: var(--txt2); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); white-space: nowrap; position: relative; line-height: 1.4;
}
.qe-lib-del-sel-btn:hover { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.20); color: var(--txt); }
.qe-lib-del-sel-btn:active { background: rgba(0,0,0,.10) !important; border-color: rgba(0,0,0,.26) !important; transform: scale(.97); }
.qe-lib-del-sel-btn.danger { color: #d93025; border-color: rgba(217,48,37,.22); background: transparent; }
.qe-lib-del-sel-btn.danger:hover { background: rgba(217,48,37,.07); border-color: rgba(217,48,37,.35); }
.qe-lib-del-sel-btn.danger:active { background: rgba(217,48,37,.13) !important; transform: scale(.97); }
.qe-lib-del-sel-btn:disabled { opacity: .30; cursor: default; }

.qe-lib-add-tpl-btn {
  color: var(--txt);
  border-color: var(--border3);
  font-weight: 700;
}
.qe-lib-add-tpl-btn:hover { background: rgba(0,0,0,.07) !important; }

.qe-save-tpl-emoji.qe-inline-add-btn {
  border-style: dashed;
  color: var(--txt3);
  font-size: 13px;
}
.qe-save-tpl-emoji.qe-inline-add-btn:hover { color: var(--txt2); border-color: var(--border3); }
.qe-save-tpl-tag-btn.qe-inline-add-btn { border-style: dashed; color: var(--txt3); }
.qe-save-tpl-tag-btn.qe-inline-add-btn:hover { color: var(--txt2); border-color: var(--border3); }

.qe-lib-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto; min-width: 0; max-width: 220px; overflow: hidden;
  padding-right: 8px;
}
.qe-lib-bc-sep { width: 1px; height: 13px; background: rgba(0,0,0,.13); flex-shrink: 0; }
.qe-lib-bc-name {
  font-size: 12px; font-weight: 700; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.1px;
}
.qe-lib-bc-count {
  font-size: 10px; font-weight: 600; color: var(--txt3);
  background: rgba(0,0,0,.06); border-radius: 5px; padding: 1px 6px;
  font-family: var(--font-mono); white-space: nowrap; flex-shrink: 0;
}

.qe-lib-body { flex: 1; overflow-y: auto; padding: 0; min-height: 0; overscroll-behavior: contain; position: relative; }
.qe-lib-body::-webkit-scrollbar { width: 4px; }
.qe-lib-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.qe-lib-tagbar-row {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: var(--bg); min-height: 34px; overflow: hidden;
  position: relative;
}

.qe-lib-tags-row {
  display: flex; align-items: center; gap: 2px;
  padding: 5px 8px; flex: 1; min-width: 0;
  overflow-x: auto; flex-wrap: nowrap;
}
.qe-lib-tags-row::-webkit-scrollbar { height: 0; display: none; }

#qe-lib-sel-bar {
  display: flex;
  align-items: center; gap: 6px;
  padding: 0 8px 0 6px;
  flex: 1; min-width: 0;
}
#qe-lib-sel-bar .qe-sel-bar-count { display: none; }
#qe-lib-sel-bar.show .qe-sel-bar-count { display: inline; }
#qe-lib-sel-bar .qe-sel-bar-actions { display: none; }
#qe-lib-sel-bar.show .qe-sel-bar-actions { display: flex; align-items: center; gap: 4px; }
#qe-lib-sel-bar.show { animation: selBarIn .15s var(--ease); }
.qe-lib-tagbar-row.sel-active .qe-lib-tags-row { display: none !important; }

@keyframes selBarIn {
  from { opacity: 0; transform: translateX(4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.qe-lib-grid { display: block; min-height: 100%; position: relative; }

.qe-finder-header,
.qe-finder-row {
  display: grid;
  grid-template-columns: 34px 1fr 130px 84px 92px 44px;
  align-items: center;
  padding: 0 12px;
  gap: 0;
}

.qe-finder-header {
  height: 24px;
  border-bottom: 1px solid var(--border);
  font-size: 8.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--txt3); background: transparent;
  position: sticky; top: 0; z-index: 5;
  user-select: none;
}

.qe-finder-row {
  min-height: 26px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
  position: relative;
}
.qe-finder-row:hover { background: rgba(0,0,0,.035); }

/* Cegah native long-press callout & text-select yang memicu lingkaran biru di iOS/Android */
.qe-finder-row,
.qe-finder-row *,
.qe-finder-row-wrap {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
.qe-finder-row-selected { background: rgba(0,0,0,0.055); }

.qe-finder-row-edit { background: rgba(100,200,255,.025); }

.qe-finder-row.pinned-row { background: transparent; }

.qe-finder-col-icon { display: flex; align-items: center; justify-content: center; }
.qe-finder-icon-box {
  width: 20px; height: 20px; border-radius: 0; flex-shrink: 0;
  background: transparent; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}

.qe-finder-checkbox {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,.22); background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all var(--dur-fast); flex-shrink: 0;
  position: relative; z-index: 10; pointer-events: auto;
}
.qe-finder-checkbox::after { content: ''; }
.qe-finder-checkbox.checked { background: rgba(0,0,0,.80); border-color: rgba(0,0,0,.90); }
.qe-finder-checkbox.checked::after { content: '✓'; color: #111; font-size: 9px; font-weight: 900; line-height: 1; }

.qe-finder-select-all {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,.22); background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--dur-fast); flex-shrink: 0; margin: 0 auto;
}

.qe-finder-select-all::after { content: ''; }

.qe-finder-select-all.partial { border-color: rgba(0,0,0,.35); background: transparent; }
.qe-finder-select-all.partial::after { content: ''; }

.qe-finder-select-all.all-checked { background: rgba(0,0,0,.80); border-color: rgba(0,0,0,.90); }
.qe-finder-select-all.all-checked::after { content: '✓'; color: #111; font-size: 9px; font-weight: 900; line-height: 1; }

.qe-finder-col-name { display: flex; align-items: center; gap: 5px; min-width: 0; padding-right: 10px; }
.qe-finder-name {
  font-size: 11.5px; font-weight: 500; color: var(--txt);
  overflow: clip; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}

.qe-finder-fav-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(0,0,0,.45); flex-shrink: 0; }

.qe-finder-col-tags { display: flex; align-items: center; gap: 2px; overflow: clip; flex-wrap: nowrap; min-width: 0; }
.qe-finder-tag-plain {
  font-size: 10px; font-weight: 500; color: var(--txt2);
  white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: clip; text-overflow: ellipsis;
}
.qe-finder-tag-sep { font-size: 10px; color: var(--txt3); flex-shrink: 0; margin: 0 1px; }

.qe-finder-col-folder { display: flex; align-items: center; overflow: clip; }
.qe-finder-folder-pill { font-size: 10px; font-weight: 500; color: var(--txt3); overflow: clip; text-overflow: ellipsis; white-space: nowrap; }

.qe-finder-col-date {
  display: flex; flex-direction: column; gap: 1px; justify-content: center; overflow: clip;
}
.qe-finder-date-line {
  font-size: 9.5px; color: var(--txt2); white-space: nowrap;
  overflow: clip; text-overflow: ellipsis; line-height: 1.4;
  font-family: var(--font-mono);
}
.qe-finder-date-line.muted { font-size: 9px; color: var(--txt3); opacity: .7; }

.qe-finder-col-actions { display: flex; align-items: center; justify-content: center; position: relative; }

.qe-finder-more-btn {
  width: 22px; height: 22px; border-radius: 5px; border: 1px solid transparent;
  background: transparent; color: var(--txt3); font-size: 13px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast); letter-spacing: 1px; flex-shrink: 0;
  line-height: 1; padding-bottom: 2px;
}
.qe-finder-row:hover .qe-finder-more-btn,
.qe-finder-more-btn:focus { color: var(--txt2); }
.qe-finder-more-btn:hover { background: rgba(0,0,0,.07); border-color: var(--border2); color: var(--txt); }

.qe-finder-inline-actions { display: flex; align-items: center; gap: 2px; }

.qe-finder-btn {
  width: 20px; height: 20px; border-radius: 4px; border: 1px solid transparent;
  background: transparent; color: var(--txt3); font-size: 10px;
  cursor: pointer; transition: all var(--dur-fast); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.qe-finder-btn:hover { background: rgba(0,0,0,.06); border-color: var(--border2); color: var(--txt2); }
.qe-finder-btn.primary { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); color: var(--txt2); }
.qe-finder-btn.primary:hover { background: rgba(0,0,0,.09); border-color: rgba(0,0,0,.18); color: var(--txt); }
.qe-finder-btn.del:hover { background: rgba(255,60,60,.12); border-color: rgba(255,60,60,.22); color: #ff6060; }
.qe-finder-btn.dup:hover { background: rgba(100,200,255,.10); border-color: rgba(100,200,255,.24); color: #7dd4f8; }
.qe-finder-btn.pin-btn { color: var(--txt3); }
.qe-finder-btn.pin-btn:hover { color: var(--txt2); background: rgba(0,0,0,.06); border-color: var(--border2); }
.qe-finder-btn.pin-active { color: var(--txt2); }
.qe-finder-btn.pin-active:hover { background: rgba(0,0,0,.08) !important; border-color: rgba(0,0,0,.16) !important; }

.qe-finder-ctx-menu {
  position: fixed; z-index: 99999;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 4px;
  min-width: 170px;
  box-shadow: var(--shadow-modal);
  opacity: 0; transform: scale(.95) translateY(-4px);
  pointer-events: none; transition: opacity var(--dur-base), transform var(--dur-base);
  transform-origin: top right;
}
.qe-finder-ctx-menu.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.qe-finder-ctx-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: 7px; cursor: pointer;
  font-size: 11.5px; font-weight: 500; color: var(--txt2);
  transition: background .1s, color .1s; user-select: none;
}
.qe-finder-ctx-item:hover { background: rgba(0,0,0,.05); color: var(--txt); }
.qe-finder-ctx-icon { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; opacity: .75; }
.qe-finder-ctx-divider { height: 1px; background: var(--border); margin: 3px 4px; }
.qe-finder-ctx-item.danger { color: #ff6060; }
.qe-finder-ctx-item.danger:hover { background: rgba(255,60,60,.12); color: #ff7070; }

.qe-lib-del-sel-btn.edit-mode-btn {
  border-color: var(--border2);
  color: var(--txt2);
  background: transparent;
}
.qe-lib-del-sel-btn.edit-mode-btn:hover {
  background: rgba(0,0,0,.05);
  border-color: var(--border3);
  color: var(--txt);
}

.qe-lib-del-sel-btn.danger-outline { border-color: rgba(255,60,60,.28); color: #ff6060; background: rgba(255,60,60,.06); }
.qe-lib-del-sel-btn.danger-outline:hover { background: rgba(255,60,60,.14) !important; border-color: rgba(255,60,60,.45) !important; }
.qe-lib-del-sel-btn.sort-btn { border-color: transparent !important; color: rgba(0,0,0,0.52); background: transparent; }
.qe-lib-del-sel-btn.sort-btn:hover { background: rgba(0,0,0,.07) !important; border-color: rgba(0,0,0,.10) !important; color: rgba(0,0,0,.80) !important; }
.qe-ab-btn.sort-btn { background: transparent !important; border-color: transparent !important; }
.qe-lib-del-sel-btn.active-mode { background: rgba(0,0,0,.08) !important; border-color: rgba(0,0,0,.20) !important; color: var(--txt) !important; }

#qe-lib-rubberband {
  position: fixed; z-index: 9990;
  pointer-events: none;
  border: 1.5px solid rgba(60, 120, 220, 0.45);
  background: rgba(60, 120, 220, 0.07);
  border-radius: 4px;
  display: none;
}
#qe-lib-rubberband.active { display: block; }

.qe-finder-row.block-selected {
  background: rgba(0,0,0,.07) !important;
  outline: none;
}
.qe-finder-row.block-selected::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: rgba(0,0,0,.35);
  border-radius: 0 2px 2px 0;
}

.qe-sel-bar-count {
  font-size: 11px; font-weight: 800; color: rgba(0,0,0,0.75);
  font-family: var(--font-mono);
  background: rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px; padding: 2px 8px;
  flex-shrink: 0; white-space: nowrap;
}.qe-sel-bar-sep {
  width: 1px; height: 14px;
  background: var(--border2); flex-shrink: 0; margin: 0 2px;
}
.qe-sel-bar-btn {
  height: 28px; width: 32px; padding: 0; border-radius: 7px;
  background: transparent; color: var(--txt2);
  border: 1px solid var(--border2);
  font-size: 13px; cursor: pointer;
  font-family: inherit; transition: all var(--dur-fast);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qe-sel-bar-btn:hover {
  background: var(--bg4); border-color: var(--border3); color: var(--txt);
}
.qe-sel-bar-btn.danger {
  color: var(--danger); border-color: rgba(217,48,37,.22);
}
.qe-sel-bar-btn.danger:hover {
  background: var(--danger-bg); border-color: rgba(217,48,37,.45);
}
.qe-sel-bar-dismiss {
  margin-left: auto;
  height: 24px; width: 24px; border-radius: 6px; border: none;
  background: transparent; color: var(--txt3);
  font-size: 11px; cursor: pointer; transition: all var(--dur-fast);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: inherit;
}
.qe-sel-bar-dismiss:hover { background: var(--bg4); color: var(--txt); }

.qe-finder-row-wrap { position: relative; }

.qe-row-preview-tip {
  position: fixed; z-index: 8000;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 12px; padding: 10px 12px;
  max-width: 280px; min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07);
  pointer-events: none;
  opacity: 0; transform: scale(.96) translateY(4px);
  transition: opacity var(--dur-base), transform var(--dur-base);
  font-size: 10.5px; line-height: 1.6; color: var(--txt2);
  display: none;
}
.qe-row-preview-tip.show { opacity: 1; transform: scale(1) translateY(0); display: block; }
.qe-row-preview-tip-name {
  font-size: 11.5px; font-weight: 800; color: var(--txt);
  margin-bottom: 5px; line-height: 1.3;
  display: flex; align-items: center; gap: 6px;
}
.qe-row-preview-tip-content {
  font-family: var(--font-mono);
  font-size: 9.5px; color: var(--txt3); line-height: 1.65;
  max-height: 90px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  white-space: pre-wrap; word-break: break-word;
}
.qe-row-preview-tip-footer {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
  font-size: 9px; color: var(--txt3);
}
.qe-row-preview-tip-tag {
  padding: 1px 6px; border-radius: 99px; background: var(--bg4);
  border: 1px solid var(--border); font-size: 9px; font-weight: 700; color: var(--txt3);
}

@keyframes qeLongPressRipple {
  0%  { transform: scale(0); opacity: .4; }
  80% { transform: scale(2.4); opacity: .15; }
  100%{ transform: scale(2.8); opacity: 0; }
}
.qe-long-press-ripple {
  position: absolute; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(60,120,220,.5);
  pointer-events: none; z-index: 1;
  animation: qeLongPressRipple .55s ease-out forwards;
  transform-origin: center; margin-left: -14px; margin-top: -14px;
}

.qe-finder-row.block-selected .qe-finder-col-icon::after {
  content: '✓';
  position: absolute;
  width: 16px; height: 16px;
  background: rgba(0,0,0,.82); color: #fff;
  border-radius: 4px;
  font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.qe-finder-row-selected.block-selected .qe-finder-col-icon::after { display: none; }

.qe-finder-row .qe-block-chk {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,.22); background: rgba(255,255,255,.8);
  display: none; align-items: center; justify-content: center;
  transition: all var(--dur-fast); flex-shrink: 0; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.qe-lib-body.block-select-mode .qe-finder-col-icon { position: relative; cursor: pointer; }
.qe-lib-body.block-select-mode .qe-block-chk { display: flex; }
.qe-lib-body.block-select-mode .qe-finder-icon-box { opacity: 0; }
.qe-finder-row.block-selected .qe-block-chk {
  background: rgba(0,0,0,.82); border-color: rgba(0,0,0,.82);
}
.qe-finder-row.block-selected .qe-block-chk::after {
  content: '✓'; color: #fff; font-size: 9px; font-weight: 900;
}

/* ── Library Footer Tools ── */
.qe-lib-footer-tools {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.qe-lft-panel {
  border-bottom: 1px solid var(--border);
}
.qe-lft-panel:last-child { border-bottom: none; }
.qe-lft-head {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 14px; cursor: pointer;
  transition: background var(--dur-fast); user-select: none; min-height: 28px;
}
.qe-lft-head:hover { background: rgba(0,0,0,.03); }
.qe-lft-icon { font-size: 10px; flex-shrink: 0; opacity: .5; }
.qe-lft-label {
  flex: 1; font-size: 10px; font-weight: 600; color: var(--txt3);
  letter-spacing: .1px;
}
.qe-lft-head--danger .qe-lft-icon { opacity: 1; }
.qe-lft-head--danger .qe-lft-label { color: rgba(217,48,37,.60); }
.qe-lft-head--danger:hover { background: rgba(217,48,37,.04); }
.qe-lft-chev {
  font-size: 7px; color: rgba(0,0,0,.18);
  transition: transform var(--dur-base) var(--ease); flex-shrink: 0; line-height: 1;
}
.qe-lft-panel.open .qe-lft-chev { transform: rotate(90deg); }
.qe-lft-body {
  display: none; padding: 4px 14px 10px;
  border-top: 1px solid rgba(0,0,0,.05);
  animation: pageIn .15s var(--ease);
}
.qe-lft-panel.open .qe-lft-body { display: block; }
.qe-lft-sweep-info {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 6px 9px; background: rgba(60,120,220,.04);
  border: 1px solid rgba(60,120,220,.09); border-radius: 6px;
  margin-bottom: 7px;
}
.qe-lft-sweep-info-text { font-size: 9.5px; color: var(--txt3); line-height: 1.5; }
.qe-lft-scan-btn {
  width: 100%; padding: 6px 11px; border-radius: 6px;
  border: 1px solid rgba(0,0,0,.13); background: transparent;
  color: var(--txt3); font-size: 10.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all var(--dur-fast);
}
.qe-lft-scan-btn:hover { background: rgba(217,48,37,.05); border-color: rgba(217,48,37,.25); color: var(--danger); }
.qe-lft-scan-btn:active { transform: scale(.98); }
.qe-lft-danger-btn {
  width: 100%; padding: 7px 11px; border-radius: 6px;
  border: 1px solid rgba(217,48,37,.20); background: rgba(217,48,37,.04);
  color: rgba(217,48,37,.80); font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 8px;
  transition: all var(--dur-base); text-align: left;
}
.qe-lft-danger-btn:hover { background: rgba(217,48,37,.09); border-color: rgba(217,48,37,.38); }
.qe-lft-danger-btn:active { transform: scale(.98); }
.qe-lft-danger-btn-sub { font-size: 9px; font-weight: 500; color: rgba(217,48,37,.50); margin-top: 1px; }

.qe-lib-status-bar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 14px; gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--bg3);
  font-size: 9.5px; color: var(--txt3);
  font-family: var(--font-mono);
}
.qe-lib-status-left { display: flex; align-items: center; gap: 10px; }
.qe-lib-status-right { display: flex; align-items: center; gap: 6px; }
.qe-lib-status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(0,0,0,.25); flex-shrink: 0;
}
.qe-lib-status-hint {
  font-size: 9px; color: rgba(0,0,0,.25); letter-spacing: .2px;
}

.qe-finder-row .qe-hover-check {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,.22); background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast); flex-shrink: 0;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer; opacity: 0;
  pointer-events: auto; z-index: 3;
}
.qe-finder-row:hover .qe-hover-check { opacity: 1; }
.qe-finder-row.block-selected .qe-hover-check {
  opacity: 1;
  background: rgba(0,0,0,.82); border-color: rgba(0,0,0,.82);
}
.qe-finder-row.block-selected .qe-hover-check::after {
  content: '✓'; color: #fff; font-size: 9px; font-weight: 900; line-height: 1;
}
.qe-finder-row-selected .qe-hover-check,
.qe-finder-row .qe-finder-checkbox ~ .qe-hover-check,
.qe-lib-selection-active .qe-finder-row .qe-hover-check,
.qe-finder-col-icon:has(.qe-finder-checkbox) .qe-hover-check {
  display: none !important;
  pointer-events: none !important;
}
.qe-finder-col-icon.has-checkbox .qe-hover-check {
  display: none !important;
  pointer-events: none !important;
}
.qe-lib-selection-active .qe-finder-row .qe-row-use-btn {
  display: none !important;
  pointer-events: none !important;
}
.qe-finder-col-icon { position: relative; }

.qe-finder-row .qe-row-use-btn,
.qe-finder-row:hover .qe-row-use-btn,
.qe-finder-row.block-selected .qe-row-use-btn {
  display: none !important;
  pointer-events: none !important;
}

.qe-finder-col-actions { gap: 5px; }

@media (hover: none) and (pointer: coarse) {
  .qe-finder-row { min-height: 44px; }
  .qe-finder-more-btn { width: 32px; height: 32px; font-size: 14px; }
  .qe-finder-row .qe-hover-check { opacity: 0 !important; } .qe-sel-bar-btn { height: 34px; width: 36px; font-size: 14px; }
  .qe-row-preview-tip { display: none !important; } }

.qe-lib-tags-row::-webkit-scrollbar { display: none; }
.qe-lib-tag-chip { flex-shrink: 0 !important; white-space: nowrap !important; }

.qe-lib-actions-dd {
  position: fixed; z-index: 9997;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 13px;
  padding: 5px;
  box-shadow: 0 12px 36px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  min-width: 200px;
  opacity: 0; pointer-events: none;
  transform: scale(.94) translateY(-6px);
  transform-origin: top right;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--spring);
}
.qe-lib-actions-dd.open {
  opacity: 1; pointer-events: auto;
  transform: scale(1) translateY(0)
}
.qe-lib-actions-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--txt);
  transition: background .1s; user-select: none;
}
.qe-lib-actions-dd-item:hover { background: rgba(0,0,0,.06); }
.qe-lib-actions-dd-item.danger { color: var(--danger); }
.qe-lib-actions-dd-item.danger:hover { background: var(--danger-bg); }
.qe-lib-actions-dd-item-icon {
  font-size: 14px; width: 20px; text-align: center; flex-shrink: 0;
}
.qe-lib-actions-dd-item-label { flex: 1; }
.qe-lib-actions-dd-sep {
  height: 1px; background: rgba(0,0,0,.07); margin: 4px 6px;
}

.qe-lib-inline-expand {
  background: var(--bg2);
  border-top: 1px solid rgba(0,0,0,.07);
  overflow: hidden;
  transition: height 320ms cubic-bezier(.4,0,.2,1),
              opacity 260ms cubic-bezier(.4,0,.2,1);
  opacity: 1;
}
.qe-lib-inline-preview-text {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.7;
  color: var(--txt2);
  padding: 10px 14px 6px;
  margin: 0;
  max-height: 120px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: transparent;
  border: none;
  letter-spacing: -.01em;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.qe-lib-inline-preview-text::-webkit-scrollbar { width: 3px; }
.qe-lib-inline-preview-text::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; }

.qe-lib-inline-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px 9px;
  background: var(--bg3);
  border-top: 1px solid rgba(0,0,0,.06);
  flex-wrap: nowrap;
  overflow: hidden;
}

/* ── Inline action buttons: 7 buah, 1 baris, icon-only ── */
.qe-lib-inline-pakai,
.qe-lib-inline-detail,
.qe-lib-inline-edit,
.qe-lib-inline-fav,
.qe-lib-inline-dupe,
.qe-lib-inline-move,
.qe-lib-inline-del {
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  max-width: 44px;
  padding: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 1;
  transition: all var(--dur-fast) var(--spring);
  background: var(--bg2);
  color: var(--txt2);
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* Pakai — aksen primer */
.qe-lib-inline-pakai {
  background: var(--txt);
  color: var(--bg2);
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.qe-lib-inline-pakai:hover { opacity: .85; transform: translateY(-1px); }
.qe-lib-inline-pakai:active { transform: scale(.93); opacity: 1; }

/* Lihat */
.qe-lib-inline-detail:hover { background: var(--bg4); border-color: rgba(0,0,0,.24); color: var(--txt); }
.qe-lib-inline-detail:active { transform: scale(.93); }

/* Edit */
.qe-lib-inline-edit:hover { background: var(--bg4); border-color: rgba(0,0,0,.24); color: var(--txt); }
.qe-lib-inline-edit:active { transform: scale(.93); }

/* Favorit — bisa toggle warna */
.qe-lib-inline-fav { color: var(--txt3); }
.qe-lib-inline-fav.pinned { color: #F5A623; border-color: rgba(245,166,35,.30); background: rgba(245,166,35,.08); }
.qe-lib-inline-fav:hover { background: rgba(245,166,35,.12); color: #F5A623; border-color: rgba(245,166,35,.30); }
.qe-lib-inline-fav:active { transform: scale(.93); }

/* Duplikat */
.qe-lib-inline-dupe:hover { background: var(--bg4); color: var(--txt2); border-color: rgba(0,0,0,.20); }
.qe-lib-inline-dupe:active { transform: scale(.93); }

/* Pindah */
.qe-lib-inline-move:hover { background: var(--bg4); border-color: rgba(0,0,0,.22); color: var(--txt); }
.qe-lib-inline-move:active { transform: scale(.93); }

/* Hapus — merah */
.qe-lib-inline-del { color: var(--txt3); }
.qe-lib-inline-del:hover { background: rgba(217,48,37,.08); color: var(--danger); border-color: rgba(217,48,37,.22); }
.qe-lib-inline-del:active { transform: scale(.93); }

/* Separator dihapus — tidak dipakai */
.qe-lib-inline-sep { display: none !important; }
.qe-finder-row-wrap.expanded > .qe-finder-row {
  background: var(--bg3) !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
}

#qe-detail-modal-overlay {
  position: fixed; inset: 0; z-index: 9200;
  background: transparent;
  display: none; align-items: center; justify-content: center; padding: 16px;
}
#qe-detail-modal-overlay.show { display: flex; }

.qe-detail-modal-box {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 20px; width: 100%; max-width: 960px;
  height: 82vh;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.28), 0 4px 20px rgba(0,0,0,.12);
  overflow: hidden;
}

.qe-detail-modal-titlebar {
  display: flex; align-items: center; gap: 0;
  padding: 12px 16px 11px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0; position: relative;
}
.qe-detail-modal-traffic {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
}
.qe-detail-modal-traffic button {
  width: 12px; height: 12px; border-radius: 50%; cursor: pointer;
  border: none; padding: 0; flex-shrink: 0; transition: filter var(--dur-fast);
}
.qe-detail-modal-traffic .dm-close { background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.qe-detail-modal-traffic .dm-min   { background: #C8C8CA; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); cursor: default; }
.qe-detail-modal-traffic .dm-max   { background: #C8C8CA; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); cursor: default; }
.qe-detail-modal-traffic .dm-close:hover { filter: brightness(.82); }
.qe-detail-modal-titlebar-title {
  flex: 1; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--txt2);
  letter-spacing: -.1px; pointer-events: none;
}
.qe-detail-modal-titlebar-right { width: 54px; flex-shrink: 0; }

.qe-detail-modal-identity {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 13px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.qe-detail-modal-icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0; line-height: 1;
}
.qe-detail-modal-info { flex: 1; min-width: 0; }
.qe-detail-modal-name {
  font-size: 14px; font-weight: 800; color: var(--txt);
  letter-spacing: -.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.qe-detail-modal-meta {
  display: flex; align-items: center; gap: 0;
  margin-top: 3px; flex-wrap: nowrap;
  font-size: 10px; color: var(--txt3);
  font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; line-height: 1.4;
}
.qe-detail-modal-meta .dm-meta-val { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qe-detail-modal-meta .dm-meta-sep { flex-shrink: 0; margin: 0 5px; opacity: .3; }
.qe-detail-modal-tags-inline {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 5px;
}
.qe-detail-tag-pill {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 99px;
  background: var(--bg4); border: 1px solid var(--border2);
  font-size: 9.5px; font-weight: 600; color: var(--txt3); white-space: nowrap;
}

.qe-detail-modal-content {
  flex: 1; overflow-y: hidden; padding: 16px 20px;
  background: var(--bg3);
  display: flex; flex-direction: column; min-height: 0;
}
.qe-detail-modal-content::-webkit-scrollbar { width: 4px; }
.qe-detail-modal-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; }
.qe-detail-prompt-text {
  font-family: var(--font-mono);
  font-size: 11.5px; line-height: 1.85; color: var(--txt);
  white-space: pre-wrap; word-break: break-word;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; user-select: text;
  min-height: 0; flex: 1;
  overflow-y: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.qe-detail-prompt-text::-webkit-scrollbar { width: 4px; }
.qe-detail-prompt-text::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; }

.dm-max { cursor: pointer !important; background: #28C840 !important; }
.dm-max:hover { filter: brightness(.88); }

.qe-dm-toolbar {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 8px; flex-shrink: 0;
}
.qe-dm-tool-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--border2); background: var(--bg4);
  color: var(--txt3); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all var(--dur-fast);
  white-space: nowrap;
}
.qe-dm-tool-btn:hover { background: var(--bg5); border-color: var(--border3); color: var(--txt2); }
.qe-dm-tool-btn.active { background: var(--bg5); border-color: var(--border3); color: var(--txt); }
.qe-detail-prompt-text .sh-sep      { color: #C07000; }
.qe-detail-prompt-text .sh-note-txt { color: #8B5500; }

.qe-detail-modal-footer {
  padding: 10px 16px 12px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
  background: var(--bg3);
}
.qe-detail-use-btn {
  flex: 1; height: 34px; border-radius: 8px;
  background: var(--txt); color: #fff; border: none;
  font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all var(--dur-base) var(--spring); letter-spacing: -.1px;
}
.qe-detail-use-btn:hover { opacity: .85; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.qe-detail-use-btn:active { transform: scale(.97); }
.qe-detail-copy-btn, .qe-detail-edit-btn {
  height: 34px; padding: 0 16px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border2);
  color: var(--txt2); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all var(--dur-fast);
  white-space: nowrap; letter-spacing: -.05px;
}
.qe-detail-copy-btn:hover, .qe-detail-edit-btn:hover {
  background: var(--bg4); border-color: rgba(0,0,0,.22); color: var(--txt);
}

.qe-fb-detail-btn {
  height: 24px; padding: 0 9px; border-radius: 6px;
  background: var(--bg4); border: 1px solid var(--border2);
  color: var(--txt3); font-size: 10px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all var(--dur-fast);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.qe-fb-detail-btn:hover { background: var(--bg5); color: var(--txt2); border-color: var(--border3); }

.qe-row-preview-tip { display: none !important; }

@media (max-width: 600px) {
  #qe-detail-modal-overlay { padding: 0; align-items: flex-end; }
  .qe-detail-modal-box {
    height: 90vh;
    height: calc(90dvh - env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    border-bottom: none; max-width: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .qe-lib-actions-dd { min-width: 180px; }
}
.qe-edit-modal-v3 {
  width: 100%; max-width: 960px;
  max-height: 82vh;
  height: 82vh;
  background: var(--bg3);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.07);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: pageIn .22s var(--ease) both;
}

.qe-em3-header {
  display: flex; align-items: center; gap: 12px;
  /* disamakan persis dengan .macos-titlebar (Template Library): */
  padding: 12px 16px 11px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
  background: var(--bg3);
  position: relative;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: default !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
/* Semua anak non-button di header: cursor default */
.qe-em3-header > *:not(.qe-em3-traffic) {
  cursor: default !important;
}
/* Traffic lights tetap pointer saat hover */
.qe-em3-tl:not([disabled]) {
  cursor: pointer !important;
}
.qe-em3-traffic {
  display: flex; align-items: center; gap: 7px;
  flex-shrink: 0; z-index: 1;
}
.qe-em3-tl {
  width: 12px; height: 12px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; transition: filter var(--dur-fast); flex-shrink: 0;

  position: relative;
}
.qe-em3-tl:hover { filter: brightness(.88); }
.qe-em3-tl:active { filter: brightness(.75) scale(.9); }
.qe-em3-tl-red  { background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.qe-em3-tl-min  { background: #C8C8CA; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); cursor: default; }
.qe-em3-tl-max  { background: #28c840; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14); }
.qe-em3-title {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--txt2); letter-spacing: -.15px; margin: 0 !important;
  white-space: nowrap;
  pointer-events: none !important;   /* tidak pernah menerima event apapun */
  cursor: default !important;
  user-select: none !important;      /* tidak bisa diseleksi → tidak ada I-beam */
  -webkit-user-select: none !important;

  z-index: 2;
}
.qe-em3-close { display: none !important; }

.qe-em3-body {
  display: flex; flex-direction: row;
  flex: 1; min-height: 0; overflow: hidden;
}
.qe-em3-col-left {
  width: 280px; min-width: 240px; flex-shrink: 0;
  padding: 20px 18px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--bg3);
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.1) transparent;
}
.qe-em3-col-left::-webkit-scrollbar { width: 3px; }
.qe-em3-col-left::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 99px; }
.qe-em3-col-right {
  flex: 1; display: flex; flex-direction: column;
  padding: 20px 20px 16px;
  overflow: hidden;
  min-height: 0;
  background: var(--bg3);
}

.qe-em3-field { margin-bottom: 20px; }
.qe-em3-field-last { margin-bottom: 22px; }
.qe-em3-label {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--txt3); margin-bottom: 8px;
}

.qe-em3-input {
  width: 100%; padding: 9px 13px;
  border-radius: 9px;
  background: var(--bg2); border: 1px solid var(--border2);
  color: var(--txt); font-size: 13.5px; font-weight: 500;
  font-family: inherit; transition: all var(--dur-base); display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.qe-em3-input:focus { outline: none; background: var(--bg2); border-color: var(--border3); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.qe-em3-input::placeholder { color: var(--txt3); font-weight: 500; }

.qe-em3-meta-group {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 11px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.qe-em3-sel-row {
  display: flex; align-items: center;
  padding: 9px 14px; cursor: pointer;
  transition: background .1s;
  user-select: none; gap: 8px;
}
.qe-em3-sel-row:hover { background: var(--bg3); }
.qe-em3-sel-row.open { background: var(--bg3); }
.qe-em3-sel-label {
  font-size: 10.5px; font-weight: 700; color: var(--txt3);
  letter-spacing: .2px; width: 58px; flex-shrink: 0;
}
.qe-em3-sel-preview {
  flex: 1; font-size: 12px; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.qe-em3-sel-preview.muted { color: var(--txt3); font-weight: 500; }
.qe-em3-sel-chevron {
  font-size: 15px; color: var(--ui-muted); font-weight: 500;
  transition: transform var(--dur-base) ease;
  flex-shrink: 0; line-height: 1;
}
.qe-em3-sel-row.open .qe-em3-sel-chevron { transform: rotate(90deg); }

.qe-em3-panel {
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-base) ease;
  background: var(--bg2);
  border-top: 0px solid var(--border);
}
.qe-em3-panel.open {
  max-height: 240px;
  border-top-width: 1px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.1) transparent;
}
.qe-em3-panel.open::-webkit-scrollbar { width: 3px; }
.qe-em3-panel.open::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 99px; }
.qe-em3-sel-divider {
  height: 1px; background: var(--border); margin: 0;
}

.qe-em3-textarea {
  width: 100%; flex: 1;
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--bg2); border: 1px solid var(--border2);
  color: var(--txt); font-size: 13px; font-family: inherit;
  line-height: 1.75; resize: none;
  min-height: 0;
  transition: all var(--dur-base); display: block;
  margin-bottom: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.qe-em3-textarea:focus { outline: none; border-color: var(--border3); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.qe-em3-textarea::placeholder { color: var(--txt3); }

.qe-em3-footer {
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  padding: 9px 16px 11px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg3);
}
.qe-em3-btn-cancel {
  padding: 7px 20px; border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--bg2); color: var(--txt2);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  font-family: inherit; transition: all var(--dur-fast); white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
  letter-spacing: -.1px; flex-shrink: 0;
}
.qe-em3-btn-cancel:hover { background: var(--bg4); color: var(--txt); border-color: var(--border3); }
.qe-em3-btn-cancel:active { transform: scale(.97); }
.qe-em3-btn-save {
  flex: 1; max-width: 260px;
  padding: 7px 24px; border-radius: 8px;
  border: none; background: #1C1C1E; color: #fff;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  font-family: inherit; letter-spacing: -.15px;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: all var(--dur-base);
}
.qe-em3-btn-save:hover { background: #2C2C2E; box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.qe-em3-btn-save:active { transform: scale(.97); }

#qe-edit-tpl-overlay .qe-save-tpl-emoji-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
#qe-edit-tpl-overlay .qe-save-tpl-tags-row  { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
#qe-edit-tpl-overlay .qe-save-tpl-emoji {
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--border2); background: var(--bg4);
  font-size: 13px; cursor: pointer; transition: background .1s, border-color .1s;
  display: flex; align-items: center; justify-content: center;
}
#qe-edit-tpl-overlay .qe-save-tpl-emoji:hover { border-color: var(--border3); background: var(--bg5); }
#qe-edit-tpl-overlay .qe-save-tpl-emoji.sel {
  border-color: var(--txt); background: var(--txt);
}
#qe-edit-tpl-overlay .qe-save-tpl-tag-btn {
  padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--border2);
  background: var(--bg4); color: var(--txt3);
  font-size: 10.5px; font-weight: 500;
  cursor: pointer; transition: background .1s, border-color .1s, color .1s;
  min-height: 24px; display: inline-flex; align-items: center;
}
#qe-edit-tpl-overlay .qe-save-tpl-tag-btn:hover { border-color: var(--border3); color: var(--txt2); background: var(--bg5); }
#qe-edit-tpl-overlay .qe-save-tpl-tag-btn:active { opacity: .75; }
#qe-edit-tpl-overlay .qe-save-tpl-tag-btn.sel { background: var(--txt); color: var(--bg); border-color: var(--txt); }

@media (max-width: 720px) {
  .qe-edit-modal-v3 {
    border-radius: 20px 20px 0 0;
    height: 94dvh;
    max-width: 100%;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .qe-em3-body { flex-direction: column; overflow-y: auto; flex: 1; min-height: 0; }
  .qe-em3-col-left { width: 100%; border-right: none; border-bottom: 1px solid rgba(0,0,0,.06); padding: 18px 18px 16px; }
  .qe-em3-col-right { padding: 16px 18px 16px; min-height: 200px; }
  .qe-em3-textarea { min-height: 150px; resize: vertical; }
  .qe-em3-header { padding: 12px 16px 11px; flex-shrink: 0; }
  .qe-em3-footer {
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
  }
}
@media (min-width: 601px) and (max-width: 720px) {
  #qe-edit-tpl-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
}
.nav-lib-section { padding: 10px 10px 4px; border-top: 1px solid var(--border); }

.nav-lib-header-left { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.nav-lib-header-icon-wrap {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.nav-lib-header-icon { font-size: 14px; line-height: 1; }
.nav-lib-header-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-lib-header-title { font-size: 12px; font-weight: 600; color: var(--txt); letter-spacing: -.2px; line-height: 1.2; }
.nav-lib-header-sub { font-size: 9px; color: var(--txt3); font-weight: 500; letter-spacing: .1px; }

.nav-lib-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nav-lib-header-count {
  font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 99px;
  background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.08);
  color: var(--txt3); font-family: var(--font-mono);
  letter-spacing: .3px;
}
.nav-lib-chevron {
  font-size: 17px; color: rgba(0,0,0,.28); font-weight: 500;
  transition: transform var(--dur-base) var(--ease), color var(--dur-base);
  line-height: 1;
}

:root {
  --nav-pad:   9px;   --nav-chev:  16px;  --nav-gap:   6px;   --nav-emoji: 16px;  --nav-chev-cx: calc(var(--nav-pad) + var(--nav-chev) / 2);
}

.nav-lib-folder { display: flex; flex-direction: column; width: 100%; overflow-x: hidden; }
.nav-lib-folder + .nav-lib-folder { border-top: none; }

.nav-lib-folder-head {
  display: flex; align-items: center;
  padding: 2px 10px 2px var(--nav-pad);
  margin: 0 0 1px 0;
  cursor: pointer; user-select: none;
  transition: background .1s;
  border-radius: 7px;
  background: transparent; min-height: 24px;
  position: relative;
  overflow: clip;
  max-width: 100%;
}
.nav-lib-folder-head:hover { background: rgba(0,0,0,.05); }

.nav-lib-folder-chev {
  display: none;
}

.nav-lib-folder-emoji {
  width: var(--nav-emoji); height: var(--nav-emoji);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0; line-height: 1;
  margin-right: var(--nav-gap);
  filter: grayscale(1) contrast(.65) brightness(1.1); opacity: .72;
  transition: filter var(--dur-base), opacity var(--dur-base);
  pointer-events: none;
}
.nav-lib-folder-head:hover .nav-lib-folder-emoji { opacity: .88; filter: grayscale(.6) contrast(.75); }

.nav-lib-folder-name {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 500;
  color: var(--txt2); overflow: clip; white-space: nowrap;
  letter-spacing: -.1px;
  max-width: 100%;
  pointer-events: none;
}
.nav-lib-folder-head:hover .nav-lib-folder-name { color: var(--txt); }

.nav-lib-folder-cnt {
  font-size: 8.5px; font-weight: 600; color: var(--txt3);
  font-family: var(--font-mono); flex-shrink: 0;
  background: rgba(0,0,0,.055); border-radius: 99px;
  padding: 1px 5px; letter-spacing: .2px; margin-left: 4px;
  pointer-events: none;
}
.nav-lib-folder-toggle-chev {
  display: flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0; margin-left: 3px;
  color: var(--txt3); opacity: .6;
  transition: transform var(--dur-base) cubic-bezier(.4,0,.2,1), opacity var(--dur-base);
  pointer-events: none;
}
.nav-lib-folder-toggle-chev.open {
  transform: rotate(180deg); opacity: .85;
}
.nav-lib-folder-head:hover .nav-lib-folder-toggle-chev { opacity: .9; }

.nav-lib-items {
  display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden;
  transition: grid-template-rows .26s cubic-bezier(.4,0,.2,1), opacity var(--dur-base) ease;
}
.nav-lib-items > * { min-height: 0; overflow: clip; touch-action: pan-y; }
.nav-lib-items.open {
  grid-template-rows: 1fr; opacity: 1; overflow: hidden;
  transition: grid-template-rows .32s cubic-bezier(.34,1.1,.64,1), opacity var(--dur-base) ease .04s;
}
.nav-lib-items > div { overflow: visible; }
.nav-lib-items.open > * { overflow: visible; }

#nav-lib-folders {
  position: relative;
}
#nav-lib-folders::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0,0,0,.18);
  pointer-events: none;
}

#nav-lib-folders > .nav-lib-folder { position: relative; }

#nav-lib-folders > .nav-lib-folder > .nav-lib-folder-head {
  padding-left: 35px !important;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap {
  margin-left: 43px;
  border-left: none;
  padding-left: 0;
  background-image: linear-gradient(to bottom, rgba(0,0,0,.18) 100%, transparent 100%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left 0 top 0;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-tpl-item {
  padding-left: 15px;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-folder-head {
  padding-left: 15px !important;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap {
  margin-left: 23px;
  border-left: none;
  padding-left: 0;
  background-image: linear-gradient(to bottom, rgba(0,0,0,.18) 100%, transparent 100%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left 0 top 0;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-tpl-item {
  padding-left: 15px;
}
#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-folder-head {
  padding-left: 15px !important;
}

.nav-lib-tree-wrap { position: relative; padding-left: 0; overflow-x: hidden; }
.nav-lib-tree-wrap > .nav-lib-folder + .nav-lib-folder { border-top: none; }
.nav-lib-tree-wrap > .nav-lib-tpl-item { padding-left: 13px; }
.nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-folder-head { padding-left: 13px; }

.nav-lib-tpl-item {
  display: flex; align-items: center;
  padding: 2px 10px 2px 9px;
  gap: var(--nav-gap);
  cursor: pointer; transition: background .08s;
  border-radius: 6px; margin: 0 0 1px 0;
  min-height: 24px; background: transparent; position: relative;
  overflow: clip;
  max-width: 100%;
}
.nav-lib-tpl-item:last-child { margin-bottom: 0; }
.nav-lib-tpl-item:hover { background: rgba(0,0,0,.05); }

.nav-lib-tpl-icon {
  font-size: 11px; flex-shrink: 0; line-height: 1;
  width: var(--nav-emoji); text-align: center;
  filter: grayscale(1) contrast(.65) brightness(1.1); opacity: .65;
  transition: filter var(--dur-base), opacity var(--dur-base);
  pointer-events: none;
}
.nav-lib-tpl-name {
  flex: 1; min-width: 0; font-size: 11.5px; font-weight: 500;
  color: var(--txt2); overflow: clip; white-space: nowrap;
  line-height: 1.3; letter-spacing: -.05px;
  pointer-events: none;
}
.nav-lib-tpl-item:hover .nav-lib-tpl-name { color: var(--txt); }
.nav-lib-tpl-item:active .nav-lib-tpl-name { color: var(--txt); }

.nav-lib-tpl-item.tpl-is-new {
  position: relative;
}
.nav-lib-tpl-item.tpl-is-new::before {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0A84FF;
  box-shadow: 0 0 0 2px rgba(10,132,255,.22);
  flex-shrink: 0;
  pointer-events: none;
}
/* Badge "NEW" di library card */
.qe-finder-row.tpl-is-new {
  background: rgba(10,132,255,.06) !important;
  border-left: 2.5px solid rgba(10,132,255,.55) !important;
}
.tpl-new-badge {
  display: inline-flex;
  align-items: center;
  height: 14px;
  padding: 0 5px;
  border-radius: 5px;
  background: #0A84FF;
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  vertical-align: middle;
  margin-left: 5px;
  flex-shrink: 0;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(10,132,255,.35);
  animation: newBadgePulse 2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes newBadgePulse {
  0%,100% { box-shadow: 0 1px 4px rgba(10,132,255,.35); }
  50%      { box-shadow: 0 1px 8px rgba(10,132,255,.65), 0 0 0 3px rgba(10,132,255,.12); }
}
.nav-lib-tpl-item:hover .nav-lib-tpl-icon { opacity: .85; filter: grayscale(.5) contrast(.75); }

.nav-lib-tpl-item.nav-tpl-active { background: rgba(0,0,0,.06); border-radius: 6px; margin: 0 0 1px 0; }
.nav-lib-tpl-item.nav-tpl-active::after {
  content: '';
  position: absolute; left: 2px; top: 20%; bottom: 20%;
  width: 2px; border-radius: 99px;
  background: rgba(0,0,0,.35);
}
.nav-lib-tpl-item.nav-tpl-active .nav-lib-tpl-name { color: var(--txt); font-weight: 600; }
.nav-lib-tpl-item.nav-tpl-active .nav-lib-tpl-icon { opacity: 1; filter: grayscale(.3) contrast(.9); }

.nav-lib-empty { padding: 5px 9px 7px 24px; font-size: 10.5px; color: var(--txt3); opacity: .5; font-style: italic; }

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-empty {
  padding-left: 57px;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-empty {
  padding-left: 15px;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-items > div > .nav-lib-empty {
  padding-left: 37px;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-items > div > .nav-lib-empty {
  padding-left: 37px;
}
.nav-lib-folder-sep { height: 1px; background: var(--border); margin: 3px 8px; opacity: .5; }
.nav-lib-bottom { height: 8px; }

#nav-lib-section { padding: 0; width: 100%; overflow: visible; }
#nav-lib-section .nav-lib-bottom { display: none; }
#nav-lib-folders-wrap {
  display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease), opacity var(--dur-base) ease;
}
#nav-lib-folders-wrap.open {
  grid-template-rows: 1fr; opacity: 1; overflow: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease), opacity var(--dur-base) ease .05s;
}
#nav-lib-folders-wrap > #nav-lib-folders { min-height: 0; overflow: visible; }
#nav-lib-folders { margin: 0 0 2px 0; overflow: visible; padding-left: 0; width: 100%; }
#nav-lib-section .nav-lib-folder + .nav-lib-folder { border-top: none; }

/* Mobile meta label di subfolder row — hanya tampil saat kolom disembunyikan */
.qe-sf-mobile-meta {
  display: none;
  font-size: 10px;
  color: var(--txt3);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  letter-spacing: .1px;
}

/* Mobile meta column untuk template row — tersembunyi di desktop */
.qe-tpl-mobile-meta-col { display: none; }
.qe-tpl-mobile-meta {
  font-size: 10px;
  color: var(--txt3);
  font-family: var(--font-mono);
  white-space: nowrap;
  letter-spacing: .1px;
}
/* Dua baris di kolom Detail */
.qe-meta-two-line {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.qe-meta-line1 {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--txt3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.qe-meta-line2 {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--ui-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 600px) {
  .qe-finder-header,
  .qe-finder-row { grid-template-columns: 34px 1fr 120px 36px; }

  /* Subfolder mobile: hapus flex-column, kolom detail sudah di kanan */
  .qe-subfolder-row .qe-finder-col-name { flex-direction: row; align-items: center; }
  .qe-sf-mobile-meta { display: none; }
  /* Tampilkan kolom meta kanan untuk template row */
  .qe-tpl-mobile-meta-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
    overflow: hidden;
  }
  .qe-tpl-mobile-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }
  .qe-meta-two-line { white-space: normal; }
  .qe-meta-line1, .qe-meta-line2 { text-align: right; }
}

@media (min-width: 601px) and (max-width: 768px) {
  .qe-finder-header,
  .qe-finder-row { grid-template-columns: 34px 1fr 110px 36px; }
  .qe-finder-col-folder,
  .qe-finder-col-date { display: none !important; }
}

.qe-lib-move-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px;
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--txt2);
  border: 1.5px solid transparent; transition: all var(--dur-fast);
}
.qe-lib-move-item .mi-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.qe-lib-move-item .mi-name { flex: 1; line-height: 1.2; }
.qe-lib-move-item:hover { background: rgba(0,0,0,.05); border-color: var(--border2); color: var(--txt); }
.qe-lib-move-item.active { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.18); color: var(--txt); }

.qe-lib-modal { max-width: 960px; height: 82vh; }
.qe-edit-modal-v3 { max-width: 960px; height: 82vh; max-height: 82vh; }

.qe-lib-mobile-folder-toggle { display: none !important; }

.qe-lib-folder-drawer-btn { display: none; }
.qe-lib-active-folder-pill { display: none; }
.qe-lib-drawer-backdrop { display: none; }

@media (max-width: 600px) {
  .qe-lib-overlay { padding: 0; align-items: flex-end; }
  .qe-lib-modal {
    max-width: 100%; width: 100%;
    height: 92vh;
    height: calc(92dvh - env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #qe-lib-folder-modal,
  #qe-lib-rename-modal,
  #qe-lib-move-modal,
  #qe-export-modal,
  #qe-import-conflict-modal,
  #qe-generic-confirm-modal { padding: 16px; align-items: center; }
  #qe-lib-folder-modal > div,
  #qe-lib-rename-modal > div,
  #qe-lib-move-modal > div,
  #qe-generic-confirm-modal > div {
    border-radius: 18px; max-height: 90vh; overflow-y: auto;
  }

  .qe-lib-content-wrap { flex-direction: row; position: relative; }

  .qe-lib-sidebar-wrap {
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 20;
    width: 220px; min-width: 0; flex-shrink: 0;
    border-right: 1px solid var(--border2); border-bottom: none;
    background: var(--bg2);
    box-shadow: 4px 0 20px rgba(0,0,0,.13);
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease);
    border-radius: 0;
  }
  .qe-lib-sidebar-wrap.drawer-open { transform: translateX(0); }

  .qe-lib-folder-sidebar {
    position: static; width: 100% !important; min-width: unset !important;
    transform: none !important;
    box-shadow: none !important;
    border-right: none !important;
    background: transparent !important;
  }

  .qe-lib-drawer-backdrop {
    display: block;
    position: absolute; inset: 0; z-index: 19;
    background: rgba(0,0,0,.22);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-slow);
  }
  .qe-lib-drawer-backdrop.show {
    opacity: 1; pointer-events: auto;
  }

  .qe-lib-folder-item {
    white-space: normal; flex-shrink: 0;
    padding: 7px 10px; width: 100%;
  }
  .qe-lib-folder-item-sub { padding-left: 22px; }
  .qe-lib-add-folder-btn { margin-top: 6px; width: 100%; }

  .qe-lib-folder-drawer-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    border: 1px solid var(--border2); background: var(--bg3);
    color: var(--txt2); cursor: pointer; font-size: 15px;
    transition: all var(--dur-base); -webkit-tap-highlight-color: transparent;
  }
  .qe-lib-folder-drawer-btn:active { background: var(--bg5); }
  .qe-lib-folder-drawer-btn.active {
    background: rgba(0,0,0,.09); border-color: rgba(0,0,0,.18); color: var(--txt);
  }

  .qe-lib-active-folder-pill {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px 5px 10px;
    border-bottom: 1px solid var(--border);
    background: transparent; flex-shrink: 0;
    min-height: 0;
  }
  .qe-lib-afp-icon { font-size: 13px; flex-shrink: 0; line-height: 1; }
  .qe-lib-afp-name {
    font-size: 11.5px; font-weight: 700; color: var(--txt2);
    flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .qe-lib-afp-count {
    font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 99px;
    background: rgba(0,0,0,.07); color: var(--txt3);
    font-family: var(--font-mono); flex-shrink: 0;
  }

  .qe-finder-header { grid-template-columns: 34px 1fr 120px 36px; }
  .qe-finder-row    { grid-template-columns: 34px 1fr 120px 36px; }
  .qe-finder-col-tags,
  .qe-finder-col-folder,
  .qe-finder-col-date { display: none !important; }

  .qe-lib-action-bar {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 4px; padding: 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .qe-lib-action-bar::-webkit-scrollbar { display: none; }
  .qe-lib-action-bar > * { flex-shrink: 0; }
  .qe-lib-action-bar > span { flex-shrink: 1; min-width: 50px; }

  /* qe-save-tpl mobile overrides moved to end-of-file fix block */
}

@media (min-width: 601px) and (max-width: 768px) {
  .qe-lib-modal { max-width: 100%; height: 88vh; }
  .qe-lib-folder-sidebar { width: 180px; min-width: 160px; }
  .qe-finder-header, .qe-finder-row { grid-template-columns: 34px 1fr 120px 148px; }
  .qe-finder-col-folder, .qe-finder-col-date { display: none; }
}

@media (max-width: 1100px) { :root { --rp-w: 240px; --nav-w: 240px; } }
@media (max-width: 900px) {
  .right-panel { display: block !important; transform: translateX(100%); }
  .feed-col { margin-right: 0; }
  .right-panel.drawer-open { transform: translateX(0) !important; z-index: 65; box-shadow: -6px 0 24px rgba(0,0,0,.12); }
}

@media (max-width: 360px) {
  .topbar { padding: 0 8px; gap: 4px; }
  .topbar-brand-text { display: none; }
  .topbar-brand { gap: 0; }
  }

.nav-overlay,
.rp-drawer-overlay {
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.25);
  z-index: 49;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease),
  visibility var(--dur-base) var(--ease);
  cursor: pointer;
}
.nav-overlay.show,
.rp-drawer-overlay.show { opacity: 1; visibility: visible; }

@media (max-width: 480px) {
  :root { --nav-w: min(75vw, 280px); }
  
}

.rg-page {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--topbar-h));
  background: var(--bg);
}

@media (max-width: 900px) {
  .rg-grid { gap: 5px; }
}

.qe-finder-row-wrap { display: flex; flex-direction: column; }

.qe-finder-row-wrap:not(:last-child) { border-bottom: 1px solid var(--border); }
.qe-finder-row-wrap .qe-finder-row { transition: background var(--dur-base) cubic-bezier(.4,0,.2,1); }
.qe-finder-row-wrap.expanded .qe-finder-row { background: rgba(0,0,0,.025); }

.qe-finder-breadcrumb-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: nowrap;
  padding: 7px 12px 8px 46px;
  background: rgba(0,0,0,.02);
  border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--txt3);
  animation: fadeInDown .15s ease;
  overflow: hidden;
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qe-fb-segment {
  color: var(--txt3); font-size: 10.5px; font-weight: 500;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1;
}

.qe-fb-tags { color: var(--txt3); font-size: 10.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; }
.qe-fb-sep { color: var(--txt3); opacity: .4; font-size: 10px; flex-shrink: 0; }
.qe-fb-actions {
  margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.qe-fb-icon-btn {
  width: 26px; height: 26px; border-radius: 6px;
  border: none; background: transparent;
  color: var(--txt3); font-size: 14px;
  cursor: pointer; transition: color var(--dur-fast), opacity var(--dur-fast); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 0;
  line-height: 1; opacity: .65;
}
.qe-fb-icon-btn:hover { background: transparent; border: none; color: var(--txt); opacity: 1; }
.qe-fb-icon-btn.primary { background: transparent; border: none; color: var(--txt2); opacity: .85; }
.qe-fb-icon-btn.primary:hover { background: transparent; color: var(--txt); opacity: 1; }
.qe-fb-meta { margin-left: auto; font-size: 9.5px; color: var(--txt3); font-family: var(--font-mono); opacity: .6; }

.qe-finder-inline-preview {
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.015);
  animation: fadeInDown .15s ease;
}
.qe-inline-preview-txt {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--txt2); line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  padding: 12px 16px 8px; margin: 0; max-height: 200px; overflow-y: auto;
}
.qe-inline-preview-txt::-webkit-scrollbar { width: 3px; }
.qe-inline-preview-txt::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.qe-result-text { position: relative; }

/* ██ PERF OPT: cr-* cinematic CSS extracted — lazy-injected on first generate. */

.ctr-export-box {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 20px; width: 100%; max-width: 560px;
  max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-modal); overflow: hidden;
  animation: pageIn .22s var(--ease);
}

.ctr-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: var(--bg3);
}
.ctr-modal-icon-wrap {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: var(--txt);
}
.ctr-modal-title { font-size: 14px; font-weight: 800; color: var(--txt); letter-spacing: -.2px; }
.ctr-modal-sub { font-size: 10.5px; color: var(--txt3); margin-top: 2px; }
.ctr-modal-close {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border2);
  background: transparent; color: var(--txt3); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: all var(--dur-fast); flex-shrink: 0;
}
.ctr-modal-close:hover { background: rgba(255,60,60,.12); border-color: rgba(255,60,60,.25); color: #ff6060; }

.ctr-export-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.ctr-export-body::-webkit-scrollbar { width: 3px; }
.ctr-export-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.ctr-export-section { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.ctr-export-section-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--txt3); margin-bottom: 10px;
}
.ctr-step-num {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: var(--txt2); line-height: 1;
}
.ctr-select-all-btn {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--txt3);
  background: transparent; border: 1px solid var(--border2);
  padding: 2px 8px; border-radius: 5px; cursor: pointer; transition: all var(--dur-fast);
  letter-spacing: 0; text-transform: none;
}
.ctr-select-all-btn:hover { background: rgba(0,0,0,.05); color: var(--txt2); border-color: var(--border3); }

.ctr-folder-list { display: flex; flex-direction: column; gap: 5px; max-height: 160px; overflow-y: auto; }
.ctr-folder-list::-webkit-scrollbar { width: 3px; }
.ctr-folder-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.ctr-folder-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border-radius: 8px; background: rgba(0,0,0,.02); border: 1px solid var(--border);
  cursor: pointer; user-select: none; transition: background var(--dur-fast), border-color var(--dur-fast);
}
.ctr-folder-row:hover { background: rgba(0,0,0,.05); border-color: var(--border2); }
.ctr-folder-row.checked { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.16); }
.ctr-folder-check {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--border2); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: var(--txt); transition: all var(--dur-fast);
}
.ctr-folder-row.checked .ctr-folder-check { background: rgba(0,0,0,.80); border-color: rgba(0,0,0,.90); color: var(--bg2); }
.ctr-export-summary {
  margin-top: 8px; font-size: 11.5px; color: var(--txt3); line-height: 1.5;
  padding: 7px 10px; background: rgba(0,0,0,.02); border: 1px solid var(--border);
  border-radius: 7px;
}

.ctr-author-row { display: flex; gap: 10px; }
@media (max-width: 480px) { .ctr-author-row { flex-direction: column; } }
.ctr-field-group { display: flex; flex-direction: column; gap: 4px; }
.ctr-field-label { font-size: 10px; font-weight: 700; color: var(--txt3); letter-spacing: .3px; }
.ctr-field-input {
  padding: 8px 11px; border-radius: var(--r8); border: 1px solid var(--border2);
  background: rgba(0,0,0,.04); color: var(--txt); font-size: 12.5px;
  font-family: inherit; outline: none; transition: border-color var(--dur-base), background var(--dur-base); width: 100%;
}
.ctr-field-input:focus { border-color: var(--border3); background: rgba(0,0,0,.06); }
.ctr-field-input::placeholder { color: var(--txt3); }
.ctr-field-input--error {
  border-color: var(--danger) !important;
  background: rgba(217,48,37,.04) !important;
  animation: ctr-field-shake .32s cubic-bezier(.36,.07,.19,.97);
}
.ctr-field-input--error:focus { border-color: var(--danger) !important; background: rgba(217,48,37,.06) !important; }
@keyframes ctr-field-shake {
  0%,100% { transform: translateX(0); }
  18%      { transform: translateX(-5px); }
  36%      { transform: translateX(5px); }
  54%      { transform: translateX(-4px); }
  72%      { transform: translateX(4px); }
  90%      { transform: translateX(-2px); }
}
.ctr-author-error-msg {
  display: none;
  align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--danger);
  margin-top: 5px;
  animation: ctr-err-fadein .18s var(--ease);
}
.ctr-author-error-msg.show { display: flex; }
@keyframes ctr-err-fadein { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
.ctr-author-note {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 8px;
  font-size: 11px; color: var(--txt3); line-height: 1.55;
  padding: 8px 11px; background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.09); border-radius: 7px;
}

.ctr-toggle-label { display: flex; align-items: center; gap: 6px; cursor: pointer; margin-left: auto; }
.ctr-toggle-label input[type="checkbox"] { display: none; }
.ctr-toggle-pill {
  width: 32px; height: 18px; border-radius: 9px; flex-shrink: 0;
  background: rgba(0,0,0,.10); border: 1px solid rgba(0,0,0,.16);
  position: relative; cursor: pointer; transition: all var(--dur-base);
}
.ctr-toggle-pill::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(0,0,0,.55); transition: all var(--dur-base);
}

.ctr-toggle-label input:checked ~ .ctr-toggle-pill { background: rgba(0,0,0,.25); border-color: rgba(0,0,0,.35); }
.ctr-toggle-label input:checked ~ .ctr-toggle-pill::after { left: 16px; background: var(--bg2); }

.ctr-export-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctr-mode-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--border2); background: rgba(0,0,0,.03);
  cursor: pointer; transition: all var(--dur-base); user-select: none;
}
.ctr-mode-card input[type="radio"] { display: none; }
.ctr-mode-card:hover { border-color: var(--border3); background: rgba(0,0,0,.05); }
.ctr-mode-card.active { border-color: rgba(0,0,0,.35); background: rgba(0,0,0,.07); box-shadow: 0 2px 12px rgba(0,0,0,.4); }
.ctr-mode-card-head { display: flex; align-items: center; gap: 7px; }
.ctr-mode-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.ctr-mode-title { font-size: 12px; font-weight: 800; color: var(--txt2); letter-spacing: .2px; }
.ctr-mode-card.active .ctr-mode-title { color: var(--txt); }
.ctr-mode-desc { font-size: 10px; color: var(--txt3); line-height: 1.45; }

.ctr-mode-card[data-mode="baca"] { border-color: var(--border2); }
.ctr-mode-card[data-mode="baca"]:hover { border-color: var(--border3); background: rgba(0,0,0,.05); }
.ctr-mode-card[data-mode="baca"].active {
  border-color: rgba(0,0,0,.35);
  background: rgba(0,0,0,.07);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.ctr-mode-card[data-mode="baca"] .ctr-mode-icon { filter: none; }

.ctr-format-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.ctr-fmt-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 9px; border-radius: 10px;
  border: 1.5px solid var(--border2); background: rgba(0,0,0,.03);
  cursor: pointer; transition: all var(--dur-base); user-select: none; text-align: center;
}
.ctr-fmt-btn input[type="radio"] { display: none; }
.ctr-fmt-btn:hover { border-color: var(--border3); background: rgba(0,0,0,.05); }
.ctr-fmt-btn.active { border-color: rgba(0,0,0,.40); background: rgba(0,0,0,.08); box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.ctr-fmt-icon { font-size: 13px; font-weight: 900; color: var(--txt2); font-family: var(--font-mono); line-height: 1; }
.ctr-fmt-btn.active .ctr-fmt-icon { color: var(--txt); }
.ctr-fmt-name { font-size: 10.5px; font-weight: 800; color: var(--txt2); letter-spacing: .3px; }
.ctr-fmt-btn.active .ctr-fmt-name { color: var(--txt); }
.ctr-fmt-desc { font-size: 9.5px; color: var(--txt3); line-height: 1.45; margin-top: 1px; }

.ctr-json-ext-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ctr-json-ext-label { font-size: 10px; font-weight: 700; color: var(--txt3); letter-spacing: .3px; white-space: nowrap; }
.ctr-ext-chip {
  padding: 3px 9px; border-radius: var(--r99); font-size: 10px; font-weight: 800;
  border: 1.5px solid var(--border2); background: transparent; color: var(--txt3);
  cursor: pointer; transition: all var(--dur-fast); font-family: var(--font-mono);
}
.ctr-ext-chip:hover { border-color: var(--border3); color: var(--txt2); background: rgba(0,0,0,.04); }
.ctr-ext-chip.active { border-color: rgba(0,0,0,.30); color: var(--txt); background: rgba(0,0,0,.07); }

.ctr-fmt-btn[data-fmt="docx"] { border-color: var(--border2); }
.ctr-fmt-btn[data-fmt="docx"]:hover { border-color: var(--border3); background: rgba(0,0,0,.05); }
.ctr-fmt-btn[data-fmt="docx"].active {
  border-color: rgba(0,0,0,.40);
  background: rgba(0,0,0,.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.ctr-fmt-btn[data-fmt="docx"] .ctr-fmt-icon { color: var(--txt2); font-family: var(--font-sans); font-size: 14px; }
.ctr-fmt-btn[data-fmt="docx"].active .ctr-fmt-icon { color: var(--txt); }
.ctr-fmt-btn[data-fmt="docx"] .ctr-fmt-name { color: var(--txt2); }
.ctr-fmt-btn[data-fmt="docx"].active .ctr-fmt-name { color: var(--txt); }

.ctr-fmt-btn[data-fmt="txt"].active { border-color: rgba(180,180,180,.55); background: rgba(180,180,180,.09); }

#ctr-export-pwd-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ctr-modal-foot {
  display: flex; gap: 8px; padding: 14px 20px;
  border-top: 1px solid var(--border); flex-shrink: 0;
  background: rgba(0,0,0,.015);
}
.ctr-export-btn {
  flex: 1.6; padding: 10px; border-radius: 10px; border: none;
  background: var(--txt); color: var(--bg); font-size: 12px; font-weight: 800;
  cursor: pointer; transition: all var(--dur-base) var(--spring);
}
.ctr-export-btn:hover { transform: translateY(-1px); opacity: .88; }

.ctr-preview-stats { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ctr-preview-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 9px 14px; border-radius: 10px;
  background: rgba(0,0,0,.04); border: 1px solid var(--border2);
  flex: 1; min-width: 70px; text-align: center;
}
.ctr-preview-stat-num { font-size: 20px; font-weight: 900; color: var(--txt); font-family: var(--font-mono); line-height: 1; }
.ctr-preview-stat-lbl { font-size: 9.5px; color: var(--txt3); margin-top: 4px; font-weight: 600; letter-spacing: .3px; }

.ctr-preview-folder-list { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; margin-bottom: 4px; }
.ctr-preview-folder-list::-webkit-scrollbar { width: 3px; }
.ctr-preview-folder-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.ctr-preview-folder-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px;
  background: rgba(0,0,0,.03); border: 1px solid var(--border);
  font-size: 12px;
}

.ctr-preview-folder-row--check { cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); user-select: none; }
.ctr-preview-folder-row--check:hover { background: rgba(0,0,0,.05) !important; border-color: var(--border2) !important; }
.ctr-preview-folder-row--check .ctr-folder-check {
  width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--border2); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: var(--bg); transition: all var(--dur-fast);
}
.ctr-preview-folder-row--check.checked .ctr-folder-check { background: var(--txt); border-color: var(--txt); color: var(--bg); }
.ctr-preview-folder-row--check:not(.checked) { opacity: .5; }

.hv-icon-btn { transition: background var(--dur-fast), color var(--dur-fast); }
.hv-icon-btn:hover { background: var(--bg3) !important; color: var(--txt) !important; }

.hv-subtle { transition: background var(--dur-fast), color var(--dur-fast); }
.hv-subtle:hover { background: #F5F5F5 !important; }
.hv-subtle-txt:hover { background: #F5F5F5 !important; color: var(--txt2) !important; }

.hv-ghost { transition: background var(--dur-fast); }
.hv-ghost:hover { background: var(--bg3) !important; }

.hv-danger { transition: background var(--dur-fast); }
.hv-danger:hover { background: var(--danger-bg) !important; }

.hv-dim { transition: background var(--dur-fast); }
.hv-dim:hover { background: rgba(0,0,0,.11) !important; }

.hv-xs { transition: background var(--dur-fast); }
.hv-xs:hover { background: rgba(0,0,0,.04) !important; }
.hv-xs-md:hover { background: rgba(0,0,0,.06) !important; }
.hv-xs-sm:hover { background: rgba(0,0,0,.03) !important; }

.hv-card { transition: border-color var(--dur-fast), background var(--dur-fast); }
.hv-card:hover { border-color: rgba(0,0,0,.20) !important; background: var(--bg4) !important; }
.hv-card-dashed { transition: background var(--dur-fast), border-color var(--dur-fast); }
.hv-card-dashed:hover { background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.22) !important; }

.hv-fade { transition: opacity var(--dur-fast); }
.hv-fade:hover { opacity: .85 !important; }
.hv-fade-sm:hover { opacity: .82 !important; }

.hv-lift { transition: opacity var(--dur-base), transform var(--dur-base); }
.hv-lift:hover { opacity: .85 !important; transform: translateY(-1px) !important; }

.hv-close-danger { transition: color var(--dur-fast); }
.hv-close-danger:hover { color: rgba(200,50,50,.8) !important; }

.hv-bg4-txt2 { transition: background var(--dur-fast), color var(--dur-fast); }
.hv-bg4-txt2:hover { background: var(--bg4) !important; color: var(--txt2) !important; }
/* Fix: inline onmouseenter/onmouseleave → CSS class-based (mobile-safe) */
.hv-ghost-dim:hover { background: rgba(0,0,0,.06) !important; }
.hv-import-replace { background: rgba(0,100,200,.06); }
.hv-import-replace:hover { background: rgba(0,100,200,.12) !important; }
.hv-import-skip:hover { background: rgba(0,0,0,.05) !important; }
.hv-ai-reset { color: var(--txt3); border-color: var(--border2); transition: color var(--dur-base), border-color var(--dur-base); }
.hv-ai-reset:hover { color: var(--danger) !important; border-color: var(--danger) !important; }
.hv-ai-remove { color: var(--txt3); transition: color var(--dur-fast); }
.hv-ai-remove:hover { color: var(--danger) !important; }
.hv-recycle-bin-empty { background: rgba(217,48,37,.05); transition: background var(--dur-fast); }
.hv-recycle-bin-empty:hover { background: rgba(217,48,37,.12) !important; }
.hv-recycle-row { background: var(--bg3); transition: background var(--dur-base); }
.hv-recycle-row:hover { background: var(--bg4) !important; }
.hv-recycle-restore { background: var(--bg2); transition: all var(--dur-base); }
.hv-recycle-restore:hover { background: var(--bg4) !important; }
.hv-recycle-delete { background: transparent; transition: all var(--dur-base); }
.hv-recycle-delete:hover { background: rgba(217,48,37,.08) !important; }
.hv-close-x { background: transparent; transition: background var(--dur-fast); }
.hv-close-x:hover { background: rgba(0,0,0,.06) !important; }
.hv-pe-cancel { background: transparent; transition: background var(--dur-fast); }
.hv-pe-cancel:hover { background: rgba(0,0,0,.05) !important; }
.hv-pe-save { background: transparent; transition: all var(--dur-fast); }
.hv-pe-save:hover { background: rgba(0,0,0,.05) !important; }
.hv-pe-done { background: var(--txt); transition: background var(--dur-fast); }
.hv-pe-done:hover { background: var(--txt2) !important; }
.hv-reset-cancel { background: var(--bg4); transition: background var(--dur-base); }
.hv-reset-cancel:hover { background: var(--bg5) !important; }
.hv-reset-confirm { background: #D93025; transition: all var(--dur-base); }
.hv-reset-confirm:hover { background: #B71C1C !important; }
.hv-export-row { background: var(--bg3); transition: background var(--dur-fast); }
.hv-export-row:hover { background: var(--bg4) !important; }
.hv-abd-cancel { background: transparent; transition: background var(--dur-fast); }
.hv-abd-cancel:hover { background: var(--bg3) !important; }
.hv-abd-delete { background: transparent; transition: background var(--dur-fast); }
.hv-abd-delete:hover { background: rgba(217,48,37,.05) !important; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .qe-cine-overlay { animation: none !important; opacity: 1 !important; }
  .qe-cine-bar-fill { animation: none !important; width: 100% !important; }
}

/* Quick Engine — card utama & result card */
.qe-card {
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}
.qe-card:focus-within {
  border-color: rgba(0,0,0,.18) !important;
  box-shadow: none !important;
}
.qe-result-card {
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}
.qe-logo {
  box-shadow: none !important;
  border: 1px solid var(--border2) !important;
  background: var(--bg4) !important;
}
.qe-generate-btn {
  box-shadow: none !important;
}
.qe-generate-btn:hover {
  box-shadow: none !important;
}

/* Quick Engine — Library panel */
.qe-lib-card {
  box-shadow: none !important;
}
.qe-lib-card:hover {
  box-shadow: none !important;
}

/* Meta Prompt — category cards & shortcuts */
.mp-category-card {
  box-shadow: none !important;
}
.mp-category-card:hover {
  box-shadow: none !important;
}
.mp-shortcut-item:hover {
  box-shadow: none !important;
}
.mp-shortcut-folder:hover {
  box-shadow: none !important;
}

.qe-lib-preview-pop {
  box-shadow: 0 8px 28px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05) !important;
}
.qe-finder-ctx-menu {
  box-shadow: 0 6px 20px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05) !important;
}

.beranda-stat-card:hover {
  box-shadow: none !important;
}

.topbar-logo-icon {
  box-shadow: 0 1px 4px rgba(0,0,0,.14) !important;
}
.topbar-brand:hover .topbar-logo-icon {
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}

.lp-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.lp-hero-eyebrow  { justify-content: center !important; text-align: center !important; }
.lp-hero-headline { text-align: center !important; }
.lp-hero-sub      { text-align: center !important; max-width: 360px !important; margin-left: auto !important; margin-right: auto !important; }
.lp-hero-cta-row  { justify-content: center !important; }

.lp-stat           { text-align: center !important; }
.lp-stat-num       { text-align: center !important; }
.lp-stat-label     { text-align: center !important; }
.lp-stat-hint      { text-align: center !important; }

.lp-section-label  { text-align: left !important; }

.lp-flow-title      { text-align: center !important; }
.lp-flow-step       { text-align: left !important; align-items: flex-start !important; }
.lp-flow-num        {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.lp-flow-body         { text-align: left !important; }
.lp-flow-step-title   { text-align: left !important; }
.lp-flow-step-desc    { text-align: left !important; }
.lp-flow-step-code    { text-align: left !important; }

.lp-feature-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
  color: var(--txt) !important;
  text-align: left !important;
  line-height: 1.2 !important;
  margin-bottom: 0 !important;
}

.lp-usecase-body  { text-align: left !important; }
.lp-usecase-title { text-align: left !important; }
.lp-usecase-desc  { text-align: left !important; }
.lp-usecase-chip  { flex-shrink: 0 !important; }

.lpb-statement-card {
  text-align: center !important;
  align-items: center !important;
}
.lpb-tag      { text-align: center !important; }
.lpb-kicker   { text-align: center !important; }


.lp-compat         { text-align: center !important; }

.lp-bottom-cta         { text-align: center !important; }

.lp-contact-item  {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.lp-contact-label { text-align: center !important; }
.lp-contact-val   { text-align: center !important; }

.nav-item           { text-align: left !important; }
.nav-item .ni-label { text-align: left !important; }
.nav-section-label  { text-align: left !important; }

/* ── SCROLL ISOLATION FIX: prevent sidebar/modal scroll from leaking to feed-col ── */

/* ── SCROLL ISOLATION FIX: prevent sidebar/modal scroll from leaking to feed-col ── */
.left-nav,
.right-panel,
.qe-lib-overlay,
.qe-save-tpl-overlay {
  isolation: isolate;
}
.right-panel *,
.qe-lib-overlay *,
.qe-save-tpl-overlay * {
  overscroll-behavior: contain;
}

/* ── TOUCH SCROLL FIX: sidebar inner content must capture vertical scroll ── */
/* Elemen dengan overflow:hidden di dalam sidebar memblok touch event — override */

.left-nav .nav-lib-items,
.left-nav .nav-lib-items > *,
.left-nav .nav-lib-folder,
.left-nav .nav-lib-tree-wrap,
.left-nav #nav-lib-folders,
.right-panel .rp-collapsible-body,
.right-panel .rp-collapsible-body *,
.right-panel .fw-card,
.right-panel .fw-body,
.right-panel .fw-inner,
.right-panel .fw-section,
.right-panel .funnel-card,
.right-panel .funnel-body,
.right-panel .funnel-inner {
  touch-action: pan-y;
}

/* Pastikan elemen button/clickable di sidebar tidak block pan-y */
.left-nav [onclick],
.left-nav a,
.left-nav .nav-item,
.left-nav .nav-lib-folder-head,
.left-nav .nav-lib-tpl-item,
.right-panel [onclick],
.right-panel a,
.right-panel *,
.right-panel .rp-collapsible-head,
.right-panel .rp-guide-item {
  touch-action: pan-y !important;
}

/* --- LOGIN SCREEN v3 — Editorial Dark/Light --- */

/* ── DARK MODE (default) ── */
#ctr-login-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  transform: translateZ(0);
  backface-visibility: hidden;
  overflow: hidden;

  /* Layout */
  display: grid;
  grid-template-rows: 56px 1fr 44px;
  grid-template-columns: 1fr;
  width: 100%;
  height: 100%;

  /* Dark theme */
  --ls-bg:           #111113;
  --ls-grid:         rgba(255,255,255,.055);
  --ls-vignette:     rgba(0,0,0,.50);
  --ls-h1:           #F4F4EF;
  --ls-h1-muted:     rgba(244,244,239,.50);
  --ls-sub:          rgba(255,255,255,.42);
  --ls-pill-bg:      rgba(255,255,255,.09);
  --ls-pill-border:  rgba(255,255,255,.14);
  --ls-pill-txt:     rgba(255,255,255,.60);
  --ls-logo-bg:      #ffffff;
  --ls-logo-txt:     #111113;
  --ls-logo-name:    #ffffff;
  --ls-card-bg:      rgba(255,255,255,.065);
  --ls-card-border:  rgba(255,255,255,.11);
  --ls-input-bg:     rgba(255,255,255,.075);
  --ls-input-border: rgba(255,255,255,.13);
  --ls-input-focus:  rgba(255,255,255,.30);
  --ls-input-txt:    #F4F4EF;
  --ls-input-ph:     rgba(255,255,255,.30);
  --ls-icon:         rgba(255,255,255,.32);
  --ls-btn-bg:       #F4F4EF;
  --ls-btn-txt:      #111113;
  --ls-btn-hover:    #ffffff;
  --ls-footer:       rgba(255,255,255,.18);

  background-color: var(--ls-bg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ── LIGHT MODE ── */
html:not(.dark) #ctr-login-screen {
  --ls-bg:           #F0F0F5;
  --ls-grid:         rgba(0,0,0,.07);
  --ls-vignette:     rgba(220,220,230,.45);
  --ls-h1:           #111113;
  --ls-h1-muted:     rgba(17,17,19,.38);
  --ls-sub:          rgba(17,17,19,.50);
  --ls-pill-bg:      rgba(0,0,0,.06);
  --ls-pill-border:  rgba(0,0,0,.10);
  --ls-pill-txt:     rgba(17,17,19,.60);
  --ls-logo-bg:      #1C1C1E;
  --ls-logo-txt:     #ffffff;
  --ls-logo-name:    #1C1C1E;
  --ls-card-bg:      rgba(255,255,255,.85);
  --ls-card-border:  rgba(0,0,0,.09);
  --ls-input-bg:     #F9F9FB;
  --ls-input-border: rgba(0,0,0,.12);
  --ls-input-focus:  rgba(0,0,0,.28);
  --ls-input-txt:    #111113;
  --ls-input-ph:     rgba(0,0,0,.28);
  --ls-icon:         rgba(0,0,0,.28);
  --ls-btn-bg:       #1C1C1E;
  --ls-btn-txt:      #ffffff;
  --ls-btn-hover:    #3A3A3C;
  --ls-footer:       rgba(0,0,0,.25);
}

/* ── Grid background ── */
#ctr-login-screen::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--ls-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ls-grid) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* ── Radial vignette ── */
#ctr-login-screen::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 20%, var(--ls-vignette) 100%);
  pointer-events: none;
}

/* ── ROW 1: Topbar ── */
#ctr-login-topbar {
  grid-row: 1;
  grid-column: 1;
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  width: 100%;
}
#ctr-login-logo {
  display: flex; align-items: center; gap: 9px;
}
#ctr-login-logo-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

#ctr-login-logo-name {
  font-size: 14px; font-weight: 700;
  color: var(--ls-logo-name);
  letter-spacing: -.2px;
}
#ctr-login-status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 10px;
  border-radius: 99px;
  background: var(--ls-pill-bg);
  border: 1px solid var(--ls-pill-border);
  font-size: 11px; font-weight: 600;
  color: var(--ls-pill-txt);
  white-space: nowrap;
}
#ctr-login-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34C759; flex-shrink: 0;
}

/* ── ROW 2: Main center content ── */
#ctr-login-main {
  grid-row: 2;
  grid-column: 1;
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  width: 100%;
  min-height: 0;       /* izinkan grid row menyusut, bukan meluber diam-diam */
  overflow-y: auto;    /* jaring pengaman: kalau konten lebih tinggi dari viewport, discroll, bukan ke-clip & tak bisa diklik */
  -webkit-overflow-scrolling: touch;
}

/* ── Inner wrapper — caps max-width ── */
#ctr-login-inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Headline ── */
#ctr-login-h1 {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 600;
  color: var(--ls-h1);
  line-height: 1.18;
  letter-spacing: -.6px;
  margin: 0 0 26px;
}
#ctr-login-h1.font-ready { /* retained for JS compat — no-op */ }
#ctr-login-h1 em {
  font-style: normal;
  font-weight: 400;
  color: var(--ls-h1-muted);
  letter-spacing: -.4px;
}

/* ══════════════════════════════════════════════════════════════════════
   CAROUSEL — 5-slide showcase di login screen
   Gambar = file terpisah di images/carousel/slide-1..5.jpg (bisa direplace).
   Lebar disamakan dengan #ctr-login-card (380px). Pakai native scroll-snap
   (posisi dihitung dalam piksel oleh browser sendiri) — supaya tidak ada
   drift/geser-geser akibat perhitungan persentase transform yang meleset.
════════════════════════════════════════════════════════════════════════ */
#ctr-login-carousel {
  width: 100%;
  max-width: 380px;      /* sama dengan #ctr-login-card */
  margin: 0 0 18px;
  position: relative;
}
#ctr-login-carousel-track {
  display: flex;
  width: 100%;
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge/IE */
  box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.10);
  cursor: grab;
}
#ctr-login-carousel-track::-webkit-scrollbar { display: none; } /* Chrome/Safari */
#ctr-login-carousel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.ctr-lc-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  line-height: 0;
}
.ctr-lc-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--ls-card-bg);
  pointer-events: none;   /* biar drag mouse gak ke-intercept native image-drag */
}
#ctr-login-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 9px;
}
#ctr-login-carousel-dots button {
  width: 6px; height: 6px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: var(--ls-pill-border, rgba(255,255,255,.25));
  transition: width .25s ease, background .25s ease;
}
#ctr-login-carousel-dots button.is-active {
  width: 18px; border-radius: 4px;
  background: #3B82F6;
}

/* ── Form card ── */
#ctr-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--ls-card-bg);
  border: 1px solid var(--ls-card-border);
  border-radius: 14px;
  padding: 22px 20px 18px;
}

/* ══════════════════════════════════════════════════════════════════════
   HERO — Coba Quick Engine (CTA utama halaman login)
════════════════════════════════════════════════════════════════════════ */
#ctr-guest-hero {
  text-align: center;
  padding-bottom: 4px;
}



/* ── Susunan CTA: Quick Engine (utama) di atas, Akses Eksklusif WA di bawah ── */
#ctr-guest-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 2px 0 2px;
}

/* ── Baris CTA utama: "Coba Createrus Sekarang" sejajar dengan tombol
     Scan Barcode/QR (kotak, rasio 1:1 — lebar = tinggi tombol utama). ──
     [FIX] Sebelumnya pakai aspect-ratio:1/1 + flex:0 0 auto + align-items:
     stretch di parent — kombinasi ini TIDAK reliable lintas browser karena
     lebar (main-size) dihitung dari konten (ikon ~20px) SEBELUM proses
     stretch tinggi selesai, jadi aspect-ratio tidak pernah sempat menarik
     lebar mengikuti tinggi tombol utama → hasilnya kotak kecil, bukan
     persegi 1:1 setinggi tombol "Coba Createrus Sekarang".
     Fix: kunci tinggi tombol utama & tombol scan ke ukuran eksplisit yang
     sama (var(--cta-h)), tombol scan jadi persegi murni dari ukuran itu —
     tidak lagi bergantung pada aspect-ratio+stretch. ── */
#ctr-guest-primary-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  --cta-h: 48px;
}
#ctr-guest-primary-row #ctr-guest-btn { width: auto; flex: 1 1 auto; min-width: 0; min-height: var(--cta-h); }

/* ── Tombol Scan Barcode/QR — persegi 1:1 eksplisit (bukan aspect-ratio),
     tingginya dikunci sama dengan tombol utama lewat var(--cta-h). ── */
#ctr-scan-barcode-btn {
  width: var(--cta-h);
  height: var(--cta-h);
  flex: 0 0 var(--cta-h);
  background: linear-gradient(135deg, #4F8CFF, #2F6FED);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, box-shadow var(--dur-base);
  box-shadow: 0 6px 20px rgba(47,111,237,.35);
  padding: 0;
}
#ctr-scan-barcode-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(47,111,237,.45); }
#ctr-scan-barcode-btn:active { transform: translateY(0); }

/* ── CTA utama: tombol Coba Createrus — solid, menonjol ── */
#ctr-guest-btn {
  width: 100%; padding: 15px 16px;
  background: linear-gradient(135deg, #4F8CFF, #2F6FED);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 13.5px; font-weight: 800;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s, box-shadow var(--dur-base);
  font-family: inherit;
  box-shadow: 0 6px 20px rgba(47,111,237,.35);
}
#ctr-guest-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(47,111,237,.45); }
#ctr-guest-btn:active { transform: translateY(0); }

/* ── CTA sekunder: Akses Tanpa Batas — solid (BUKAN transparan), pakai warna
     native tools (putih di dark mode / hitam di light mode — sama seperti
     tombol "Masuk"), tetap satu keluarga bentuk dengan CTA utama. ── */
#ctr-wa-buy-btn {
  width: 100%; padding: 15px 16px;
  background: var(--ls-btn-bg);
  border: none;
  border-radius: 12px;
  color: var(--ls-btn-txt);
  font-size: 13.5px; font-weight: 800;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--dur-base), transform .12s;
  font-family: inherit;
}
#ctr-wa-buy-btn:hover { background: var(--ls-btn-hover); transform: translateY(-1px); }
#ctr-wa-buy-btn:active { transform: translateY(0); }

#ctr-guest-err {
  font-size: 10.5px; font-weight: 600; color: #FF6B6B;
  text-align: center; opacity: 0; transition: opacity var(--dur-base); margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   TOGGLE — "Sudah punya akses? Masuk di sini" (buka form login member)
════════════════════════════════════════════════════════════════════════ */
#ctr-login-toggle-row {
  display: flex; align-items: center; justify-content: center;
  margin: 16px 0 0;
  position: relative;
}
#ctr-login-toggle-row::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--ls-card-border); z-index: 0;
}
#ctr-login-toggle-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ls-card-bg);
  border: none; cursor: pointer;
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  color: var(--ls-h1-muted);
  padding: 0 10px;
  transition: color var(--dur-base);
}
#ctr-login-toggle-btn strong { color: var(--ls-h1); font-weight: 700; }
#ctr-login-toggle-btn:hover { color: var(--ls-h1); }
#ctr-login-toggle-btn .ctr-lt-chev { transition: transform var(--dur-base); flex-shrink: 0; }
#ctr-login-toggle-btn.open .ctr-lt-chev { transform: rotate(180deg); }

/* ── Form login member — collapsed by default ── */
#ctr-login-fields-wrap {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--dur-base) ease, opacity var(--dur-base) ease, margin-top var(--dur-base) ease;
}
#ctr-login-fields-wrap.open {
  max-height: 320px;
  opacity: 1;
  margin-top: 14px;
}

/* ── Inputs ── */
#ctr-login-fields {
  display: flex; flex-direction: column; gap: 9px;
  margin-bottom: 8px;
}
.ctr-lf-wrap { position: relative; }
.ctr-lf-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ls-icon); pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
}
.ctr-lf-input {
  width: 100%; padding: 11px 14px 11px 38px;
  border: 1px solid var(--ls-input-border);
  border-radius: 8px;
  font-size: 13.5px; font-weight: 400;
  background: var(--ls-input-bg);
  color: var(--ls-input-txt);
  transition: border-color var(--dur-base), background var(--dur-base);
  font-family: inherit; outline: none;
}
.ctr-lf-input::placeholder { color: var(--ls-input-ph); }
.ctr-lf-input:focus {
  border-color: var(--ls-input-focus);
}

/* ── Error msg ── */
#ctr-err {
  font-size: 11.5px; font-weight: 600;
  color: #FF6B6B;
  min-height: 18px; text-align: center;
  margin-bottom: 10px; opacity: 0;
  transition: opacity var(--dur-base);
}

/* ── Secondary login button ── */
#ctr-btn {
  width: 100%; padding: 13px 20px;
  background: var(--ls-btn-bg);
  border: none; border-radius: 10px;
  color: var(--ls-btn-txt);
  font-size: 14px; font-weight: 700;
  cursor: pointer; letter-spacing: -.1px;
  transition: background var(--dur-base), transform .1s;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
#ctr-btn:hover { background: var(--ls-btn-hover); transform: translateY(-1px); }
#ctr-btn:active { transform: translateY(0); }
#ctr-btn .ctr-btn-arrow { transition: transform var(--dur-base); }
#ctr-btn:hover .ctr-btn-arrow { transform: translateX(3px); }

/* ── ROW 3: Footer ── */
#ctr-login-footer {
  grid-row: 3;
  grid-column: 1;
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 500;
  color: var(--ls-footer);
  padding: 0 20px;
}

/* ── Login info: catatan kecil "Tentang Penyimpanan Data" (collapsible) ── */
#ctr-login-info {
  margin-top: 10px;
  text-align: center;
}
#ctr-login-info-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  font-size: 10.5px; font-weight: 600; letter-spacing: -.05px;
  color: rgba(255,255,255,.30);
  padding: 5px 9px; border-radius: 7px;
  transition: color var(--dur-base), background var(--dur-base);
}
#ctr-login-info-toggle:hover,
#ctr-login-info-toggle.open {
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.06);
}
html:not(.dark) #ctr-login-info-toggle {
  color: rgba(17,17,19,.34);
}
html:not(.dark) #ctr-login-info-toggle:hover,
html:not(.dark) #ctr-login-info-toggle.open {
  color: rgba(17,17,19,.65);
  background: rgba(0,0,0,.045);
}
#ctr-login-info-toggle .ctr-li-chev {
  transition: transform var(--dur-base);
}
#ctr-login-info-toggle.open .ctr-li-chev {
  transform: rotate(180deg);
}
#ctr-login-info-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  font-size: 10.5px; line-height: 1.65; text-align: justify; text-justify: inter-word;
  color: rgba(255,255,255,.40);
  transition: max-height var(--dur-base) ease, opacity var(--dur-base) ease, margin-top var(--dur-base) ease, padding var(--dur-base) ease;
}
html:not(.dark) #ctr-login-info-panel {
  color: rgba(17,17,19,.48);
}
#ctr-login-info-panel.open {
  max-height: 260px;
  opacity: 1;
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
}
html:not(.dark) #ctr-login-info-panel.open {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.07);
}
#ctr-login-info-panel strong {
  color: var(--ls-h1, inherit);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════
   GUEST QUICK ENGINE MODE — fullscreen, no sidebar/search, fitur terbatas
   Diaktifkan lewat: body.ctr-guest-mode (di-set oleh js/guest-engine.js)
════════════════════════════════════════════════════════════════════════ */
#ctr-guest-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99997;
  background: #111113; color: #fff;
  padding: 9px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.ctr-guest-bar-inner {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  flex-wrap: wrap; max-width: 960px; margin: 0 auto;
}
.ctr-guest-bar-badge {
  background: rgba(255,255,255,.14); padding: 3px 10px; border-radius: 99px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px; flex-shrink: 0;
}
.ctr-guest-bar-text { color: rgba(255,255,255,.62); font-weight: 500; font-size: 11.5px; }
.ctr-guest-bar-cta { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.ctr-guest-bar-cta:hover { color: rgba(255,255,255,.8); }

body.ctr-guest-mode .topbar,
body.ctr-guest-mode .left-nav,
body.ctr-guest-mode .right-panel,
body.ctr-guest-mode .nav-overlay,
body.ctr-guest-mode .rp-drawer-overlay,
body.ctr-guest-mode #fullview-overlay,
body.ctr-guest-mode #tb-search-dropdown,
body.ctr-guest-mode #ctr-topbar-storage-banner,
body.ctr-guest-mode #peek-left-btn,
body.ctr-guest-mode #peek-right-btn,
body.ctr-guest-mode #qe-active-tpl-banner,
body.ctr-guest-mode .skip-to-content {
  display: none !important;
}
body.ctr-guest-mode .main-layout { padding-top: 42px !important; }
body.ctr-guest-mode .feed-col { display: flex; justify-content: center; }
body.ctr-guest-mode .qe-page { max-width: 1080px; width: 100%; margin: 0 auto; }

/* Step 1 — hanya tampilan, tidak bisa diedit/klik */
body.ctr-guest-mode #qe-template.ctr-guest-locked-ta {
  cursor: default; background: var(--bg3); opacity: .92;
}
body.ctr-guest-mode #qe-step1-card .qe-unified-toolbar button,
body.ctr-guest-mode #qe-step1-card .qe-unified-toolbar .qe-tb-btn {
  cursor: not-allowed; opacity: .45;
}

/* Step 2 — hanya isi field + tombol Generate yang aktif */
body.ctr-guest-mode #qe-fast-mode-toggle,
body.ctr-guest-mode #qe-realtime-toggle,
body.ctr-guest-mode #qe-placeholder-toggle,
body.ctr-guest-mode .qe-row-reset-btn,
body.ctr-guest-mode #qe-mp-active-bar,
body.ctr-guest-mode #qe-mp-inactive-bar {
  cursor: not-allowed; opacity: .45;
}

/* Step 3 — hanya Copy + 4 shortcut AI yang aktif */
body.ctr-guest-mode #qe-regen-btn,
body.ctr-guest-mode #qe-edit-result-btn,
body.ctr-guest-mode #qe-export-result-btn,
body.ctr-guest-mode .qe-open-action-btn {
  cursor: not-allowed; opacity: .45;
}

/* --- Merged block 2: /* ── Wrapper: klik seluruh area (row + desc) ── */ --- */
    .ctr-gi-wrap {
      cursor: pointer;
      margin-bottom: 4px;
    }

    /* Card — selalu ada background, persis seperti funnel-card / fw-card */
    .ctr-gi {
      display: flex; align-items: center; gap: 9px;
      padding: 8px 10px;
      border-radius: var(--r8);
      background: var(--bg2);
      border: 0.5px solid rgba(0,0,0,.09);
      transition: border-color var(--dur-base), background var(--dur-base);
      overflow: hidden;
    }
    .ctr-gi-wrap:hover .ctr-gi { border-color: rgba(0,0,0,.18); }
    /* Expanded — border tebal, persis funnel-card-open / fw-card-open */
    .ctr-gi-wrap:has(.ctr-gi-desc.open) .ctr-gi {
      border: 1.5px solid rgba(0,0,0,.28);
      border-radius: var(--r8) var(--r8) 0 0;
      border-bottom: 0.5px solid rgba(0,0,0,.10);
      background: #F5F5F5;
    }
    .ctr-gi { cursor: inherit; }

    .ctr-gi-dot {
      width: 24px; height: 24px; border-radius: 6px;
      background: #F2F2F7;
      border: 0.5px solid rgba(0,0,0,.10);
      flex-shrink: 0; transition: all var(--dur-base);
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; font-weight: 600; color: var(--txt3);
    }
    .ctr-gi-dot.done { background: #28C840; border-color: #28C840; color: white; }
    .ctr-gi-dot.done::after { content: '✓'; font-weight: 900; color: white; font-size: 10px; }

    .ctr-gi-text { flex: 1; min-width: 0; }
    .ctr-gi-label { font-size: 12px; font-weight: 600; color: var(--txt); line-height: 1.3; letter-spacing: -.1px; }
    .ctr-gi-sub   { font-size: 9.5px; color: var(--txt3); margin-top: 1px; line-height: 1.35; }
    .ctr-gi-sub code {
      font-family: var(--font-mono); background: var(--bg5);
      padding: 0 3px; border-radius: 3px; font-size: 9px;
    }
    .ctr-gi-arrow { font-size: 8px; color: var(--ui-muted); flex-shrink: 0; }
    .ctr-gi-lock {
      font-size: 9px; flex-shrink: 0; opacity: .6;
      line-height: 1; display: inline-flex; align-items: center;
    }

    .ctr-gi-chev {
      font-size: 8px; color: var(--ui-muted); flex-shrink: 0;
      transition: transform .26s cubic-bezier(.4,0,.2,1); line-height: 1; display: inline-block;
    }
    .ctr-gi-chev.open { transform: rotate(180deg); }

    /* Body — persis seperti funnel-body / fw-body */
    .ctr-gi-desc {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity var(--dur-base) ease;
      background: #FAFAFA;
      border: 1.5px solid rgba(0,0,0,.28);
      border-top: 0.5px solid rgba(0,0,0,.07);
      border-radius: 0 0 var(--r8) var(--r8);
      margin-bottom: 8px;
    }
    .ctr-gi-desc.open { opacity: 1; overflow: visible; }
    .ctr-gi-desc-inner {
      font-size: 10.5px; color: var(--txt2); line-height: 1.55;
      padding: 10px 12px 12px;
    }
    .ctr-gi-desc-inner strong { font-weight: 600; color: var(--txt); }
    .ctr-gi-desc-inner code {
      font-family: var(--font-mono); background: var(--bg5);
      padding: 0 3px; border-radius: 3px; font-size: 9.5px;
    }
    .ctr-gi-desc-inner em { font-style: italic; color: var(--txt3); }

    @keyframes lp-heroFadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .lp-hero {
      position: relative; overflow: hidden;
      background: var(--bg2);
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 18px;
      padding: 36px 24px 32px;
      margin-bottom: 8px;
      text-align: center;
      box-shadow: none;
    }
    .lp-hero::after {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle,rgba(0,0,0,.055) 1px,transparent 1px);
      background-size: 22px 22px;
      pointer-events: none; z-index: 0;
      mask-image: radial-gradient(ellipse 90% 90% at 50% 50%,black 20%,transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%,black 20%,transparent 75%);
    }
    .lp-hero > * { position: relative; z-index: 1; }

    .lp-hero-eyebrow {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-mono);
      font-size: 8.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
      color: var(--txt3); margin-bottom: 18px;
      justify-content: center;
      animation: lp-heroFadeUp .5s var(--ease) .05s both;
    }
    .lp-hero-eyebrow-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--txt3); opacity: .55;
      animation: posBlinkDot 2.6s ease-in-out infinite;
    }

    .lp-hero-headline {
      font-family: var(--font-sans);
      font-style: normal;
      font-size: clamp(20px, 4.5vw, 26px);
      font-weight: 700;
      color: var(--txt);
      line-height: 1.28;
      letter-spacing: -.5px;
      margin-bottom: 22px;
      animation: lp-heroFadeUp .55s var(--ease) .12s both;
    }
    .lp-hero-headline mark {
      background: none; color: inherit;
      position: relative; display: inline;
    }
    .lp-hero-headline mark::after {
      content: '';
      position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
      background: rgba(255,255,255,.35);
      border-radius: 2px;
      z-index: -1;
    }

    .lp-hero-sub {
      display: none;
    }

    .lp-hero-cta-row {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; flex-wrap: wrap;
      animation: lp-heroFadeUp .55s var(--ease) .20s both;
    }
    .lp-cta-primary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 24px;
      background: var(--txt); color: #fff;
      border: none; border-radius: 12px;
      font-size: 13px; font-weight: 700; cursor: pointer;
      transition: all var(--dur-base) var(--spring); letter-spacing: -.1px;
      font-family: inherit;
    }
    .lp-cta-primary:hover { opacity: .85; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0,0,0,.2); }
    .lp-cta-primary:active { transform: scale(.97); }
    .lp-stats {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 6px; margin-bottom: 10px;
    }
    .lp-stat {
      background: var(--bg2); border: 1px solid rgba(0,0,0,.09);
      border-radius: 14px; padding: 16px 10px 14px;
      transition: border-color var(--dur-base), transform var(--dur-base) var(--spring);
      text-align: center; position: relative; overflow: hidden;
      cursor: default;
    }
    .lp-stat:hover { border-color: rgba(0,0,0,.18); transform: translateY(-1px); box-shadow: none; }
    .lp-stat-num {
      font-family: var(--font-mono);
      font-size: 22px; font-weight: 700; color: var(--txt);
      line-height: 1; margin-bottom: 5px;
    }
    .lp-stat-label {
      font-size: 11.5px; font-weight: 700; color: var(--txt2);
      letter-spacing: -.1px; line-height: 1.3; margin-bottom: 3px;
    }
    .lp-stat-hint {
      font-size: 10px; color: var(--txt3); line-height: 1.4;
      padding: 0 4px;
    }

    .lp-section {
      margin-top: 20px; margin-bottom: 8px;
    }
    .lp-section-head {
      display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    }
    .lp-section-label {
      font-family: var(--font-mono);
      font-size: 8px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: var(--txt3);
      white-space: nowrap;
    }
    .lp-section-line { flex: 1; height: 1px; background: var(--border); }
    .lp-section-title {
      font-size: 16px; font-weight: 800; color: var(--txt);
      letter-spacing: -.3px; margin-bottom: 4px;
    }
    .lp-section-sub {
      font-size: 12px; color: var(--txt3); line-height: 1.55;
    }

    .lp-flow {
      background: var(--bg2); border: 1px solid rgba(0,0,0,.09);
      border-radius: 14px; padding: 4px 16px; overflow: hidden;
    }
    .lp-flow-title {
      display: none;
    }
    .lp-flow-steps {
      display: flex; flex-direction: column; gap: 0;
    }
    .lp-flow-step {
      display: flex; gap: 12px; align-items: center;
      padding: 11px 0;
      border-bottom: 1px solid var(--border);
      position: relative;
    }
    .lp-flow-step:last-child { border-bottom: none; padding-bottom: 11px; }
    .lp-flow-step:first-child { padding-top: 11px; }
    .lp-flow-num {
      width: 22px; height: 22px; border-radius: 6px;
      background: var(--num-bg) !important; color: var(--num-fg) !important;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono);
      font-size: 9px; font-weight: 700; flex-shrink: 0;
    }
    .lp-flow-body { flex: 1; min-width: 0; }
    .lp-flow-step-title {
      font-size: 12px; font-weight: 600; color: var(--txt);
      letter-spacing: -.1px; line-height: 1.3;
    }
    .lp-flow-step-desc {
      display: none;
    }
    .lp-flow-step-code {
      display: inline-block; margin-top: 4px;
      font-family: var(--font-mono);
      font-size: 9px; color: var(--txt2);
      background: var(--bg4); border: 1px solid var(--border2);
      padding: 2px 7px; border-radius: 5px; letter-spacing: .2px;
    }
    .lp-flow-arrow-icon { font-size: 13px; flex-shrink: 0; margin-top: 5px; opacity: .35; }
    .lp-flow-steps--row {
      flex-direction: row !important;
      align-items: center;
      gap: 0;
      padding: 4px 0;
    }
    .lp-flow-step--col {
      flex: 1;
      flex-direction: column !important;
      align-items: flex-start !important;
      border-bottom: none !important;
      padding: 11px 8px !important;
      gap: 6px !important;
    }
    /* Strip cara kerja */
    .lp-flow--strip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      flex-wrap: wrap;
    }
    .lp-strip-step {
      display: flex; align-items: center; gap: 7px;
      font-size: 12.5px; font-weight: 600; color: var(--txt);
      letter-spacing: -.1px;
    }
    .lp-strip-num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 20px; height: 20px; border-radius: 6px;
      background: var(--num-bg) !important; color: var(--num-fg) !important;
      font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
      flex-shrink: 0;
    }
    .lp-strip-arrow {
      font-size: 12px; color: var(--txt3); opacity: .45; flex-shrink: 0;
    }
        .lp-flow-sep {
      flex-shrink: 0;
      font-size: 13px;
      color: var(--txt3);
      opacity: .4;
      padding: 0 2px;
    }

    .lp-usecases {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    }
    .lp-usecase {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg2); border: 1px solid rgba(0,0,0,.09);
      border-radius: 12px; padding: 11px 13px;
      transition: border-color var(--dur-base);
      box-shadow: none;
    }
    .lp-usecase:hover { border-color: rgba(0,0,0,.18); }
    .lp-usecase-icon {
      width: 30px; height: 30px; border-radius: 8px;
      background: var(--bg4); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; flex-shrink: 0;
    }
    .lp-usecase-body { flex: 1; min-width: 0; }
    .lp-usecase-title {
      font-size: 11.5px; font-weight: 700; color: var(--txt);
      margin-bottom: 1px; letter-spacing: -.05px;
    }
    .lp-usecase-desc {
      font-size: 10px; color: var(--txt3); line-height: 1.4;
    }
    .lp-usecase-chip {
      display: none;
    }

    .lp-compat {
      background: var(--bg2); border: 1px solid rgba(0,0,0,.09);
      border-radius: 14px; padding: 16px 18px 14px; overflow: hidden;
    }
    .lp-compat-label {
      font-family: var(--font-mono);
      font-size: 7.5px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: var(--txt3); margin-bottom: 12px;
    }
    .lp-compat-logos {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    .lp-compat-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 12px; border-radius: 99px;
      background: var(--bg4); border: 1px solid var(--border2);
      font-size: 10.5px; font-weight: 600; color: var(--txt2);
      transition: border-color var(--dur-base);
    }
    .lp-compat-pill:hover { border-color: var(--border3); }
    .lp-compat-pill-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--txt3); opacity: .4; flex-shrink: 0;
    }

    .lp-contact {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 6px; margin-top: 10px;
    }
    .lp-contact-item {
      display: flex; flex-direction: column; align-items: center; gap: 5px;
      padding: 12px 8px; background: var(--bg2); border: 1px solid rgba(0,0,0,.09);
      border-radius: 12px; text-align: center; cursor: pointer;
      transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
    }
    .lp-contact-item:hover { border-color: rgba(0,0,0,.20); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
    .lp-contact-item:active { transform: translateY(0); box-shadow: none; }
    .lp-contact-icon { font-size: 16px; }
    .lp-contact-label { font-size: 10.5px; font-weight: 700; color: var(--txt); }
    .lp-contact-val {
      font-family: var(--font-mono);
      font-size: 8.5px; color: var(--txt3);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
    }

      .aff2-card {
        border-radius: 20px;
        border: 1px solid rgba(0,0,0,.09);
        background: var(--bg2);
        overflow: hidden;
        position: relative;
      }

      .aff2-card::before {
        content: '';
        position: absolute; top: 0; left: 0; right: 0; height: 2px;
        background: var(--border3);
        z-index: 1;
      }

      .aff2-inner { padding: 24px 20px 20px; position: relative; z-index: 1; }

      .aff2-eyebrow {
        display: inline-flex; align-items: center; gap: 6px;
        font-family: var(--font-mono);
        font-size: 8px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
        color: var(--txt3); margin-bottom: 12px;
      }
      .aff2-live-dot {
        width: 5px; height: 5px; border-radius: 50%;
        background: var(--txt3); flex-shrink: 0;
        animation: posBlinkDot 2s ease-in-out infinite;
      }

      .aff2-headline {
        font-family: var(--font-sans);
        font-size: clamp(22px, 5.5vw, 28px);
        font-weight: 900; line-height: 1.15; letter-spacing: -.8px;
        color: var(--txt); margin-bottom: 16px;
      }
      .aff2-headline .aff2-green {
        color: var(--txt);
        font-style: italic;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
        text-decoration-color: rgba(0,0,0,.22);
      }

      .aff2-stats {
        display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap;
      }
      .aff2-stat {
        display: flex; align-items: center; gap: 7px;
        background: var(--bg4); border: 1px solid var(--border2);
        border-radius: 10px; padding: 8px 12px;
        flex: 1; min-width: 0;
        transition: border-color var(--dur-base);
      }
      .aff2-stat:hover { border-color: var(--border3); }
      .aff2-stat-val {
        font-family: var(--font-mono);
        font-size: 15px; font-weight: 900; color: var(--txt);
        line-height: 1; letter-spacing: -.5px; white-space: nowrap;
      }
      .aff2-stat-val.green { color: var(--txt); }
      .aff2-stat-label {
        font-size: 10px; font-weight: 600; color: var(--txt3);
        line-height: 1.3;
      }

      .aff2-flow {
        display: flex; align-items: center; gap: 4px;
        margin-bottom: 18px; flex-wrap: nowrap; overflow: hidden;
      }
      .aff2-flow-step {
        display: flex; align-items: center; gap: 6px;
        background: var(--bg3); border: 1px solid var(--border);
        border-radius: 99px; padding: 6px 11px;
        flex: 1; min-width: 0; white-space: nowrap;
        overflow: hidden;
      }
      .aff2-flow-num {
        font-family: var(--font-mono);
        font-size: 8.5px; font-weight: 800; color: var(--txt3);
        flex-shrink: 0;
      }
      .aff2-flow-label {
        font-size: 10px; font-weight: 700; color: var(--txt2);
        overflow: hidden; text-overflow: ellipsis;
      }
      .aff2-flow-arrow {
        font-size: 10px; color: var(--txt3); opacity: .4; flex-shrink: 0;
      }

      .aff2-via {
        display: inline-flex; align-items: center; gap: 6px;
        margin-bottom: 18px;
        font-size: 10.5px; font-weight: 600; color: var(--txt3);
      }
      .aff2-via-pill {
        display: inline-flex; align-items: center; gap: 5px;
        background: var(--bg4); border: 1px solid var(--border2);
        border-radius: 99px; padding: 3px 10px 3px 7px;
        font-size: 10.5px; font-weight: 700; color: var(--txt2);
      }
      .aff2-via-dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: var(--txt3); flex-shrink: 0;
      }

      .aff2-cta {
        display: flex; align-items: center; justify-content: center; gap: 0;
        width: 100%;
        padding: 12px 18px;
        background: var(--txt); color: var(--bg);
        border: none; border-radius: var(--r12);
        font-size: 13.5px; font-weight: 900; cursor: pointer;
        transition: all var(--dur-base) var(--spring); font-family: inherit;
        letter-spacing: -.1px; text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,.12);
      }
      .aff2-cta:hover { transform: translateY(-1px); box-shadow: none; }
      .aff2-cta:active { transform: scale(.98); }
      .aff2-cta-sub { font-size: 9px; font-weight: 500; opacity: .55; display: block; margin-top: 2px; }

#page-license {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--topbar-h));
}
.lic-page {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  animation: pageIn var(--dur-base) var(--ease);
}
.lic-inner {
  padding: 28px 24px 60px;
  display: flex; flex-direction: column; gap: 6px;
  width: 100%;
}

.lic-header {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 18px;
  margin-bottom: 4px;
}
.lic-header-icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.04)); border: 1px solid rgba(0,0,0,.10);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.lic-header-eyebrow {
  font-family: var(--font-mono);
  font-size: 8.5px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--txt3); margin-bottom: 4px;
}
.lic-header-title {
  font-size: 20px; font-weight: 800; color: var(--txt);
  letter-spacing: -.4px; line-height: 1.2; margin-bottom: 4px;
}
.lic-header-sub {
  font-size: 11.5px; color: var(--txt3); font-weight: 500;
}

.lic-intro-block {
  padding: 18px 24px;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 14px;
  font-size: 13px; color: var(--txt2); line-height: 1.75;
}
.lic-intro-block strong { color: var(--txt); font-weight: 700; }

.lic-group {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 16px; overflow: hidden;
}
.lic-group-label {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 20px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.lic-label-green { color: #1a8c30; }
.lic-label-red   { color: #b02020; }
.lic-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.lic-dot-green { background: #28C840; }
.lic-dot-red   { background: #D93025; }

.lic-list {
  display: flex; flex-direction: column;
}
.lic-item {
  display: flex; align-items: baseline; gap: 13px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--txt2); line-height: 1.65;
  transition: background var(--dur-fast);
}
.lic-item:last-child { border-bottom: none; }
.lic-item:hover { background: var(--bg3); }
.lic-item strong { color: var(--txt); font-weight: 600; }
.lic-item em { font-style: italic; }

.lic-item-check {
  flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; margin-top: 2px;
}
.lic-check-green {
  background: rgba(40,200,64,.10); border: 1px solid rgba(40,200,64,.30);
  color: #1a8c30;
}
.lic-check-red {
  background: rgba(217,48,37,.08); border: 1px solid rgba(217,48,37,.22);
  color: #c0392b;
}

.lic-warn-block {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 22px;
  background: var(--bg2); border: 1px solid var(--border2);
  border-left: 3px solid #e6a817;
  border-radius: 14px;
}
.lic-warn-badge {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: rgba(230,168,23,.10); border: 1px solid rgba(230,168,23,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.lic-warn-title {
  font-size: 11px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--txt); margin-bottom: 6px;
}
.lic-warn-body {
  font-size: 12.5px; color: var(--txt2); line-height: 1.7;
}
.lic-warn-body strong { color: var(--txt); font-weight: 700; }

.lic-footer-note {
  padding: 16px 4px 0;
  font-size: 11px; color: var(--txt3); text-align: center; line-height: 1.7;
}
.lic-footer-strong {
  display: block; margin-top: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--txt3);
}
.lic-header-owner {
  font-size: 11px; font-weight: 500; color: var(--txt3);
  margin-top: 5px; letter-spacing: .1px;
}
.lic-header-owner strong { color: var(--txt2); font-weight: 700; }

/* ── Beranda owner credit line ── */
#beranda-owner-credit {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 4px 24px 28px;
  font-size: 11px; font-weight: 500; color: var(--txt3);
  letter-spacing: .1px;
}
#beranda-owner-credit strong { color: var(--txt2); font-weight: 600; }
.boc-sep { opacity: .35; }
/* wa-modal */
.wa-modal-overlay{position:fixed;inset:0;z-index:9900;background:rgba(0,0,0,.40);align-items:center;justify-content:center;padding:20px}
.wa-modal-box{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;width:100%;max-width:360px;box-shadow:0 8px 60px rgba(0,0,0,.28),0 2px 12px rgba(0,0,0,.16);overflow:visible}
.wa-modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px 12px;border-bottom:1px solid var(--border);border-radius:18px 18px 0 0;overflow:hidden}
.wa-modal-head-left{display:flex;align-items:center;gap:8px}
.wa-modal-title{font-size:13.5px;font-weight:800;color:var(--txt)}
.wa-modal-close{background:rgba(0,0,0,.06);border:none;cursor:pointer;color:var(--txt3);font-size:16px;line-height:1;padding:0;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast)}
.wa-modal-close:hover{background:rgba(0,0,0,.12)}
.wa-modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px;border-radius:0 0 18px 18px;overflow:hidden}
.wa-modal-label{font-size:10px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.6px;display:block;margin-bottom:5px}
.wa-modal-input{width:100%;padding:9px 12px;border-radius:9px;border:1.5px solid var(--border2);background:var(--bg3);color:var(--txt);font-size:13px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color var(--dur-base)}
.wa-modal-input:focus{border-color:var(--border3)}
.wa-modal-textarea{width:100%;padding:9px 12px;border-radius:9px;border:1.5px solid var(--border2);background:var(--bg3);color:var(--txt);font-size:13px;font-family:inherit;outline:none;resize:none;box-sizing:border-box;transition:border-color var(--dur-base);line-height:1.5}
.wa-modal-submit{width:100%;padding:11px;border-radius:10px;border:none;background:#1C1C1E;color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity var(--dur-base),transform var(--dur-fast);letter-spacing:.2px}
.wa-modal-submit:hover{opacity:.85}


@media (max-width: 600px) {
  .lic-inner { padding: 16px 14px 60px; }
  .lic-header { padding: 18px 18px; }
  .lic-intro-block { padding: 16px 18px; }
  .lic-item { padding: 13px 16px; }
  .lic-group-label { padding: 12px 16px; }
  .lic-warn-block { padding: 16px 16px; }
}

.qe-conflict-btn {
  width:100%; padding:10px 14px; border-radius:10px;
  font-size:12px; font-weight:800; cursor:pointer;
  text-align:left; transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
  display: block;
}
.qe-conflict-btn--replace {
  border: 1.5px solid rgba(180,120,0,.22);
  background: rgba(255,160,40,.08);
  color: #8B5A00;
}
.qe-conflict-btn--replace:hover { background: rgba(255,160,40,.14); border-color: rgba(180,120,0,.38); }
.qe-conflict-btn--duplicate {
  border: 1.5px solid var(--border2);
  background: rgba(0,0,0,.03);
  color: var(--txt2);
}
.qe-conflict-btn--duplicate:hover {
  background: rgba(0,0,0,.06);
  border-color: var(--border3);
  color: var(--txt);
}
.qe-conflict-btn--skip {
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--txt3);
}
.qe-conflict-btn--skip:hover {
  color: var(--txt2);
  background: rgba(0,0,0,.03);
  border-color: var(--border2);
}

:focus-visible {
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

.ctr-conflict-btn { transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base); }
.ctr-conflict-btn:hover { opacity: .88; }

.qe-import-conflict-btn { transition: background var(--dur-base), border-color var(--dur-base); }

.qe-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--spring);
  background: var(--txt);
  border: 1px solid var(--border2);
  color: var(--bg);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.1px;
  padding: 9px 18px;
  border-radius: 20px;
  z-index: 9999999;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  max-width: min(420px, calc(100vw - 32px));
  width: max-content;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: unset;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.14), 0 1px 6px rgba(0,0,0,.07);
  line-height: 1.45;
}
.qe-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); will-change: opacity, transform; }

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.14) transparent;
}

.qe-generate-btn { position: relative; overflow: hidden; }
.qe-generate-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0s;
  pointer-events: none;
}
.qe-generate-btn:not(:disabled):hover::after { transform: translateX(100%); transition: transform .5s ease; }

::selection { background: rgba(0,0,0,.12); color: var(--txt); }

.qe-fields-empty {
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--txt3);
  font-size: 12.5px;
  line-height: 1.55;
  user-select: none;
}
.qe-fields-empty > div:first-child { font-size: 28px; opacity: .22; }

.nav-item.active {
  position: relative;
  color: var(--txt);
  font-weight: 600;
  border-color: rgba(0,0,0,.10);
}
.nav-item.active::before { display: none; }

#qe-result-text {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #2C2C2E;
}

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.qe-lib-grid:empty::after {
  content: '';
  display: block;
  height: 48px;
  background: linear-gradient(90deg, var(--bg3) 0%, var(--bg5) 50%, var(--bg3) 100%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r8);
  margin: 8px;
}

.topbar-search input:focus {
  background: rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}

.qe-lib-main:hover::-webkit-scrollbar-thumb { background: var(--border3); }

.qe-generate-btn:active:not(:disabled) { transform: scale(.98); }
.qe-copy-btn:active,
.eb2-cta-btn:active:active { transform: scale(.97); } /* kept for safety */

.qe-lib-empty-state {
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.qe-lib-empty-icon {
  font-size: 40px;
  opacity: .2;
  margin-bottom: 4px;
  color: var(--txt3);
}
.qe-lib-empty-icon svg { display: block; }
.qe-lib-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt2);
  letter-spacing: -.2px;
}
.qe-lib-empty-desc {
  font-size: 12px;
  color: var(--txt3);
  line-height: 1.6;
  max-width: 260px;
}

.page, .rg-page, .fw-page { animation: pageIn .24s cubic-bezier(.4,0,.2,1) !important; }

.qe-kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--txt3);
  opacity: .7;
}
.qe-kbd {
  background: rgba(0,0,0,.05);
  border: 1px solid var(--border2);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 8.5px;
  line-height: 1.4;
}

.qe-lib-tags-row { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.qe-lib-tag-chip { scroll-snap-align: start; }

body, .topbar, .qe-lib-modal {
  transition: background-color var(--dur-slow) ease, border-color var(--dur-slow) ease, color var(--dur-slow) ease;
}
.left-nav { transition: transform var(--dur-base) var(--ease), background-color var(--dur-slow) ease, border-color var(--dur-slow) ease, color var(--dur-slow) ease; }

button:disabled, input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; user-select: none; }

html { color-scheme: light; }

#tb-darkmode-btn { position: relative; }
#tb-darkmode-btn svg { transition: transform .4s var(--spring), opacity var(--dur-slow); }
#tb-darkmode-btn .icon-sun { display: none; }

/* ── Move to Folder modal — visible in both themes ── */
.qe-move-modal-inner {
  border: 1.5px solid rgba(0,0,0,.14);
  box-shadow: 0 20px 60px rgba(0,0,0,.16), 0 4px 16px rgba(0,0,0,.09), 0 0 0 1px rgba(0,0,0,.06);
}

.qe-lib-modal {
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,.13);
  box-shadow: 0 24px 80px rgba(0,0,0,.17), 0 4px 16px rgba(0,0,0,.07);
}

.qe-lib-head {
  background: var(--bg3);
  border-bottom: 1px solid var(--border2);
  padding: 13px 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
.qe-lib-head-icon {
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,.11);
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.qe-lib-head-title { font-size: 13.5px; font-weight: 700; color: var(--txt); letter-spacing: -.2px; }
.qe-lib-head-sub { color: var(--txt3); font-size: 10.5px; }
.qe-lib-manage-btn {
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.13);
  color: var(--txt2);
  font-size: 11.5px;
  font-weight: 600;
}
.qe-lib-manage-btn:hover { background: rgba(0,0,0,.10) !important; border-color: rgba(0,0,0,.20) !important; color: var(--txt) !important; }
.qe-lib-close { background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.11); color: var(--txt3); }
.qe-lib-close:hover { background: rgba(255,59,48,.10) !important; border-color: rgba(255,59,48,.25) !important; color: #ff3b30 !important; }

.qe-lib-tags-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 4px !important;
  padding: 5px 16px 5px 10px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
}
.qe-lib-tag-chip { background: transparent; border: 1px solid transparent; color: #6E6E73; font-size: 10.5px; font-weight: 600; border-radius: 6px; padding: 3px 8px; }
.qe-lib-tag-chip:hover { background: rgba(0,0,0,.05) !important; color: var(--txt) !important; }
.qe-lib-tag-chip.active { background: var(--txt) !important; border-color: var(--txt) !important; color: var(--bg2) !important; }
.qe-lib-tag-chip .qe-lib-tag-count { color: #AEAEB2; opacity: 1; }
.qe-lib-tag-chip.active .qe-lib-tag-count { color: rgba(255,255,255,.55) !important; opacity: 1 !important; }

.qe-lib-content-wrap { background: var(--bg2); }

.qe-lib-del-sel-btn { background: transparent; border: 1px solid rgba(0,0,0,.13); color: var(--txt2); font-size: 11px; font-weight: 600; }
.qe-lib-del-sel-btn:hover { background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.20) !important; color: var(--txt) !important; }
.qe-lib-del-sel-btn:active { background: rgba(0,0,0,.10) !important; border-color: rgba(0,0,0,.26) !important; }
.qe-lib-del-sel-btn.edit-mode-btn { background: transparent; border-color: rgba(0,0,0,.13); color: var(--txt2); }
.qe-lib-del-sel-btn.edit-mode-btn:hover { background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.20) !important; color: var(--txt) !important; }
.qe-lib-del-sel-btn.qe-lib-add-tpl-btn { background: var(--txt); color: var(--bg2); border-color: transparent; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.qe-lib-del-sel-btn.qe-lib-add-tpl-btn:hover { background: var(--txt2) !important; }
.qe-lib-del-sel-btn.qe-lib-add-tpl-btn:active { background: #000 !important; transform: scale(.97); }
.qe-lib-del-sel-btn.danger { color: #d92d20; border-color: rgba(217,45,32,.20); background: transparent; }
.qe-lib-del-sel-btn.danger:hover { background: rgba(217,45,32,.07) !important; border-color: rgba(217,45,32,.32) !important; }
.qe-lib-del-sel-btn.danger:active { background: rgba(217,45,32,.13) !important; }

.qe-lib-folder-sidebar { background: var(--bg3); border-right: 1px solid rgba(0,0,0,.07); padding: 9px 7px; }
.qe-lib-folder-item { color: #48484A; font-size: 11.5px; font-weight: 500; border-radius: 7px; padding: 6px 9px; border: 1px solid transparent; }
.qe-lib-folder-item:hover { background: rgba(0,0,0,.05) !important; color: var(--txt) !important; }

.nav-lib-subfolder-wrap { position: relative; }

.qe-lib-folder-item-sub {
  padding-left: 22px;
  font-size: 11px;
  position: relative;
}
.qe-lib-folder-item-sub::before {
  content: '↳';
  position: absolute;
  left: 8px;
  opacity: .35;
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.qe-lib-fi-ctx-item.subfolder-action { color: #3A7BD5; }
.qe-lib-fi-ctx-item.subfolder-action .qe-lib-fi-ctx-icon { color: #3A7BD5; }

.qe-subfolder-row { cursor: pointer; transition: background var(--dur-fast); }
.qe-subfolder-row:hover { background: var(--bg4); }

.qe-subfolder-divider {
  display: flex;
  align-items: center;
  padding: 7px 16px 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--txt3);
  opacity: .7;
  user-select: none;
  pointer-events: none;
}
.qe-subfolder-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  margin-left: 10px;
}

.qe-move-checkbox { border-color: rgba(0,0,0,.35); }
.qe-move-checkbox.checked { background: rgba(0,0,0,.82); border-color: rgba(0,0,0,.82); }
.qe-move-checkbox.checked::after { content: '✓'; color: var(--bg2); font-size: 9px; font-weight: 900; line-height: 1; }
.qe-move-row-selected > .qe-finder-row { background: rgba(0,0,0,.05); }
.qe-move-exec-btn {
  background: var(--txt);
  color: var(--bg2);
  border-color: transparent;
}
.qe-move-exec-btn:disabled { opacity: .4; }
.qe-move-mode-btn { color: rgba(0,0,0,.65); border-color: rgba(0,0,0,.20); }
.qe-move-mode-btn:hover {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.30);
  color: rgba(0,0,0,.85);
}
.qe-lib-move-item-dest { transition: background var(--dur-fast); }

.qe-breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.qe-breadcrumb-back {
  width: 26px; height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--txt2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast);
  flex-shrink: 0;
  line-height: 1;
  touch-action: manipulation;
}
.qe-breadcrumb-back:hover {
  background: var(--bg4);
  border-color: var(--border3);
  color: var(--txt);
}
.qe-breadcrumb-path {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  min-width: 0;
}
.qe-breadcrumb-crumb {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.qe-breadcrumb-link {
  color: var(--txt2);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-fast);
  padding: 2px 4px;
  border-radius: 4px;
  /* reset gaya bawaan <button> supaya tampilannya tetap sama seperti <span> sebelumnya */
  border: none;
  background: transparent;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
.qe-breadcrumb-link:hover { color: var(--txt); background: var(--bg5); }
.qe-breadcrumb-chevron {
  color: var(--txt3);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  margin: 0 1px;
}
.qe-breadcrumb-active { color: var(--txt); font-weight: 700; }

.qe-lib-folder-item.active { background: var(--bg2) !important; border-color: rgba(0,0,0,.11) !important; color: var(--txt) !important; font-weight: 600 !important; box-shadow: 0 1px 3px rgba(0,0,0,.07) !important; }
.qe-lib-fi-count { background: rgba(0,0,0,.07); color: var(--txt3); }
.qe-lib-folder-item.active .qe-lib-fi-count { background: rgba(0,0,0,.06) !important; color: #6E6E73 !important; }

.qe-lib-add-folder-btn {
  border: 1.5px dashed rgba(0,0,0,.25);
  color: #6E6E73;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  width: 100%;
}
.qe-lib-add-folder-btn:hover { border-color: rgba(0,0,0,.38) !important; color: var(--txt2) !important; background: rgba(0,0,0,.04) !important; }

.qe-lib-body { background: var(--bg2); padding: 0; cursor: default; }
.qe-lib-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.11); }

.qe-finder-header {
  background: var(--bg);
  border-bottom: 1.5px solid rgba(0,0,0,.10);
  color: #AEAEB2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  height: 27px;
}

.qe-finder-row {
  background: var(--bg2);
  border-bottom: 1px solid rgba(0,0,0,.055);
  min-height: 32px;
}
.qe-finder-row:nth-child(even) { background: var(--bg2); }
.qe-finder-row:hover { background: #F7F7F9 !important; }
.qe-finder-row:last-child { border-bottom: none; }
.qe-finder-row-selected { background: var(--bg4); }

.qe-finder-row-wrap:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.06) !important; }
.qe-finder-row-wrap .qe-finder-row { border-bottom: none; }

.qe-finder-row-wrap.expanded > .qe-finder-row { background: var(--bg); border-bottom: 1px solid rgba(0,0,0,.08); }

.qe-finder-breadcrumb-row {
  background: var(--bg);
  border-top: 1px solid rgba(0,0,0,.07);
  border-bottom: 1px solid rgba(0,0,0,.07);
  padding: 5px 10px 5px 40px;
  color: var(--txt3);
}
.qe-fb-name { color: var(--txt2); font-weight: 600; }
.qe-fb-tags, .qe-fb-segment { color: var(--txt3); }
.qe-fb-sep { color: var(--ui-muted); opacity: 1; }
.qe-fb-meta { color: #AEAEB2; opacity: 1; }

.qe-fb-actions { gap: 4px; }
.qe-fb-icon-btn {
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.13);
  background: var(--bg2);
  color: #6E6E73;
  opacity: 1;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  white-space: nowrap;
}
.qe-fb-icon-btn:hover { background: var(--bg2) !important; border-color: rgba(0,0,0,.24) !important; color: var(--txt) !important; }
.qe-fb-icon-btn.primary {
  background: var(--txt);
  border-color: transparent;
  color: var(--bg2);
  opacity: 1;
  padding: 0 10px;
  font-size: 11px; font-weight: 700;
}
.qe-fb-icon-btn.primary:hover { background: var(--txt2) !important; }

.qe-finder-inline-preview {
  background: var(--bg2);
  border-top: 1px solid rgba(0,0,0,.07);
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.qe-inline-preview-txt {
  color: var(--txt2);
  font-size: 11.5px;
  line-height: 1.7;
  padding: 10px 16px 8px;
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,.06);
  letter-spacing: -.01em;
}
.qe-inline-preview-txt::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); }

.qe-inline-preview-footer {
  padding: 7px 12px 8px;
  display: flex;
  gap: 6px;
  background: #F7F7F9;
  border-top: 1px solid rgba(0,0,0,.06);
  align-items: center;
  position: relative;
  z-index: 2 !important;
}

.qe-ipreview-pakai-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: 7px;
  background: var(--txt);
  color: var(--bg2);
  border: none;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-base) var(--spring) !important;
  letter-spacing: -.01em;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.qe-ipreview-pakai-btn:hover { background: var(--txt2) !important; transform: translateY(-1px) !important; box-shadow: 0 3px 8px rgba(0,0,0,.18) !important; }
.qe-ipreview-pakai-btn:active { transform: scale(.97) !important; }

.qe-ipreview-close-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: 7px;
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,.16);
  color: #6E6E73;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.qe-ipreview-close-btn:hover { background: var(--bg) !important; border-color: rgba(0,0,0,.26) !important; color: var(--txt2) !important; }
.qe-ipreview-close-btn:active { transform: scale(.97) !important; }

.qe-ipreview-copy-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: 7px;
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,.16);
  color: #6E6E73;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  pointer-events: auto;
}
.qe-ipreview-copy-btn:hover { background: var(--bg) !important; border-color: rgba(0,0,0,.26) !important; color: var(--txt2) !important; }
.qe-ipreview-copy-btn:active { transform: scale(.97) !important; }

.qe-finder-inline-preview div[style*="border-top"] { border-top-color: rgba(0,0,0,.06); }

.qe-finder-icon-box { background: var(--bg4); border: 1px solid var(--border); width: 20px; height: 20px; border-radius: 5px; font-size: 10px; }
.qe-finder-name { font-size: 12.5px; font-weight: 600; color: var(--txt); letter-spacing: -.1px; }
.qe-finder-tag-plain { font-size: 10.5px; color: var(--txt3); }
.qe-finder-folder-pill { font-size: 10px; font-weight: 500; color: #6E6E73; }
.qe-finder-date-line { font-size: 9.5px; color: var(--txt3); }
.qe-finder-date-line.muted { color: var(--ui-muted); opacity: 1; }
.qe-finder-fav-dot { background: var(--ui-muted); }

.qe-finder-more-btn { color: #AEAEB2; border-color: transparent; background: transparent; }
.qe-finder-row:hover .qe-finder-more-btn { color: #6E6E73 !important; }
.qe-finder-more-btn:hover { background: rgba(0,0,0,.07) !important; border-color: rgba(0,0,0,.11) !important; color: var(--txt) !important; }
.qe-finder-btn { color: transparent; }
.qe-finder-row:hover .qe-finder-btn { color: #AEAEB2 !important; }
.qe-finder-btn:hover { background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.10) !important; color: var(--txt) !important; }
.qe-finder-btn.primary { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.11); color: var(--txt2); }
.qe-finder-btn.primary:hover { background: rgba(0,0,0,.10) !important; border-color: rgba(0,0,0,.18) !important; color: var(--txt) !important; }
.qe-finder-btn.del:hover { background: rgba(255,59,48,.08) !important; border-color: rgba(255,59,48,.18) !important; color: #ff3b30 !important; }

.qe-finder-ctx-menu { background: var(--bg2); border: 1px solid var(--border2); box-shadow: 0 10px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06); }
.qe-finder-ctx-item { color: var(--txt2); font-size: 12px; }
.qe-finder-ctx-item:hover { background: var(--bg4) !important; color: var(--txt) !important; }
.qe-finder-ctx-icon { opacity: 1; }
.qe-finder-ctx-divider { background: var(--border); }
.qe-finder-ctx-item.danger { color: #d92d20; }
.qe-finder-ctx-item.danger:hover { background: rgba(217,45,32,.07) !important; }

.qe-finder-checkbox, .qe-finder-select-all { border-color: rgba(0,0,0,.20); }
.qe-finder-checkbox.checked, .qe-finder-select-all.all-checked { background: var(--txt); border-color: var(--txt); }
.qe-finder-checkbox.checked::after, .qe-finder-select-all.all-checked::after { color: var(--bg2); }

.qe-lib-preview-pop { background: rgba(255,255,255,.99); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.07); }
.qe-lib-preview-pop-head { background: var(--bg3); border-bottom: 1px solid rgba(0,0,0,.06); }

.qe-lib-empty { color: var(--ui-muted); }
.qe-lib-empty-icon { opacity: .2; }

.qe-lib-folder-separator { background: rgba(0,0,0,.07); }
.qe-lib-action-bar { border-bottom-color: transparent; background: transparent; }

.peek-btn { transition: transform var(--dur-base) var(--spring), background var(--dur-base) ease !important; }
.peek-btn:hover { transform: scale(1.05) !important; }
.peek-btn:active { transform: scale(.95) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
  animation-duration: .01ms;
  animation-iteration-count: 1;
  transition-duration: .01ms;
  }
  .qe-toast { transition: opacity var(--dur-base) ease !important; border-radius: 16px !important; }
}

.mp-category-card {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 13px 14px 12px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, opacity var(--dur-base) ease;
  display: flex; flex-direction: column; gap: 0;
  user-select: none; position: relative; min-height: 96px;
}
.mp-category-card:hover { border-color: var(--border3); box-shadow: none; }
.mp-category-card.active { border-color: rgba(0,0,0,.22); background: #FAFAFA; }
.mp-category-card.mep-linked:hover { border-color: rgba(0,122,255,.35); box-shadow: none; }
.mp-category-card.mep-unlinked { opacity: 1; cursor: pointer; pointer-events: auto; }

.mp-card-status-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: transparent;
  border: 1.5px solid rgba(0,0,0,.18);
  transition: background var(--dur-base), border-color var(--dur-base);
}
.mep-linked .mp-card-status-dot {
  background: #34C759;
  border-color: #34C759;
  box-shadow: 0 0 0 2px rgba(52,199,89,.16);
}

.mp-card-unlinked-badge {
  display: none;
  position: absolute; top: 9px; right: 9px;
  font-size: 8px; font-weight: 700; letter-spacing: .3px;
  font-family: var(--font-mono);
  color: var(--txt3); background: var(--border);
  border: 1px solid var(--border2);
  border-radius: 4px; padding: 1px 5px;
  line-height: 1.5; text-transform: uppercase;
}
.mep-unlinked .mp-card-unlinked-badge { display: inline-flex; }
.mep-unlinked .mp-card-status-dot { display: none; }

.mp-card-toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mp-card-icon { font-size: 17px; line-height: 1; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; color:var(--txt2); }

.mp-card-title { font-size: 12px; font-weight: 700; color: var(--txt); letter-spacing: -.1px; line-height: 1.3; margin-bottom: 4px; }

.mp-card-desc { font-size: 10.5px; color: var(--txt3); line-height: 1.5; flex: 1; }

.mp-card-lib-tag {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 500;
  font-family: var(--font-mono); letter-spacing: .02em;
  padding: 1.5px 6px; border-radius: 4px;
  background: var(--border); color: var(--txt3);
  border: 1px solid var(--border2);
  margin-top: 9px; width: fit-content;
  transition: background var(--dur-base), color var(--dur-base);
}
.mep-linked .mp-card-lib-tag { background: rgba(52,199,89,.08); color: #1a7a35; border-color: rgba(52,199,89,.25); }
.mp-shortcut-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px; border-radius: 8px;
  border: 1px solid var(--border2); background: var(--bg3);
  cursor: pointer; transition: all var(--dur-base); user-select: none;
  font-size: 11.5px; font-weight: 600; color: var(--txt2); margin: 3px;
}
.mp-shortcut-item:hover { border-color: var(--border3); background: rgba(0,0,0,.06); color: var(--txt); transform: translateY(-1px); box-shadow: none; }
.mp-shortcut-folder {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 8px; border-radius: 8px;
  border: 1.5px solid var(--border2); background: var(--bg2);
  cursor: pointer; transition: all var(--dur-base); user-select: none;
  font-size: 11px; font-weight: 700; color: var(--txt); margin: 3px;
}
.mp-shortcut-folder:hover { border-color: var(--border3); transform: translateY(-1px); box-shadow: none; }
.mp-picker-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; transition: all var(--dur-fast); user-select: none;
}
.mp-picker-row:hover { background: rgba(0,0,0,.04); border-color: var(--border); }
.mp-picker-check {
  width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--border2); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: var(--bg2); transition: all var(--dur-fast);
}
.mp-picker-row.checked .mp-picker-check { background: var(--txt); border-color: var(--txt); }
.mp-picker-label { font-size: 12px; font-weight: 600; color: var(--txt); flex: 1; }
.mp-picker-count { font-size: 9.5px; color: var(--txt3); }
.mstr-tab {
  padding: 6px 14px; border-radius: 99px;
  border: 1.5px solid var(--border2); background: transparent;
  color: var(--txt2); font-size: 11.5px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base); white-space: nowrap;
}
.mstr-tab:hover { border-color: var(--border3); background: rgba(0,0,0,.05); color: var(--txt); }
.mstr-tab.active { border-color: rgba(0,0,0,.32); background: rgba(0,0,0,.07); color: var(--txt); }
.mstr-tpl-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background var(--dur-fast);
}
.mstr-tpl-row:last-child { border-bottom: none; }
.mstr-tpl-row:hover { background: rgba(0,0,0,.03); }
.mstr-tpl-icon { font-size: 16px; flex-shrink: 0; width: 24px; text-align: center; }
.mstr-tpl-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--txt); }
.mstr-tpl-folder { font-size: 10px; color: var(--txt3); font-weight: 600; white-space: nowrap; }
.mstr-tpl-use-btn {
  padding: 5px 12px; border-radius: 7px;
  border: 1px solid rgba(0,0,0,.12); background: transparent;
  color: var(--txt2); font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-fast); flex-shrink: 0; white-space: nowrap;
}
.mstr-tpl-use-btn:hover { background: var(--txt); color: var(--bg); border-color: var(--txt); }

.mp-card-variant-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
  padding: 3px 9px; border-radius: var(--r99);
  background: rgba(0,122,255,.10);
  border: 1px solid rgba(0,122,255,.22);
  color: rgba(0,122,255,.85);
  margin-top: auto; cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  user-select: none;
}
.mp-card-variant-badge:hover { background: rgba(0,122,255,.18); border-color: rgba(0,122,255,.40); }
html.dark .mp-card-variant-badge {
  background: rgba(100,160,255,.14);
  border-color: rgba(100,160,255,.35);
  color: #89C4FF;
}
html.dark .mp-card-variant-badge:hover {
  background: rgba(100,160,255,.24);
  border-color: rgba(100,160,255,.55);
}

.mep-variant-dropdown-global {
  position: fixed;
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,.13);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  z-index: 9999;
  overflow: hidden;
  min-width: 180px;
  animation: mepDdIn .16s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mepDdIn {
  from { opacity:0; transform: translateY(-4px) scale(.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.mep-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--txt2);
  transition: background .1s;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.mep-dd-item:last-child { border-bottom: none; }
.mep-dd-item:hover { background: rgba(0,0,0,.04); color: var(--txt); }
.mep-dd-item.active { color: var(--txt); font-weight: 800; background: rgba(0,122,255,.05); }
.mep-dd-check { width: 14px; font-size: 11px; color: rgba(0,122,255,.8); flex-shrink: 0; text-align: center; font-weight: 900; }
.mep-dd-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {

}

/* --- Merged block 8: /* ── Profile Edit Modal v31 — minimalist flat redesign ── * --- */
.pe-field-label {
  font-size:9.5px; font-weight:700; color:var(--txt3);
  text-transform:uppercase; letter-spacing:.55px; margin-bottom:5px; display:block;
}
.pe-input {
  width:100%; padding:9px 12px; border-radius:var(--r8);
  border:1.5px solid rgba(0,0,0,.12);
  background:var(--bg3);
  color:var(--txt); font-size:13px; font-family:inherit;
  outline:none; transition:border-color var(--dur-base), box-shadow var(--dur-base);
}
.pe-input:focus {
  border-color:rgba(0,0,0,.32);
  box-shadow:0 0 0 3px rgba(0,0,0,.06);
  background:var(--bg2);
}
.pe-input::placeholder { color:var(--ui-muted); }
.pe-input-icon-wrap { position:relative; }
.pe-input-icon-wrap .pe-icon {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  font-size:12px; opacity:.38; pointer-events:none; font-weight:700;
  font-family:var(--font-mono);
}
.pe-input-icon-wrap .pe-input { padding-left:26px; }
/* Divider between sections */
.pe-divider {
  height:1px; background:rgba(0,0,0,.07); margin:4px 0;
}
/* Bypass toggle row */
.pe-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; border-radius:var(--r8);
  background:var(--bg3); border:1.5px solid rgba(0,0,0,.09);
  cursor:pointer; transition:border-color var(--dur-base);
  gap:12px;
}
.pe-toggle-row:hover { border-color:rgba(0,0,0,.18); }
.pe-toggle-row-info { flex:1; min-width:0; }
.pe-toggle-row-title { font-size:12.5px; font-weight:700; color:var(--txt); line-height:1.3; }
.pe-toggle-row-sub { font-size:10.5px; color:var(--txt3); margin-top:2px; line-height:1.4; }
/* iOS-style toggle switch */
.pe-switch {
  width:40px; height:22px; border-radius:99px;
  background:rgba(0,0,0,.18); position:relative;
  transition:background var(--dur-base) var(--ease); flex-shrink:0;
  border:none; cursor:pointer; padding:0; outline:none;
}
.pe-switch.on { background:#FF3B30; }
.pe-switch-knob {
  width:18px; height:18px; border-radius:50%;
  background:#fff; position:absolute; top:2px; left:2px;
  transition:left var(--dur-base) var(--spring);
  box-shadow:0 1px 4px rgba(0,0,0,.20);
}
.pe-switch.on .pe-switch-knob { left:20px; }
/* Warning note for bypass ON */
.pe-bypass-warn {
  display:none;
  padding:9px 12px; border-radius:8px;
  background:rgba(255,59,48,.07); border:1px solid rgba(255,59,48,.22);
  font-size:11px; color:#c0392b; font-weight:500; line-height:1.5;
}
.pe-bypass-warn.show { display:block; }

.macos-titlebar {
  display: flex;
  align-items: center;
  padding: 12px 16px 11px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  user-select: none;
}
.macos-traffic-lights {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  z-index: 2;
}
.macos-btn {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  padding: 0;
}
.macos-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 900;
  color: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.1s;
  line-height: 12px;
  text-align: center;
}
.macos-traffic-lights:hover .macos-btn::after { opacity: 1; }
.macos-btn-close { background: #ff5f57; }
.macos-btn-close::after { content: 'x'; }
.macos-btn-min   { background: #C8C8CA; }
.macos-btn-min::after   { content: ''; }
.macos-btn-min:hover   { background: #C8C8CA; }

.macos-btn-max   { background: #28c840; }
.macos-btn-max::after   { content: '+'; }
.macos-btn-close:hover { background: #e0443c; }
.macos-btn-max:hover   { background: #1faa34; }
.macos-window-title {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--txt2);
  letter-spacing: -0.15px;
  pointer-events: none;
  white-space: nowrap;
}
.macos-titlebar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  z-index: 2;
}
.macos-tbtn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--txt3);
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
  white-space: nowrap;
}
.macos-tbtn:hover { background: var(--bg4); border-color: var(--border3); color: var(--txt2); box-shadow: none; }
.macos-tbtn.filled { background: var(--txt); color: var(--bg); border-color: transparent; box-shadow: 0 1px 3px rgba(0,0,0,0.28); }
.macos-tbtn.filled:hover { opacity: .88; }

#qe-lib-overlay .qe-lib-head { display: none !important; }

.qe-lib-folder-sidebar {
  width: 210px !important;
  min-width: 210px !important;   max-width: 210px !important;
  flex-shrink: 0 !important;
  background: rgba(243,243,245,0.97) !important;
  border-right: 1px solid rgba(0,0,0,0.08) !important;
  padding: 6px 6px 10px !important;
  transition: none !important;
}

.macos-nav-section {
  padding: 11px 7px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.38);
  pointer-events: none;
  user-select: none;
}

.qe-lib-folder-item {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 8px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(0,0,0,0.75) !important;
  border: 1px solid transparent !important; min-height: 28px !important;
  position: relative;
  transition: background 0.08s !important;
  transform: none !important;
  -webkit-user-select: none;
}
.qe-lib-folder-item:hover {
  background: rgba(0,0,0,0.06) !important;
  color: rgba(0,0,0,0.9) !important;
  transform: none !important;
}
.qe-lib-folder-item.active {
  background: rgba(0,0,0,0.09) !important;
  color: rgba(0,0,0,0.88) !important;
  border-color: rgba(0,0,0,0.10) !important;
  transform: none !important;
  font-weight: 600 !important;
}

.qe-lib-folder-item {
  position: relative !important;
  padding-right: 32px !important;
}

.qe-lib-fi-count {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 1px 5px !important;
  border-radius: 99px !important;
  background: rgba(0,0,0,.07) !important;
  color: var(--txt3) !important;
  flex-shrink: 0 !important;
  font-family: var(--font-mono) !important;
  min-width: 18px !important;
  text-align: center !important;
  opacity: 1 !important;
  transition: opacity var(--dur-base) !important;
  pointer-events: none !important;
  margin-right: 0 !important;
}

.qe-lib-folder-item.active .qe-lib-fi-count {
  background: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.55) !important;
}

.qe-lib-fi-more {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(0,0,0,0.45) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  letter-spacing: 0px !important;
  line-height: 1 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: visible !important;
  transition: opacity var(--dur-base), background 0.1s !important;
  pointer-events: none !important;
}

@media (hover: hover) {
  .qe-lib-folder-item:hover .qe-lib-fi-count {
    opacity: 0 !important;
  }
  .qe-lib-folder-item:hover .qe-lib-fi-more {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (hover: none) {
  .qe-lib-fi-count {
    opacity: 0 !important;
  }
  .qe-lib-fi-more {
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 28px !important;
    height: 28px !important;
    right: 4px !important;
  }
}

.qe-lib-fi-more.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(0,0,0,.08) !important;
  color: rgba(0,0,0,0.72) !important;
}

.qe-lib-fi-more.open ~ .qe-lib-fi-count,
.qe-lib-folder-item:has(.qe-lib-fi-more.open) .qe-lib-fi-count {
  opacity: 0 !important;
}

.qe-lib-fi-more:hover {
  background: rgba(0,0,0,0.1) !important;
  color: rgba(0,0,0,0.72) !important;
}

.qe-lib-fi-ren,
.qe-lib-fi-del {
  visibility: hidden !important;
  display: flex !important;
}
.qe-lib-folder-item:hover .qe-lib-fi-ren,
.qe-lib-folder-item:hover .qe-lib-fi-del { visibility: visible !important; }

.qe-lib-folder-separator {
  height: 1px !important;
  background: rgba(0,0,0,0.08) !important;
  margin: 5px 5px !important;
  flex-shrink: 0 !important;
}

.qe-lib-add-folder-btn {
  margin-top: 8px !important;
  padding: 6px 8px !important;
  border-radius: 7px !important;
  border: 1px dashed rgba(0,0,0,0.16) !important;
  background: transparent !important;
  color: rgba(0,0,0,0.42) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: left !important;
  width: 100% !important;
  font-family: inherit !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast) !important;
}
.qe-lib-add-folder-btn:hover {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.18) !important;
  color: var(--txt2) !important;
}

.qe-lib-action-bar {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
  min-height: auto !important;
  box-sizing: border-box !important;
}
.qe-lib-action-bar button {
  transition: background var(--dur-fast), opacity var(--dur-fast) !important;
  transform: none !important;
}
.qe-lib-action-bar button:hover {
  transform: none !important;
}

.qe-finder-ctx-menu,
.qe-lib-fi-ctx,
#qe-lib-folder-ctx {
  background: rgba(249,249,251,0.97) !important; /* missing semicolon — Firefox/Safari border fix */
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08) !important;
  padding: 4px !important;
  min-width: 178px !important;
}
.qe-finder-ctx-item,
.qe-lib-fi-ctx-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(0,0,0,0.85) !important;
  cursor: pointer !important;
  transition: background 0.08s !important;
  transform: none !important;
}
.qe-finder-ctx-item:hover,
.qe-lib-fi-ctx-item:hover {
  background: rgba(0,0,0,0.08) !important;
  color: rgba(0,0,0,0.9) !important;
  transform: none !important;
}
.qe-finder-ctx-item.danger { color: #d93025 !important; }
.qe-finder-ctx-item.danger:hover,
.qe-lib-fi-ctx-item.danger:hover { background: rgba(215,45,35,0.88) !important; color: #fff !important; }
.qe-finder-ctx-divider,
.qe-lib-fi-ctx-sep { height: 1px !important; background: rgba(0,0,0,0.09) !important; margin: 3px 0 !important; padding: 0 !important; }

.qe-lib-bar {
  background: #F2F2F5 !important;   border-bottom: 1px solid rgba(0,0,0,0.09) !important;
  padding: 5px 12px !important;
  position: relative !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 40px !important;
}

.qe-lib-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  width: 195px !important;
  min-width: 0 !important;
  max-width: 195px !important;
  overflow: hidden !important;
  padding-right: 8px !important;
}
.qe-lib-bc-sep {
  width: 1px !important;
  height: 13px !important;
  background: rgba(0,0,0,0.14) !important;
  flex-shrink: 0 !important;
}
.qe-lib-bc-name {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1C1C1E !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.1px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.qe-lib-bc-count {
  display: none !important;   }
.qe-lib-folder-drawer-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}

.qe-lib-action-bar {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  justify-content: center !important;
  padding: 0 4px !important;
  background: transparent !important;
  border: none !important;
}

.qe-lib-action-bar .qe-ab-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: rgba(0,0,0,0.52) !important;
  height: 28px !important;
  width: 30px !important;
  padding: 0 !important;
  font-size: 13px !important;
  border-radius: 7px !important;
}
.qe-lib-action-bar .qe-ab-btn:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.80) !important;
  box-shadow: none !important;
}
.qe-lib-action-bar .qe-ab-btn:active {
  background: rgba(0,0,0,0.12) !important;
  transform: scale(.95) !important;
}

.qe-lib-action-bar .qe-ab-btn--primary {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--txt3) !important;
  box-shadow: none !important;
  width: auto !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.qe-lib-action-bar .qe-ab-btn--primary:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: var(--txt) !important;
}
.qe-lib-action-bar .qe-ab-btn--primary:active {
  background: rgba(0,0,0,0.12) !important;
  transform: scale(.97) !important;
  box-shadow: none !important;
}

.qe-lib-ab-sep {
  width: 1px !important;
  height: 14px !important;
  background: rgba(0,0,0,0.12) !important;
  flex-shrink: 0 !important;
  margin: 0 4px !important;
}

.qe-lib-ab-icon-btn {
  width: 30px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(0,0,0,0.52) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast) !important;
  font-family: inherit !important;
}
.qe-lib-ab-icon-btn:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.80) !important;
}
.qe-lib-ab-icon-btn:active {
  background: rgba(0,0,0,0.12) !important;
  transform: scale(.95) !important;
}
.qe-lib-ab-icon-btn.danger { color: #D93025 !important; }
.qe-lib-ab-icon-btn.danger:hover { background: rgba(217,48,37,0.09) !important; border-color: rgba(217,48,37,0.14) !important; }

.qe-lib-ab-overflow-trigger {
  display: inline-flex !important;   background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: rgba(0,0,0,0.52) !important;
  height: 28px !important;
  width: 30px !important;
  padding: 0 !important;
  font-size: 14px !important;
}
.qe-lib-ab-overflow-trigger:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.80) !important;
}
.qe-lib-ab-inline-group { display: contents !important; }

@media (max-width: 640px) {
  /* inline-group tetap tampil — recycle & pilih semua tetap visible */
  .qe-lib-breadcrumb { width: 100px !important; max-width: 100px !important; }
  .qe-lib-search-wrap {
    flex: 0 0 90px !important;
    min-width: 70px !important;
    max-width: 90px !important;
  }
}
@media (max-width: 420px) {
  .qe-lib-breadcrumb { width: 72px !important; max-width: 72px !important; }
  .qe-lib-search-wrap { flex: 0 0 70px !important; min-width: 55px !important; max-width: 70px !important; }
}

.qe-lib-search-wrap {
  position: relative !important;
  flex: 0 0 150px !important;
  min-width: 100px !important;
  max-width: 150px !important;
  z-index: 10 !important;
  padding-left: 8px !important;
}

.qe-lib-tagbar-row { background: var(--bg) !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; }
.qe-lib-storage-bar { background: rgba(246,246,248,0.99) !important; border-top: 1px solid rgba(0,0,0,0.08) !important; }
.qe-lib-status-bar  { background: rgba(246,246,248,0.99) !important; border-top: 1px solid rgba(0,0,0,0.06) !important; font-size: 11px !important; }

.qe-finder-ctx-divider,
.qe-lib-fi-ctx-sep { display: none !important; }

.qe-finder-ctx-item.danger,
.qe-lib-fi-ctx-item.danger { margin-top: 2px !important; }

#qe-lib-folder-ctx,
#qe-finder-ctx {
  background: rgba(249,249,251,0.97) !important;
  border: 1px solid rgba(0,0,0,0.11) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06) !important;
  padding: 4px !important;
  min-width: 175px !important;
}

.qe-lib-actions-dd { background: rgba(249,249,251,0.99) !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important; padding: 4px !important; }
.qe-lib-actions-dd-item { border-radius: 6px !important; padding: 6px 10px !important; font-size: 12.5px !important; font-weight: 500 !important; color: rgba(0,0,0,0.85) !important; transform: none !important; }
.qe-lib-actions-dd-item:hover { background: rgba(0,122,255,0.88) !important; color: #fff !important; transform: none !important; }
.qe-lib-actions-dd-item.danger { color: #d93025 !important; }
.qe-lib-actions-dd-item.danger:hover { background: rgba(215,45,35,0.88) !important; color: #fff !important; }

#qe-lib-overlay .macos-btn-min { display: inline-flex !important; }
#qe-lib-overlay #mac-btn-min   { display: inline-flex !important; }
#qe-lib-overlay .qe-lib-modal.mac-minimized > *:not(.macos-titlebar) { display: none !important; }
#qe-lib-overlay .qe-lib-modal.mac-minimized { max-height: 44px !important; }
#qe-lib-overlay.mac-maximized { padding: 0 !important; }
#qe-lib-overlay.mac-maximized .qe-lib-modal { max-width: 100% !important; max-height: 100vh !important; max-height: 100dvh !important; height: 100vh !important; height: 100dvh !important; border-radius: 0 !important; }

@media (max-width: 600px) {
  .macos-titlebar { padding: 10px 12px; }
  .macos-window-title { font-size: 12px; }
  .qe-lib-folder-drawer-btn { display: flex !important; }
}

.qe-lib-tag-chip {
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  color: #6E6E73 !important;
  border-radius: 99px !important;
  padding: 3px 10px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast) !important;
  transform: none !important;
}
.qe-lib-tag-chip:hover {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.22) !important;
  color: #1C1C1E !important;
  transform: none !important;
}
.qe-lib-tag-chip.active {
  background: #1C1C1E !important;
  border-color: #1C1C1E !important;
  color: #fff !important;
  transform: none !important;
}
.qe-lib-tag-chip .qe-lib-tag-count {
  color: #AEAEB2 !important;
  opacity: 1 !important;
}
.qe-lib-tag-chip.active .qe-lib-tag-count {
  color: rgba(255,255,255,0.48) !important;
  opacity: 1 !important;
}

.qe-lib-search {
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 8px !important;
  color: var(--txt) !important;
  font-size: 12.5px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  padding: 6px 10px 6px 28px !important;
  transition: border-color var(--dur-base), box-shadow var(--dur-base) !important;
}
.qe-lib-search:focus {
  border-color: var(--border3) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.06) !important;
  outline: none !important;
  background: var(--bg2) !important;
}
.qe-lib-search::placeholder { color: #AEAEB2 !important; }
.qe-lib-search-icon { color: #AEAEB2 !important; }

.qe-lib-search-wrap {
  flex: 0 0 220px !important;
  min-width: 140px !important;
  max-width: 260px !important;
  padding-left: 8px !important;
}
.qe-lib-bar {
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 7px 14px !important;
  gap: 6px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}
@media (max-width: 640px) {
  .qe-lib-search-wrap {
    flex: 0 0 120px !important;
    min-width: 90px !important;
    max-width: 150px !important;
  }
}
@media (max-width: 420px) {
  .qe-lib-search-wrap {
    flex: 0 0 90px !important;
    min-width: 70px !important;
    max-width: 110px !important;
  }
}

@media (max-width: 600px) {
  .qe-lib-active-folder-pill { display: none !important; }
  .qe-lib-bc-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 150px !important;
    display: block !important;
  }
  .qe-lib-breadcrumb {
    min-width: 0 !important;
    flex: 1 1 0% !important;
    overflow: hidden !important;
  }
}

.qe-lib-overlay .qe-finder-row,
.qe-lib-overlay .qe-finder-row-wrap,
.qe-lib-overlay .nav-lib-folder,
.qe-lib-overlay .qe-lib-folder-item,
.qe-lib-overlay .qe-lib-nav-item,
.qe-lib-overlay .qe-lib-tag-chip,
.qe-lib-overlay [onclick],
.qe-lib-overlay .qe-lib-ab-icon-btn,
.qe-lib-overlay .qe-ab-btn,
.qe-lib-overlay .qe-finder-btn,
.qe-lib-overlay .macos-btn,
.qe-lib-overlay button {
  cursor: pointer;
}

.qe-finder-header {
  background: var(--bg3) !important;
  border-bottom: 1.5px solid var(--border) !important;
  color: var(--txt3) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  height: 28px !important;
}
.qe-finder-header .qe-finder-col-actions {
  color: #6E6E73 !important;
}

.qe-lib-actions-dd {
  background: rgba(250,250,252,0.98) !important;
  border: 1px solid rgba(0,0,0,0.11) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  padding: 4px !important;
}
.qe-lib-actions-dd-item {
  border-radius: 6px !important;
  padding: 7px 11px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #1C1C1E !important;
  transition: background 0.10s !important;
  transform: none !important;
}
.qe-lib-actions-dd-item:hover {
  background: rgba(0,0,0,0.07) !important;
  color: #1C1C1E !important;
  transform: none !important;
}
.qe-lib-actions-dd-item.danger { color: #D93025 !important; }
.qe-lib-actions-dd-item.danger:hover {
  background: rgba(217,48,37,0.08) !important;
  color: #D93025 !important;
}
.qe-lib-actions-dd-item--active { font-weight: 700 !important; color: var(--txt) !important; }

.qe-lib-ab-overflow-trigger {
  display: none !important;
}
@media (max-width: 640px) {
  .qe-lib-ab-overflow-trigger {
    display: inline-flex !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: rgba(0,0,0,0.52) !important;
    height: 28px !important;
    width: 30px !important;
    padding: 0 !important;
    font-size: 14px !important;
  }
  .qe-lib-ab-overflow-trigger:hover {
    background: rgba(0,0,0,0.07) !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: rgba(0,0,0,0.80) !important;
  }
}

.qe-lib-search {
  padding-left: 30px !important;
}

.qe-lib-ab-overflow-trigger > span,
#qe-lib-actions-trigger > span {
  display: none !important;
}

/* Inject the grid icon via ::before pseudo */
.qe-lib-ab-overflow-trigger::before,
#qe-lib-actions-trigger::before {
  content: '';
  display: block;
  width: 17px;
  height: 13px;
  /* 2 rows × 3 cols grid — matches Image 3 reference exactly */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 13' fill='none'%3E%3Crect x='0' y='0' width='4' height='4' rx='1.1' fill='%23636366'/%3E%3Crect x='6.5' y='0' width='4' height='4' rx='1.1' fill='%23636366'/%3E%3Crect x='13' y='0' width='4' height='4' rx='1.1' fill='%23636366'/%3E%3Crect x='0' y='6' width='4' height='4' rx='1.1' fill='%23636366'/%3E%3Crect x='6.5' y='6' width='4' height='4' rx='1.1' fill='%23636366'/%3E%3Crect x='13' y='6' width='4' height='4' rx='1.1' fill='%23636366'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
  transition: opacity var(--dur-fast);
}
.qe-lib-ab-overflow-trigger:hover::before,
#qe-lib-actions-trigger:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 13' fill='none'%3E%3Crect x='0' y='0' width='4' height='4' rx='1.1' fill='%231C1C1E'/%3E%3Crect x='6.5' y='0' width='4' height='4' rx='1.1' fill='%231C1C1E'/%3E%3Crect x='13' y='0' width='4' height='4' rx='1.1' fill='%231C1C1E'/%3E%3Crect x='0' y='6' width='4' height='4' rx='1.1' fill='%231C1C1E'/%3E%3Crect x='6.5' y='6' width='4' height='4' rx='1.1' fill='%231C1C1E'/%3E%3Crect x='13' y='6' width='4' height='4' rx='1.1' fill='%231C1C1E'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
.qe-lib-ab-overflow-trigger,
#qe-lib-actions-trigger {
  width: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
}

/* Sort button icon: macOS-style descending lines (Image 2 reference) */

.qe-sort-dropdown {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  min-width: 148px;
  padding: 4px;
  display: none;
  overflow: hidden;
}
.qe-sort-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--txt2);
  transition: background .1s ease;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1;
}
.qe-sort-opt:hover {
  background: var(--bg4);
  color: var(--txt);
}
.qe-sort-opt.active {
  background: var(--bg4);
  color: var(--txt);
  font-weight: 500;
}
.qe-sort-opt-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--txt3);
  opacity: .7;
}
.qe-sort-opt.active .qe-sort-opt-icon {
  color: var(--txt2);
  opacity: 1;
}
.qe-sort-opt > span:nth-child(2) {
  flex: 1;
}
.qe-sort-opt-check {
  font-size: 11px;
  color: var(--txt3);
  font-weight: 600;
  margin-left: auto;
  opacity: .7;
}

/* Sort button trigger: only show icon (no text label) */
.qe-sort-label-text {
  display: none !important;
}
/* Strip the sort trigger — make it a plain icon like sibling buttons */
#qe-sort-trigger {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: rgba(0,0,0,0.52) !important;
  min-width: 30px !important;
  width: 30px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 13px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast) !important;
}
#qe-sort-trigger:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.80) !important;
}
#qe-sort-trigger:active {
  background: rgba(0,0,0,0.12) !important;
  transform: scale(.95) !important;
}

@media (max-width: 600px) {

  /* Bar: tight, no gap — items use their own margins */
  .qe-lib-bar {
    gap: 0 !important;
    padding: 5px 10px !important;
    min-height: 42px !important;
    overflow: hidden !important;
  }

  /* LEFT: folder icon + sep + name — takes all available space */
  .qe-lib-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow: hidden !important;
    padding-right: 4px !important;
    transition: opacity var(--dur-base), max-width var(--dur-base) cubic-bezier(.4,0,.2,1) !important;
  }
  .qe-lib-bc-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }

  /* MIDDLE: action bar — only the grid icon + add button on mobile */
  .qe-lib-action-bar {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 2px !important;
    justify-content: flex-end !important;
    transition: opacity var(--dur-base), max-width var(--dur-base) cubic-bezier(.4,0,.2,1) !important;
  }

  #qe-sort-wrap { display: none !important; }
  /* inline-group DISEMBUNYIKAN di mobile — semua masuk ke dropdown */
  .qe-lib-ab-sep { display: none !important; }
  .qe-lib-ab-sep-collapse { display: none !important; }
  .qe-lib-ab-inline-group { display: none !important; }

  /* Grid button + add button sizing */
  .qe-lib-ab-overflow-trigger,
  #qe-lib-actions-trigger {
    width: 34px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }
  .qe-lib-action-bar .qe-ab-btn--primary {
    width: 34px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 17px !important;
  }

  /* ── SEARCH WRAP: collapsed (0-width) by default on mobile ── */
  .qe-lib-search-wrap {
    flex: 0 0 0px !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: flex-basis var(--dur-slow) cubic-bezier(.4,0,.2,1),
                max-width 0.25s cubic-bezier(.4,0,.2,1),
                opacity 0.18s,
                padding-left 0.25s !important;
  }

  .qe-lib-bar.search-open .qe-lib-search-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding-left: 0 !important;
  }

  /* Search icon: keep it 9px from left of wrap (wrap now has no pad-left) */
  .qe-lib-bar.search-open .qe-lib-search-icon {
    left: 9px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Input padding: enough room for the icon (icon is at 9px, icon ~14px wide → 23px + buffer) */
  .qe-lib-bar.search-open .qe-lib-search {
    padding-left: 28px !important;
    padding-right: 30px !important;
    border-color: rgba(0,122,255,0.38) !important;
    background: var(--bg2) !important;
    box-shadow: 0 0 0 3px rgba(0,122,255,0.10) !important;
  }

  /* Hide breadcrumb + action bar when search open */
  .qe-lib-bar.search-open .qe-lib-breadcrumb,
  .qe-lib-bar.search-open .qe-lib-action-bar {
    flex: 0 0 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    padding-right: 0 !important;
  }

  /* ── 🔍 magnifier toggle button ── */
  #qe-lib-search-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    border: none !important;
    background: transparent !important;
    color: rgba(0,0,0,0.50) !important;
    cursor: pointer !important;
    border-radius: 7px !important;
    transition: background var(--dur-fast), color var(--dur-fast), opacity var(--dur-base) !important;
    margin-left: 2px !important;
  }
  #qe-lib-search-toggle-btn:hover { background: rgba(0,0,0,0.07) !important; color: rgba(0,0,0,0.80) !important; }
  #qe-lib-search-toggle-btn:active { background: rgba(0,0,0,0.13) !important; transform: scale(.92) !important; }

  .qe-lib-bar.search-open #qe-lib-search-toggle-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* ── ✕ clear/close button inside the search wrap ── */
  #qe-lib-search-clear-btn {
    display: none !important;
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0,0,0,0.11) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 9.5px !important;
    color: rgba(0,0,0,0.50) !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
  }
  .qe-lib-bar.search-open #qe-lib-search-clear-btn {
    display: inline-flex !important;
  }

}

/* Wider screens: mobile-injected buttons stay hidden */
@media (min-width: 601px) {
  #qe-lib-search-toggle-btn { display: none !important; }
  #qe-lib-search-clear-btn  { display: none !important; }
}

@media (min-width: 601px) {
  .qe-lib-ab-overflow-trigger,
  #qe-lib-actions-trigger {
    display: none !important;
  }
  /* Also hide the separator that sits right before +P on wide screens */
  .qe-lib-action-bar .qe-lib-ab-sep:last-of-type {
    display: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {

  /* When block-select mode is active on the body, */
  .qe-lib-body.block-select-mode .qe-finder-row .qe-hover-check {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Selected rows: filled checkbox */
  .qe-finder-row.block-selected .qe-hover-check {
    opacity: 1 !important;
    background: rgba(0,0,0,.82) !important;
    border-color: rgba(0,0,0,.82) !important;
    pointer-events: auto !important;
  }
  .qe-finder-row.block-selected .qe-hover-check::after {
    content: '✓';
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
  }

  .qe-lib-body.block-select-mode .qe-finder-col-icon {
    min-width: 36px !important;
    width: 36px !important;
  }
  .qe-lib-body.block-select-mode .qe-hover-check {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    border-width: 1.5px !important;
  }
  .qe-lib-body.block-select-mode .qe-finder-row.block-selected .qe-hover-check::after {
    font-size: 11px !important;
  }

  /* Subtle background on unselected rows in block-select mode */
  .qe-lib-body.block-select-mode .qe-finder-row:not(.block-selected) {
    background: rgba(0,0,0,0.01) !important;
  }

  /* Long-press hint: show a small "hold to select" label on first render */
  .qe-lib-body:not(.block-select-mode) .qe-finder-row:first-child::after {
    content: '';
    /* no visible text — the ripple animation already provides feedback */
  }
}

/* FIX: Meta Prompt page header icon box (was inline rgba(0,0,0,.08) — invisible in dark) */
.mp-page-header-icon {
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
}

.svg-bolt {
  display: inline-block;
  vertical-align: -.15em;
  flex-shrink: 0;
  pointer-events: none;
  fill: currentColor;
}

@media (max-width: 600px) {
  .qe-lib-ab-overflow-trigger > span,
  #qe-lib-actions-trigger > span {
    display: none !important;
  }
}

/* Touch device: di edit mode, selalu tampilkan check */
@media (hover: none) and (pointer: coarse) {
  .qe-lib-body .qe-finder-row-edit .qe-hover-check {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .qe-lib-body .qe-finder-row-edit.block-selected .qe-hover-check {
    background: rgba(0,0,0,.82) !important;
    border-color: rgba(0,0,0,.82) !important;
  }
  .qe-lib-body .qe-finder-row-edit.block-selected .qe-hover-check::after {
    content: '✓';
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
  }
}
.qe-lib-body .qe-finder-row-edit:hover .qe-hover-check {
  opacity: 1 !important;
}
.qe-lib-body .qe-finder-row-edit.block-selected .qe-hover-check {
  opacity: 1 !important;
}

#qe-lib-mobile-back-btn {
  display: none;
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  background: rgba(28,28,30,0.90);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 11px 26px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.32), 0 1px 4px rgba(0,0,0,0.18);
  font-family: inherit;
  align-items: center;
  gap: 7px;
  transition: opacity var(--dur-base), transform var(--dur-base);
  white-space: nowrap;
  letter-spacing: -0.1px;
}
#qe-lib-mobile-back-btn:active {
  transform: translateX(-50%) scale(0.95);
  opacity: 0.80;
}
@media (max-width: 600px) {
  #qe-lib-mobile-back-btn {
    display: inline-flex !important;
  }
}
@media (min-width: 601px) {
  #qe-lib-mobile-back-btn {
    display: none !important;
  }
}

.qe-finder-row-edit .qe-hover-check,
.qe-finder-row-edit .qe-block-chk {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.qe-finder-row-edit.block-selected {
  background: transparent !important;
}
.qe-finder-row-edit.block-selected::before {
  display: none !important;
}

.qe-lib-inline-expand {
  transition: height 160ms cubic-bezier(.22,1,.36,1),
              opacity 120ms cubic-bezier(.22,1,.36,1) !important;
}

/* Sidebar nav-lib-items: dari 220-280ms → 130-160ms */
.nav-lib-items {
  transition: grid-template-rows var(--dur-fast) cubic-bezier(.22,1,.36,1),
              opacity .10s ease !important;
}
.nav-lib-items.open {
  transition: grid-template-rows var(--dur-base) cubic-bezier(.22,1,.36,1),
              opacity .12s ease !important;
}

/* BUGFIX #2: Pakai dvh (dynamic viewport height) + env(safe-area-inset-bottom) */
@media (max-width: 600px) {
  .qe-lib-modal {
    height: 92dvh !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px) !important;
    box-sizing: border-box !important;
  }
  .qe-detail-modal-box {
    height: 90dvh !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px) !important;
    box-sizing: border-box !important;
  }
  .qe-edit-modal-v3 {
    height: auto !important;
    max-height: calc(90dvh - 32px) !important;
    max-width: calc(100% - 32px) !important;
    border-radius: 20px !important;
    border-bottom: 1px solid rgba(0,0,0,.11) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  .qe-em3-footer {
    padding: 10px 16px 14px !important;
  }
  /* Fullscreen state: lepas semua constraint biar benar-benar full */
  .qe-edit-modal-v3.qe-em3-fullscreen {
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    width: 100vw !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
  }
  #qe-edit-tpl-overlay {
    align-items: center !important;
    padding: 16px !important;
  }
  /* qe-save-tpl-box overrides in end-of-file fix block */
}
/* Mac-maximized: pakai 100dvh agar full screen tidak tertutup toolbar */
#qe-lib-overlay.mac-maximized .qe-lib-modal {
  height: 100dvh !important;
  max-height: 100dvh !important;
}

/* ── Tags row: chip pertama sejajar dengan teks breadcrumb, scroll bebas ── */
.qe-lib-tags-row {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  scroll-padding-left: 16px !important;
  /* mask hanya aktif saat konten melebihi lebar — tidak clip di kiri */
  -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 20px), transparent 100%) !important;
  mask-image: linear-gradient(to right, black 0%, black calc(100% - 20px), transparent 100%) !important;
}

/* ── Kode akses: selalu tampil sebagai bintang di semua browser ── */
#ctr-p,
#nav-fr-password-input {
  -webkit-text-security: disc !important;
  text-security: disc !important;
  font-family: text-security-disc, inherit !important;
}
/* Pastikan input type=password tidak di-override oleh patch lain */
#ctr-p[type="text"],
#nav-fr-password-input[type="text"] {
  -webkit-text-security: disc !important;
  text-security: disc !important;
}

/* ── PATCH: em3 traffic light hover icons (sync dengan library) ── */
.qe-em3-tl::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 900;
  color: rgba(0,0,0,.55);
  opacity: 0; transition: opacity .1s;
  line-height: 12px; text-align: center;

  overflow: hidden;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

.qe-em3-traffic:hover .qe-em3-tl::after { opacity: 1; }
.qe-em3-tl-red::after  { content: 'x'; }
.qe-em3-tl-max::after  { content: '+'; }
.qe-em3-tl-min  { pointer-events: none !important; cursor: default !important; }
/* Hide lama close button jika masih ada */
.qe-em3-close, #qe-edit-tpl-overlay .qe-lib-close { display: none !important; }
/* Sync title di em3 dengan id baru */
#qe-edit-tpl-overlay .qe-em3-title { font-size: 13px !important; }

/* Light mode — shadow lebih dalam & tegas */
#qe-generic-confirm-modal {
  background: rgba(0,0,0,.40) !important;  /* backdrop standar */
}

/* ── FIX 4: Matikan auto-zoom — viewport lock (maximum-scale=1, user-scalable=no) sudah cukup */

/* ── FIX 1, 2, 3: Layout & fullscreen di mobile ≤600px ── */
@media (max-width: 600px) {

  /* ─── Window 1: Template Library — full layar ─── */
  .qe-lib-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .qe-lib-modal {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
  }
  .qe-lib-overlay.show .qe-lib-modal { transform: none !important; }
  .qe-lib-overlay.hiding .qe-lib-modal { transform: none !important; opacity: 0 !important; }

  /* ─── Window 2: Lihat Template — full layar ─── */
  #qe-detail-modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .qe-detail-modal-box {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* ─── Window 3: Edit Template — full layar ─── */
  #qe-edit-tpl-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .qe-edit-modal-v3 {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* ─── FIX 1: Footer tombol Batal rata kiri di edit template ─── */
  .qe-em3-footer {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .qe-em3-btn-cancel {
    /* Cancel tetap ukuran aslinya di kiri */
    flex: 0 0 auto !important;
    min-width: 80px !important;
    order: 0 !important;
  }
  .qe-em3-btn-save {
    /* Save mengisi sisa ruang di kanan */
    flex: 1 !important;
    max-width: none !important;
    order: 1 !important;
  }

  /* ─── FIX 2: Generic confirm & small modals — JANGAN full screen ─── */
  /* Override stretch dari .qe-lib-overlay agar dialog kecil tetap centered */
  #qe-generic-confirm-modal,
  #qe-error-modal,
  #qe-lib-folder-modal,
  #qe-lib-rename-modal,
  #qe-lib-move-modal,
  #qe-import-conflict-modal {
    align-items: center !important;
    padding: 16px !important;
  }
  #qe-generic-confirm-modal > div,
  #qe-error-modal > div,
  #qe-lib-folder-modal > div,
  #qe-lib-rename-modal > div,
  #qe-lib-move-modal > div,
  #qe-import-conflict-modal > div {
    width: calc(100% - 0px) !important;
    max-width: 360px !important;
    height: auto !important;
    max-height: 88dvh !important;
    border-radius: 18px !important;
  }

  /* ─── Extra: Kelola Icon & Tag — full layar ─── */
  #qe-lib-meta-modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #qe-lib-meta-modal .qe-lib-modal {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  #qe-lib-meta-modal .macos-titlebar {
    border-radius: 0 !important;
  }

  /* ─── Extra: Export Library — full layar ─── */
  #qe-export-modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #qe-export-modal > div {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* ─── Extra: Import Preview — full layar ─── */
  #ctr-import-preview-modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #ctr-import-preview-modal > div {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* ─── Extra: Recycle Bin — pakai class qe-lib-overlay/qe-lib-modal, no override needed ─── */
  #qe-recycle-list {
    max-height: none !important;
  }

  /* ─── Extra: Master Prompt — full layar ─── */
  #qe-mp-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  #qe-mp-overlay > div {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* ─── Preview quick-view — full layar ─── */
  #qe-preview-modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #qe-preview-modal-overlay > div {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* Canonical: semua titlebar/header area modal */
.macos-titlebar,
.qe-detail-modal-titlebar,
.qe-em3-header {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px 11px !important;
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-shadow: none !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

/* ── 2. TRAFFIC LIGHT CONTAINER — gap & alignment ─────────────────────── */
.macos-traffic-lights,
.qe-detail-modal-traffic,
.qe-em3-traffic {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;
}

/* ── 3. TRAFFIC LIGHT BUTTONS — ukuran & bentuk ──────────────────────── */
.macos-btn,
.qe-detail-modal-traffic button,
.qe-em3-tl {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: filter var(--dur-fast) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
}

/* ── 4. CLOSE dot — #ff5f57 ──────────────────────────────────────────── */
.macos-btn-close,
.qe-detail-modal-traffic .dm-close,
.qe-em3-tl-red {
  background: #ff5f57 !important;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18) !important;
  cursor: pointer !important;
}

.macos-btn-min,
.qe-detail-modal-traffic .dm-min,
.qe-em3-tl-min {
  background: #C8C8CA !important;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12) !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* ── 6. MAXIMIZE dot — #28c840 (HIJAU) ──────────────────────────────── */
.macos-btn-max,
.qe-detail-modal-traffic .dm-max,
.qe-em3-tl-max {
  background: #28c840 !important;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14) !important;
  cursor: pointer !important;
}

/* ── 7. HOVER & ACTIVE states — identik di semua dot ─────────────────── */
.macos-btn:hover,
.qe-detail-modal-traffic button:hover,
.qe-em3-tl:hover {
  filter: brightness(.85) !important;
}
.macos-btn:active,
.qe-detail-modal-traffic button:active,
.qe-em3-tl:active {
  filter: brightness(.72) !important;
  transform: scale(.9) !important;
}

/* ── Hover icons — SEMUA traffic light sistem (Library, Detail, Edit, Recycle) ── */
.macos-btn::after,
.qe-detail-modal-traffic button::after,
.qe-em3-tl::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  color: rgba(0,0,0,.50) !important;
  opacity: 0 !important;
  transition: opacity .1s !important;
  line-height: 12px !important;
  text-align: center !important;
}
/* Close = × */
.macos-btn-close::after,
.qe-detail-modal-traffic .dm-close::after,
.qe-em3-tl-red::after  { content: '×' !important; }
/* Min = − (disabled, tapi tetap show icon) */
.macos-btn-min::after,
.qe-detail-modal-traffic .dm-min::after,
.qe-em3-tl-min::after  { content: '−' !important; }
/* Max = + */
.macos-btn-max::after,
.qe-detail-modal-traffic .dm-max::after,
.qe-em3-tl-max::after  { content: '+' !important; }
/* Trigger hover pada group */
.macos-traffic-lights:hover .macos-btn::after,
.qe-detail-modal-traffic:hover button::after,
.qe-em3-traffic:hover .qe-em3-tl::after { opacity: 1 !important; }

/* Disable state — min dot non-interaktif */
.macos-btn-disabled {
  pointer-events: none !important;
  cursor: default !important;
}

/* ── 8. WINDOW TITLE — posisi & tipografi seragam ───────────────────── */
.macos-window-title,
.qe-detail-modal-titlebar-title,
.qe-em3-title {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--txt2) !important;
  letter-spacing: -0.15px !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  white-space: nowrap !important;
  cursor: default !important;
  z-index: 2 !important;
  margin: 0 !important;
}

/* ── Export modal fullscreen support ─────────────────────────────────── */
#qe-export-modal.mac-maximized {
  padding: 0 !important;
}
#qe-export-modal.mac-maximized .qe-lib-modal {
  max-width: 100% !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  border-radius: 0 !important;
}

/* ── Recycle Bin fullscreen (mac-maximized) ──────────────────────────── */
#qe-recycle-overlay.mac-maximized {
  padding: 0 !important;
}
#qe-recycle-overlay.mac-maximized .qe-lib-modal {
  max-width: 100% !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  border-radius: 0 !important;
}

/* ── Kelola Icon & Tag fullscreen (mac-maximized) ────────────────────── */
#qe-lib-meta-modal.mac-maximized {
  padding: 0 !important;
}
#qe-lib-meta-modal.mac-maximized .qe-lib-modal {
  max-width: 100% !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  border-radius: 0 !important;
}
#qe-lib-meta-modal.mac-maximized .macos-titlebar {
  border-radius: 0 !important;
}

/* Traffic dots tidak berubah di dark mode (warna macOS asli tetap sama) */

/* ── 10. LIBRARY MODAL: .qe-lib-head diseragamkan jika masih tampil ──── */
.qe-lib-head {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px 11px !important;
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  user-select: none !important;
  box-shadow: none !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  gap: 12px !important;
}

/* ── 11. BORDER RADIUS modal — samakan semua ke 20px ─────────────────── */
.qe-lib-modal,
.qe-detail-modal-box,
.qe-edit-modal-v3 {
  border-radius: 20px !important;
}

/* ── 12. BORDER MODAL OUTER — ketebalan dan warna seragam ────────────── */
.qe-lib-modal,
.qe-detail-modal-box,
.qe-edit-modal-v3 {
  border: 1px solid rgba(0,0,0,.11) !important;
}

/* ── 13. BOX SHADOW modal — seragamkan depth ─────────────────────────── */
.qe-lib-modal,
.qe-detail-modal-box,
.qe-edit-modal-v3 {
  box-shadow: 0 24px 80px rgba(0,0,0,.20), 0 4px 20px rgba(0,0,0,.10) !important;
}

/* ── 14. UKURAN modal — Library disamakan dengan Detail & Edit (82vh) ── */
.qe-lib-modal {
  height: 82vh !important;
  max-height: 82vh !important;
}
/* Padding Library overlay disamakan dengan Detail overlay (16px sudah sama) */
#qe-lib-overlay:not(.mac-maximized) {
  padding: 16px !important;
}

#qe-lib-overlay.wsm-bg {
  opacity: 1 !important;
  pointer-events: none !important;
  transition: none !important;
}

/* ── MODE KECIL: bottom sheet 78vh saat mac-maximized dilepas ── */
@media (max-width: 600px) {

  /* Template Library — mode kecil */
  #qe-lib-overlay.mob-fs-default:not(.mac-maximized) {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #qe-lib-overlay.mob-fs-default:not(.mac-maximized) .qe-lib-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 78dvh !important;
    height: 78vh !important;
    max-height: 78dvh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
  }

  /* Lihat Detail Template — mode kecil */
  #qe-detail-modal-overlay.mob-fs-default:not(.mac-maximized) {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #qe-detail-modal-overlay.mob-fs-default:not(.mac-maximized) .qe-detail-modal-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 78dvh !important;
    height: 78vh !important;
    max-height: 78dvh !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
  }

  /* Edit Template — mode kecil */
  #qe-edit-tpl-overlay.mob-fs-default:not(.mac-maximized) {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #qe-edit-tpl-overlay.mob-fs-default:not(.mac-maximized) .qe-edit-modal-v3 {
    width: 100% !important;
    max-width: 100% !important;
    height: 78dvh !important;
    height: 78vh !important;
    max-height: 78dvh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
  }

  /* Kelola Icon — mode kecil */
  #qe-lib-meta-modal.mob-fs-default:not(.mac-maximized) {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #qe-lib-meta-modal.mob-fs-default:not(.mac-maximized) .qe-lib-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 78dvh !important;
    height: 78vh !important;
    max-height: 78dvh !important;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
  }
  #qe-lib-meta-modal.mob-fs-default:not(.mac-maximized) .macos-titlebar {
    border-radius: 20px 20px 0 0 !important;
  }

  /* Recycle Bin — mode kecil (sama persis dengan library lain) */
  #qe-recycle-overlay.mob-fs-default:not(.mac-maximized) {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #qe-recycle-overlay.mob-fs-default:not(.mac-maximized) .qe-lib-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 78dvh !important;
    height: 78vh !important;
    max-height: 78dvh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
  }

  /* ── MODE FULLSCREEN: saat mac-maximized aktif (semua 5 overlay) ── */
  #qe-lib-overlay.mob-fs-default.mac-maximized,
  #qe-detail-modal-overlay.mob-fs-default.mac-maximized,
  #qe-edit-tpl-overlay.mob-fs-default.mac-maximized,
  #qe-lib-meta-modal.mob-fs-default.mac-maximized,
  #qe-recycle-overlay.mob-fs-default.mac-maximized {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #qe-lib-overlay.mob-fs-default.mac-maximized .qe-lib-modal,
  #qe-recycle-overlay.mob-fs-default.mac-maximized .qe-lib-modal,
  #qe-lib-meta-modal.mob-fs-default.mac-maximized .qe-lib-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    transform: none !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  #qe-detail-modal-overlay.mob-fs-default.mac-maximized .qe-detail-modal-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    transform: none !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  #qe-edit-tpl-overlay.mob-fs-default.mac-maximized .qe-edit-modal-v3 {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    transform: none !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  #qe-lib-meta-modal.mob-fs-default.mac-maximized .macos-titlebar {
    border-radius: 0 !important;
  }

  /* Override animasi transform untuk semua .mob-fs-default agar tidak konflik */
  .qe-lib-overlay.mob-fs-default.show .qe-lib-modal,
  .qe-lib-overlay.mob-fs-default.hiding .qe-lib-modal {
    transform: none !important;
  }
  #qe-detail-modal-overlay.mob-fs-default.show .qe-detail-modal-box,
  #qe-detail-modal-overlay.mob-fs-default.hiding .qe-detail-modal-box {
    transform: none !important;
  }
}

/* ── Tombol hijau (macos-btn-max) — tambah tooltip hint di mobile ── */
@media (max-width: 600px) {
  .macos-btn-max {
    cursor: pointer !important;
  }
}

:root {
  --qe-ta-size:    13px;
  --qe-ta-lh:      1.5;
  --qe-ta-pad-v:   10px;
  --qe-ta-pad-h:   12px;
  --qe-ta-family: var(--font-sans);
  --qe-ta-weight:  400;
  --qe-ta-spacing: 0;
}

/* Textarea */
#qe-template {
  font-family:    var(--qe-ta-family)   !important;
  font-size:      var(--qe-ta-size)     !important;
  font-weight:    var(--qe-ta-weight)   !important;
  line-height:    var(--qe-ta-lh)       !important;
  letter-spacing: var(--qe-ta-spacing)  !important;
  padding:        var(--qe-ta-pad-v) var(--qe-ta-pad-h) !important;
  box-sizing:     border-box            !important;
  -webkit-font-smoothing: antialiased   !important;
}

/* Syntax overlay div — harus 100% identik */
#qe-syntax-overlay {
  font-family:    var(--qe-ta-family)   !important;
  font-size:      var(--qe-ta-size)     !important;
  font-weight:    var(--qe-ta-weight)   !important;
  line-height:    var(--qe-ta-lh)       !important;
  letter-spacing: var(--qe-ta-spacing)  !important;
  padding:        var(--qe-ta-pad-v) var(--qe-ta-pad-h) !important;
  box-sizing:     border-box            !important;
  -webkit-font-smoothing: antialiased   !important;
}

/* URL overlay — sama */
#qe-url-overlay {
  font-family:    var(--qe-ta-family)   !important;
  font-size:      var(--qe-ta-size)     !important;
  font-weight:    var(--qe-ta-weight)   !important;
  line-height:    var(--qe-ta-lh)       !important;
  letter-spacing: var(--qe-ta-spacing)  !important;
  padding:        var(--qe-ta-pad-v) var(--qe-ta-pad-h) !important;
  box-sizing:     border-box            !important;
  -webkit-font-smoothing: antialiased   !important;
}

/* Meta Prompt cards — 2 kolom di tablet, 2 kolom di mobile */
@media (max-width: 700px) {
  #mp-categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 400px) {
  #mp-categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ── Traffic Light — lebih besar di mobile ── */
@media (max-width: 600px) {
  .macos-btn,
  .qe-detail-modal-traffic button,
  .qe-em3-tl {
    width: 16px !important;
    height: 16px !important;
  }
  .macos-traffic-lights,
  .qe-detail-modal-traffic,
  .qe-em3-traffic {
    gap: 9px !important;
  }
}

/* ── Step 3: Edit button — fix alignment & warna ── */

/* ── Field text-input (qe-field-input) — font kecil seragam ── */

/* inline-expand pointer-events: see consolidated rule below */

/* ── Tombol Export Template ── */
.qe-lib-inline-export {
  background: var(--bg2);
  color: var(--txt2);
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  width: 30px;
  height: 28px;
  padding: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--spring);
}
.qe-lib-inline-export:hover { background: var(--bg4); border-color: rgba(0,0,0,.26); color: var(--txt); transform: translateY(-1px); }
.qe-lib-inline-export:active { transform: scale(.94); }

/* ── Tombol Edit Template ── */
.qe-lib-inline-edit {
  background: var(--bg2);
  color: var(--txt2);
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  width: 30px;
  height: 28px;
  padding: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--spring);
}
.qe-lib-inline-edit:hover { background: rgba(0,122,255,.08); border-color: rgba(0,122,255,.30); color: #007AFF; transform: translateY(-1px); }
.qe-lib-inline-edit:active { transform: scale(.94); }

/* ── Tombol Close / Kecilkan drawer ── */
.qe-lib-inline-close {
  background: transparent;
  color: var(--txt3);
  border: 1px solid rgba(0,0,0,.09);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: inherit;
  flex-shrink: 0;
  margin-left: auto; /* dorong ke kanan */
  transition: all var(--dur-fast);
}
.qe-lib-inline-close:hover { background: rgba(0,0,0,.07); color: var(--txt2); border-color: rgba(0,0,0,.18); }
.qe-lib-inline-close:active { transform: scale(.92); }

/* ── Mobile: tombol lebih besar agar mudah di-tap ── */

/* ── WA Topic Dropdown — fix mobile: tidak terpotong, z-index aman ── */
#wa-topic-panel {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}
/* Pastikan wrap tidak clip dropdown */
#wa-topic-wrap {
  overflow: visible !important;
}
/* Buka jalur overflow ke atas sampai modal card */
#wa-form-overlay > div,
#wa-form-overlay > div > div,
#wa-form-overlay > div > div > div {
  overflow: visible !important;
}

/* ── v5.17: Hapus kolom AKSI (···) dari Library — aksi via inline footer ── */
.qe-finder-col-actions,
.qe-finder-header .qe-finder-col-actions,
.qe-finder-more-btn {
  display: none !important;
}

/* ── v5.17: Hapus slot kolom AKSI dari grid — geser detail/tanggal ke ujung kanan ── */

/* Desktop default */
.qe-finder-header,
.qe-finder-row {
  grid-template-columns: 34px 1fr 130px 84px 92px !important;
}

/* Tablet 601–768 px */
@media (min-width: 601px) and (max-width: 768px) {
  .qe-finder-header,
  .qe-finder-row { grid-template-columns: 34px 1fr 120px 148px !important; }
}

/* Mobile ≤600 px */
@media (max-width: 600px) {
  .qe-finder-header,
  .qe-finder-row { grid-template-columns: 34px 1fr 120px !important; }
}

/* Pastikan kolom date/detail rata kanan */
.qe-finder-col-date,
.qe-tpl-mobile-meta-col {
  justify-content: flex-end;
  text-align: right;
  padding-right: 10px;
}

/* Inline expand pointer-events isolation */

/* Inline expand panel dan semua isinya selalu interactive */
.qe-lib-inline-expand,
.qe-lib-inline-expand-inner,
.qe-lib-inline-footer,
.qe-lib-inline-footer button,
.qe-lib-inline-pakai,
.qe-lib-inline-detail,
.qe-lib-inline-edit,
.qe-lib-inline-fav,
.qe-lib-inline-dupe,
.qe-lib-inline-move,
.qe-lib-inline-del {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Pastikan overlay library tidak overflow ke sidebar */
#qe-lib-overlay {
  isolation: isolate;
}

/* ── font-size 13px: all inputs/textareas globally — prevents iOS autozoom ── */
input, textarea, select,
.ctr-lf-input, .qe-textarea, #qe-template,
.qe-field-input, .qe-field-textarea, .qe-dropdown-text-input,
.qe-dropdown-select, .qe-color-hex, .qe-date-native,
.qe-em3-input, .qe-em3-textarea, .qe-em3-content-textarea,
.ctr-field-input, .qe-modal-input,
.qnote-textarea, #wa-f-name, #wa-f-msg, #wa-topic-btn, .wa-topic-opt { font-size: 13px; }

@media (max-width: 600px) {
  /* Overlay fullscreen, tanpa padding */
  .qe-save-tpl-overlay.show {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }

  /* Box memenuhi seluruh layar vertikal */
  .qe-save-tpl-box {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;          /* overflow di sini TIDAK scroll */
    padding: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    /* Slide-up dari bawah, bukan scale */
    transform: translateY(40px) !important;
    transition: transform var(--dur-base) var(--ease) !important;
  }

  .qe-save-tpl-overlay.show .qe-save-tpl-box {
    transform: translateY(0) !important;
  }

  /* Title header — fixed di atas */
  .qe-save-tpl-box > .qe-save-tpl-title {
    flex-shrink: 0 !important;
    padding: max(20px, env(safe-area-inset-top, 20px)) 22px 14px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 15px !important;
  }

  /* Scroll wrapper (diinject via JS) — area tengah yang bisa scroll */
  .qe-save-tpl-inner-scroll {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 0 22px 16px !important;
  }

  .qe-save-tpl-inner-scroll .qe-save-tpl-label {
    padding-top: 14px !important;
    margin-bottom: 6px !important;
  }

  .qe-save-tpl-inner-scroll .qe-save-tpl-input {
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  .qe-save-tpl-inner-scroll .qe-save-tpl-emoji-row {
    margin-bottom: 4px !important;
  }

  .qe-save-tpl-inner-scroll .qe-save-tpl-tags-row {
    margin-bottom: 0 !important;
  }

  /* Tombol Batal & Simpan — sticky footer, tidak menyentuh batas bawah HP */
  .qe-save-tpl-box > .qe-save-tpl-actions {
    flex-shrink: 0 !important;
    padding: 14px 22px max(24px, env(safe-area-inset-bottom, 24px)) !important;
    border-top: 1px solid var(--border) !important;
    background: var(--bg2) !important;
    z-index: 2 !important;
  }
}

/* ── waTopicIn keyframes & WA Topic hover (moved from inline body style) ── */
@keyframes waTopicIn {
from { opacity:0; transform:translateY(-6px) scale(.97); }
to   { opacity:1; transform:translateY(0) scale(1); }
}
.wa-topic-opt:hover { background: var(--bg4) !important; }
.wa-topic-opt.selected { background: var(--bg4) !important; }
.wa-topic-opt.selected > span:last-child { font-weight:700; color:var(--txt) !important; }
#wa-topic-btn:hover { border-color: var(--border3) !important; background: var(--bg4) !important; }
#wa-topic-btn.open { border-color: var(--txt4,var(--border3)) !important; background: var(--bg3) !important; }

@media (max-width: 768px) {
.left-nav {
    height: calc(100dvh - var(--topbar-h)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  #nav-eb-banner {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #nav-eb-banner * {
    touch-action: pan-y !important;
  }
  #nav-eb-banner button {
    touch-action: manipulation !important;
  }

#qe-generate-btn.qe-gen-sticky {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    border-radius: var(--r12) !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

.topbar-search {
    display: none;
    flex: 1;
    min-width: 0;
    max-width: none;
    width: 100%;
    margin: 0 6px;
  }

  .topbar-search.tb-search-expanded {
    display: flex !important;
  }

  .topbar.tb-search-active .topbar-left  { flex: 0 0 auto !important; }
  .topbar.tb-search-active .topbar-right { flex: 0 0 auto !important; }
  .topbar.tb-search-active .topbar-brand-text { display: none; }
  .topbar.tb-search-active #tb-search-icon-mobile { display: none !important; }

  #tb-search-icon-mobile { display: flex !important; }

.feed-col { margin-left: 0; margin-right: 0; }
  
  .hamburger { display: flex; }
  .topbar { gap: 4px; padding: 0 10px; }
  .topbar-brand { flex-shrink: 0; }
  .topbar-brand-text { display: block; }
  .topbar-left { flex: 0 0 auto; }
  .topbar-right { flex: 0 0 auto; margin-left: auto; }
  #btn-fullview { display: none !important; }
  .hamburger { width: 32px; height: 32px; }
  .topbar-logo-icon { width: 32px; height: 32px; flex-shrink: 0; }
  .topbar-right { gap: 2px; }
  .left-nav {
  transform: translateX(-100%);
  z-index: 99;
  box-shadow: none;
  /* FIX: pastikan sidebar selalu bisa di-scroll sampai konten paling bawah di mobile */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .left-nav.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.12); }
  .qe-step1-row-top { flex-wrap: nowrap; gap: 6px; }
  .qe-save-tpl-btn { font-size: 10.5px; padding: 5px 9px; }
  .qe-btn-ghost { padding: 4px 8px; font-size: 11px; }

.rp-drawer-overlay { z-index: 64; }
  .right-panel { z-index: 65; }
  .nav-overlay { z-index: 98; }

.rg-clear-btn span { display: none; }
  .rg-clear-btn-icon { display: inline-block; }
  .rg-clear-btn { padding: 5px 9px; min-width: 0; }

.qe-lib-body,
  .qe-lib-body * {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

.nav-item { min-height: 30px; }
  .tb-btn,
  #tb-search-icon-mobile,
  .hamburger { width: 36px; height: 36px; }
  .qe-copy-btn { padding: 8px 12px; min-height: 40px; }
  .qe-generate-btn { padding: 0 12px !important; height: 40px !important; font-size: 13px !important; }
  .qe-open-row { grid-template-columns:repeat(4,1fr); gap:4px; }
  .qe-open-ai-btn { font-size:9px; padding:0 4px; }
  .page { padding: 14px 16px; }

.qe-finder-ctx-menu,
  .qe-lib-preview-pop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

/* Row utama — specificity lebih tinggi dari `[onclick]{manipulation}` */
  .qe-lib-body .qe-finder-row,
  .qe-lib-body .qe-finder-row[onclick],
  .qe-lib-body .qe-finder-row-wrap,
  .qe-lib-body .qe-finder-header {
    touch-action: pan-y !important;
  }

  /* Kolom DETAIL: pointer-events:none agar touch naik ke parent scroller */
  .qe-lib-body .qe-tpl-mobile-meta-col,
  .qe-lib-body .qe-tpl-mobile-meta,
  .qe-lib-body .qe-meta-two-line,
  .qe-lib-body .qe-meta-line1,
  .qe-lib-body .qe-meta-line2,
  .qe-lib-body .qe-finder-col-name,
  .qe-lib-body .qe-finder-col-icon,
  .qe-lib-body .qe-finder-col-folder {
    touch-action: pan-y !important;
    pointer-events: none;
  }

  /* Semua [onclick] dalam lib-body: override global rule */
  .qe-lib-body [onclick] {
    touch-action: pan-y !important;
  }

  /* Container scroll */
  .qe-lib-body {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Tombol aksi ⋯ tetap tappable */
  .qe-lib-body .qe-finder-col-actions,
  .qe-lib-body .qe-finder-col-actions button,
  .qe-lib-body .qe-finder-col-actions [onclick],
  .qe-lib-body .qe-finder-more-btn {
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }

/* Step 2: semua field — font 13px, viewport sudah lock autozoom */
  .qe-field-textarea {
    font-size: 13px !important;
    padding: 7px 10px !important;
    min-height: 68px !important;
    line-height: 1.45 !important;
  }
  .qe-dropdown-select {
    font-size: 13px !important;
    padding: 7px 28px 7px 10px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }
  .qe-dropdown-text-input {
    font-size: 13px !important;
    padding: 7px 10px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }
  /* BUG FIX mobile: input mode ketik dalam dropdown harus sama persis */
  .qe-dropdown-field .qe-field-input {
    font-size: 13px !important;
    padding: 7px 28px 7px 10px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }

/* Semua field Step 2 — 13px seragam, viewport lock cegah autozoom */

.qe-lib-inline-pakai,
  .qe-lib-inline-detail,
  .qe-lib-inline-edit,
  .qe-lib-inline-fav,
  .qe-lib-inline-dupe,
  .qe-lib-inline-move,
  .qe-lib-inline-del {
    height: 38px !important;
    font-size: 14px !important;
    border-radius: 9px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .qe-lib-inline-footer {
    gap: 4px !important;
    padding: 8px 8px 10px !important;
  }

.macos-btn-max,
  .qe-detail-modal-traffic .dm-max,
  .qe-em3-tl-max,
  #mac-btn-max {
    background: #C8C8CA !important;
    box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12) !important;
    filter: none !important;         /* matikan hover brightness dari rule global */
    pointer-events: none !important;
    cursor: default !important;
  }

/* Pastikan touch-action aktif di semua input */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input:not([type]),
  textarea,
  select {
    touch-action: manipulation !important;
  }

  /* Notes: paksa 11px di mobile — sama dengan view mode */
  .qnote-textarea,
  .qnote-preview {
    font-size: 11px !important;
    line-height: 1.6 !important;
    padding: 9px 11px 4px !important;
  }

  .qnote-textarea::placeholder {
    font-size: 11px !important;
  }

}

/* ================================================================ */


/* v11-clean: fw-sub subtitles — always visible */
.fw-sub { display: block !important; }

/* v11-clean: fw-badge — softer, no border */
.fw-badge { border: none !important; background: rgba(0,0,0,.05) !important; color: var(--txt3) !important; font-size: 7.5px !important; }
html.dark .fw-badge { background: rgba(255,255,255,.08) !important; color: var(--txt3) !important; border: none !important; }

/* v11-clean: nav bottom disclaimer — much more subtle */
.nav-bottom-note p { opacity: 0.45 !important; font-size: 9.5px !important; }

/* v11-clean: result-stats — only show when has content */
#qe-result-card.has-result #qe-result-stats { display: block !important; }

/* v11-clean: stat cards — tighter without hint row */
.lp-stat { padding: 16px 14px !important; }

/* v11-clean: hide eyebrow */
.lp-hero-eyebrow { display: none !important; }

/* ═══════════════════════════════════════════
   v12-clean  STAGE 2 — Reduce visual noise
   ═══════════════════════════════════════════ */

/* 1. Step labels — kill uppercase + heavy weight */
.qe-step-label {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  color: var(--txt) !important;
}

/* 2. Step number circles — smaller, bold on desktop & mobile */
.qe-step-num {
  width: 20px !important;
  height: 20px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  border: 1.5px solid rgba(0,0,0,.18) !important;
  background: var(--bg2) !important;
  color: var(--txt) !important;
  box-shadow: none !important;
}
html.dark .qe-step-num {
  border-color: rgba(255,255,255,.22) !important;
  background: #3A3A3C !important;
  color: var(--txt) !important;
}

/* 3. "Format:" label in bracket row — hide, brackets self-explain */
.qe-bracket-label {
  display: none !important;
}

/* 4. "Belum ada placeholder" parse status — tone down, it's default empty state */
.qe-parse-status:not(.found) {
  opacity: 0.4 !important;
  font-size: 10.5px !important;
}
.qe-parse-status:not(.found) .dot {
  background: rgba(0,0,0,.15) !important;
}

/* 5. "Prompt Siap Pakai" result meta label — less shout */
.qe-result-meta {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  color: var(--txt3) !important;
  opacity: 0.65 !important;
}

/* 6. Master Prompt INACTIVE bar — very quiet, almost ghost */
#qe-mp-inactive-bar {
  border-color: rgba(0,0,0,.18) !important;
  opacity: 0.55 !important;
}
html.dark #qe-mp-inactive-bar {
  border-color: rgba(255,255,255,.30) !important;
  opacity: 1 !important;
}
html.dark #qe-mp-inactive-bar span,
html.dark #qe-mp-inactive-bar svg {
  opacity: 0.7 !important;
}

/* 7. "MASTER PROMPT" label in active bar — lighter */
#qe-mp-active-bar span[style*="letter-spacing:.3px"] {
  letter-spacing: 0 !important;
  font-size: 9px !important;
  text-transform: none !important;
  opacity: 0.5 !important;
}

/* 8. qe-lib-inline-count badge (Library count) — less prominent */
.qe-lib-inline-count {
  opacity: 0.45 !important;
  font-size: 8px !important;
}

/* ══════════════════════════════════════════════════════════
   TEMP HIDE — Meta Prompt, Engine Builder, Engine Bank (sidebar kiri)
   Status: DISEMBUNYIKAN atas permintaan user.

   CARA MENGEMBALIKAN SEPERTI SEMULA (kapan pun diminta):
   Cukup hapus/comment-out rule ".ctr-hidden-menu" di bawah ini.
   Class "ctr-hidden-menu" di index.html (#nav-meta-prompt,
   #nav-engine-builder, #nav-eb-mini) BOLEH dibiarkan menempel di HTML —
   begitu rule CSS ini hilang, ketiga menu otomatis tampil & bisa
   diklik normal lagi. Guard di qe-engine.js (switchPage) & qe-library.js
   (ebToggle) juga otomatis berhenti memblokir karena mereka mengecek
   keberadaan class yang sama ini.
   ══════════════════════════════════════════════════════════ */
.ctr-hidden-menu { display: none !important; }

   — dihilangkan sesuai request; badge jumlah di masing-masing sub-folder
   Library (nav-lib-folders) TIDAK terpengaruh, tetap tampil seperti biasa. */
#nav-lib-total.ni-badge {
  display: none !important;
}

/* 10. nav-profile handle (@createrus) — barely visible */
.nav-profile-handle {
  font-size: 10px !important;
  opacity: 0.3 !important;
}

/* 11. nav-profile-name — slightly smaller */
.nav-profile-name {
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* 12. rp-ratio-label ("RASIO IDEAL") — lose the uppercase shout */
.rp-ratio-label {
  font-size: 9px !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  font-weight: 500 !important;
  opacity: 0.45 !important;
}

/* 13. rp-ratio-item text — more muted */
.rp-ratio-item {
  font-size: 9.5px !important;
  opacity: 0.65 !important;
}

/* 14. "Example" ghost button — ghost it further, it's secondary action */
.qe-contoh-btn {
  opacity: 0.45 !important;
  font-size: 11px !important;
}
.qe-contoh-btn:hover {
  opacity: 0.85 !important;
}

/* 16. qe-mode-divider (pipe between Fast/Realtime) — invisible when modes are quiet */
.qe-mode-divider {
  opacity: 0.3 !important;
}

/* 17. Fast mode row — consistent spacing di semua ukuran layar */
/* ── Quick Engine fast-mode-row ── */
#qe-fast-mode-row {
  overflow: visible !important;
  margin-top: 16px !important;
  margin-bottom: 2px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border) !important;
}

/* Mobile ≤480px: label toggle tampil, reset icon-only */
@media (max-width: 480px) {
  #qe-fast-mode-row .qe-mode-label { display: inline !important; }
  #qe-fast-mode-row .qe-mode-divider { margin: 0 1px !important; }
  .qe-row-reset-label { display: none !important; }
  .qe-row-reset-btn { padding: 3px 8px !important; }
  #qe-fast-mode-row { gap: 5px !important; }
}

/* 18. qnote-title-label "Notes" — smaller */
.qnote-title-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  opacity: 0.65 !important;
}

/* 19. qnote-counter — tiny mono count next to Notes */
.qnote-counter {
  opacity: 0.4 !important;
}

/* 20. nav-bottom-note disclaimer — even more ghost (was .30, now .18) */
.nav-bottom-note {
  opacity: 0.38 !important;
}
html.dark .nav-bottom-note {
  opacity: 0.30 !important;
}

/* 21. Step 2 field count badge — softer pill */
#qe-field-count-badge {
  font-size: 9px !important;
  font-weight: 600 !important;
  padding: 1px 7px !important;
  opacity: 0.6 !important;
  background: rgba(0,0,0,.04) !important;
  border: 0.5px solid rgba(0,0,0,.08) !important;
}

/* 22. parse-status found state — keep vibrant (green dot) but text lighter */
.qe-parse-status.found {
  font-size: 10.5px !important;
  color: var(--txt3) !important;
}

/* 23. "↺ Reset" ghost button in step 2 — very quiet */
.qe-card-head .qe-btn-ghost[onclick*="qeClearFields"] {
  opacity: 0.4 !important;
  font-size: 11px !important;
}
.qe-card-head .qe-btn-ghost[onclick*="qeClearFields"]:hover {
  opacity: 0.85 !important;
}


/* ── Storage quota banner (ctr-topbar-storage-banner) ── */
#ctr-topbar-storage-banner { transition: background .3s, color .3s; }
#ctr-topbar-storage-banner.tsb-warn  { background: #FF9500; color: #fff; }
#ctr-topbar-storage-banner.tsb-crit  { background: #FF3B30; color: #fff; }
html.dark #ctr-topbar-storage-banner.tsb-warn { background: #B36B00; }
html.dark #ctr-topbar-storage-banner.tsb-crit { background: #C0392B; }
body.ctr-storage-banner-visible .main-layout { padding-top: calc(var(--topbar-h,60px) + 36px); }
body.ctr-storage-banner-visible .left-nav,
body.ctr-storage-banner-visible .right-panel {
  top: calc(var(--topbar-h,60px) + 36px) !important;
  height: calc(100vh - var(--topbar-h,60px) - 36px) !important;
}

/* ── FIX: cegah elemen dengan visibility:visible inline meng-override
   ancestor yang di-hide (visibility:hidden) saat transisi login → app.
   visibility TIDAK seperti display — child bisa override visibility
   parent jika child punya nilai visibility sendiri. Force-inherit
   selama login screen masih ada di DOM. ── */
body:has(#ctr-login-screen) .main-layout * {
  visibility: inherit !important;
}