/* Qwix Color Intelligence — isolated Saved > Colors workspace */
html body #page-colors {
  --ci-text:var(--aptk-text,#f4f4f5);
  --ci-muted:var(--aptk-muted,#9b9da3);
  --ci-panel:var(--aptk-block,#202124);
  --ci-control:var(--aptk-secondary,#2a2b2e);
  --ci-edge:var(--aptk-edge,rgba(255,255,255,.1));
  --ci-accent:var(--aptk-detail,#ff7a45);
  --ci-success:#69d39b;
  --ci-danger:#ff7a7a;
}

html body #page-colors .ci-mode-tabs,
html body #page-colors .ci-source-tabs {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:5px !important;
  flex:0 0 auto !important;
  padding:3px !important;
  border:1px solid var(--ci-edge) !important;
  border-radius:11px !important;
  background:rgba(0,0,0,.14) !important;
}
html body #page-colors .ci-source-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
html body #page-colors .ci-mode-tab,
html body #page-colors .ci-source-tab {
  appearance:none !important;
  min-width:0 !important;
  height:28px !important;
  padding:0 8px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--ci-muted) !important;
  font:800 8px/1 Inter,sans-serif !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}
html body #page-colors .ci-mode-tab.is-active,
html body #page-colors .ci-source-tab.is-active {
  background:var(--ci-control) !important;
  color:var(--ci-text) !important;
  box-shadow:var(--aptk-hard-shadow-soft,0 2px 5px rgba(0,0,0,.28)) !important;
}

html body #page-colors .ci-mode-panel {
  display:none !important;
  flex-direction:column !important;
  gap:9px !important;
  min-width:0 !important;
}
html body #page-colors .ci-mode-panel.is-active {display:flex!important;}
html body #page-colors .ci-mode-panel[hidden],
html body #page-colors .ci-source-panel[hidden]{display:none!important;}
html body #page-colors .ci-source-panel.is-active{display:grid!important;gap:8px!important;}

html body #page-colors .ci-intro {
  display:grid !important;
  gap:4px !important;
  padding:11px 12px !important;
  border:1px solid var(--ci-edge) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.018) !important;
}
html body #page-colors .ci-intro strong{color:var(--ci-text)!important;font-size:12px!important;line-height:1.2!important;}
html body #page-colors .ci-intro span,
html body #page-colors .ci-help,
html body #page-colors .ci-status{color:var(--ci-muted)!important;font-size:9px!important;line-height:1.45!important;}

html body #page-colors .ci-step-card,
html body #page-colors .ci-details {
  margin:0 !important;
  padding:10px !important;
  border:1px solid var(--ci-edge) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.018) !important;
  box-shadow:none !important;
}
html body #page-colors .ci-step-head {display:flex!important;align-items:center!important;gap:7px!important;margin-bottom:9px!important;color:var(--ci-text)!important;font-size:9px!important;}
html body #page-colors .ci-step-number {
  display:grid !important;place-items:center !important;width:20px !important;height:20px !important;flex:0 0 20px !important;
  border-radius:7px !important;background:var(--ci-accent) !important;color:#fff !important;font-size:9px !important;font-weight:900 !important;
}

html body #page-colors .ci-color-pair {display:grid!important;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;gap:6px!important;align-items:end!important;}
html body #page-colors .ci-color-field,
html body #page-colors .ci-inline-field,
html body #page-colors .ci-studio-controls label {display:grid!important;gap:6px!important;color:var(--ci-muted)!important;font-size:8px!important;font-weight:800!important;letter-spacing:.02em!important;}
html body #page-colors .ci-color-control {display:grid!important;grid-template-columns:30px minmax(0,1fr)!important;gap:5px!important;}
html body #page-colors .ci-color-control input[type="color"] {
  appearance:none !important;-webkit-appearance:none !important;width:30px !important;height:30px !important;padding:2px !important;
  border:1px solid var(--ci-edge) !important;border-radius:8px !important;background:var(--ci-control) !important;cursor:pointer !important;
}
html body #page-colors .ci-color-control input[type="color"]::-webkit-color-swatch-wrapper{padding:0!important;}
html body #page-colors .ci-color-control input[type="color"]::-webkit-color-swatch{border:0!important;border-radius:5px!important;}
html body #page-colors .ci-color-control input[type="text"],
html body #page-colors .ci-select {
  width:100% !important;height:30px !important;min-width:0 !important;margin:0 !important;padding:0 8px !important;
  border:1px solid var(--ci-edge) !important;border-radius:8px !important;background:var(--ci-control) !important;color:var(--ci-text) !important;
  box-shadow:none !important;outline:none !important;font:700 9px/1.2 "IBM Plex Mono",monospace !important;
}
html body #page-colors .ci-select{font-family:Inter,sans-serif!important;}
html body #page-colors .ci-color-control input[type="text"]:focus,
html body #page-colors .ci-select:focus{border-color:var(--ci-accent)!important;}
html body #page-colors .ci-icon-btn {
  width:28px !important;height:30px !important;padding:0 !important;border:1px solid var(--ci-edge) !important;border-radius:8px !important;
  background:var(--ci-control) !important;color:var(--ci-text) !important;box-shadow:none !important;font-size:14px !important;cursor:pointer !important;
}

html body #page-colors .ci-pair-preview {
  min-height:132px !important;padding:14px !important;border-radius:12px !important;display:flex !important;flex-direction:column !important;
  align-items:flex-start !important;justify-content:center !important;gap:7px !important;overflow:hidden !important;
}
html body #page-colors .ci-pair-preview span{font-size:7px!important;font-weight:900!important;letter-spacing:.12em!important;opacity:.66!important;}
html body #page-colors .ci-pair-preview strong{font-size:16px!important;line-height:1.12!important;max-width:340px!important;}
html body #page-colors .ci-pair-preview p{margin:0!important;max-width:360px!important;font-size:9px!important;line-height:1.45!important;opacity:.76!important;}
html body #page-colors .ci-pair-preview b{margin-top:3px!important;padding:7px 9px!important;border:1px solid currentColor!important;border-radius:7px!important;font-size:8px!important;}

html body #page-colors .ci-result-card {
  display:grid !important;grid-template-columns:112px minmax(0,1fr) !important;gap:12px !important;align-items:center !important;
  padding:12px !important;border:1px solid var(--ci-edge) !important;border-radius:11px !important;background:rgba(255,255,255,.018) !important;
}
html body #page-colors .ci-score-block{display:grid!important;gap:3px!important;}
html body #page-colors .ci-score-block>span{color:var(--ci-muted)!important;font-size:7px!important;font-weight:900!important;letter-spacing:.1em!important;}
html body #page-colors .ci-score-block>strong{color:var(--ci-text)!important;font-size:27px!important;line-height:1!important;letter-spacing:-.04em!important;}
html body #page-colors .ci-score-block small{font-size:10px!important;margin-left:2px!important;opacity:.6!important;}
html body #page-colors .ci-rating-block{display:grid!important;gap:3px!important;min-width:0!important;}
html body #page-colors .ci-rating-block>strong{color:var(--ci-text)!important;font-size:12px!important;}
html body #page-colors .ci-rating-block>span:last-child{color:var(--ci-muted)!important;font-size:9px!important;line-height:1.35!important;}
html body #page-colors .ci-stars{display:flex!important;gap:2px!important;font-size:14px!important;line-height:1!important;color:rgba(255,255,255,.17)!important;}
html body #page-colors .ci-stars .is-filled{color:var(--ci-accent)!important;}

html body #page-colors .ci-section-head{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:8px!important;margin-top:2px!important;}
html body #page-colors .ci-section-head strong{color:var(--ci-text)!important;font-size:10px!important;}
html body #page-colors .ci-section-head span{color:var(--ci-muted)!important;font-size:8px!important;text-align:right!important;}
html body #page-colors .ci-suggestion-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;}
html body #page-colors .ci-suggestion {
  min-width:0 !important;padding:0 !important;overflow:hidden !important;border:1px solid var(--ci-edge) !important;border-radius:10px !important;
  background:var(--ci-control) !important;color:var(--ci-text) !important;box-shadow:none !important;cursor:pointer !important;text-align:left !important;
}
html body #page-colors .ci-suggestion-swatch{display:block!important;height:44px!important;background:var(--ci-swatch)!important;}
html body #page-colors .ci-suggestion-copy{display:grid!important;gap:3px!important;padding:7px!important;}
html body #page-colors .ci-suggestion-copy strong{font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
html body #page-colors .ci-suggestion-copy span{font:700 8px/1.2 "IBM Plex Mono",monospace!important;color:var(--ci-muted)!important;}

html body #page-colors .ci-details summary {color:var(--ci-text)!important;font-size:9px!important;font-weight:800!important;cursor:pointer!important;}
html body #page-colors .ci-compliance{display:grid!important;gap:5px!important;margin-top:10px!important;}
html body #page-colors .ci-compliance-row{display:flex!important;justify-content:space-between!important;gap:8px!important;padding:6px 0!important;border-top:1px solid var(--ci-edge)!important;color:var(--ci-muted)!important;font-size:8px!important;}
html body #page-colors .ci-compliance-row b[data-pass="true"]{color:var(--ci-success)!important;}
html body #page-colors .ci-compliance-row b[data-pass="false"]{color:var(--ci-danger)!important;}
html body #page-colors .ci-analysis{margin-top:7px!important;color:var(--ci-muted)!important;font-size:8px!important;line-height:1.5!important;}

html body #page-colors .ci-actions-row{display:flex!important;flex-wrap:wrap!important;gap:6px!important;}
html body #page-colors .ci-primary-btn,
html body #page-colors .ci-secondary-btn {
  height:29px !important;padding:0 10px !important;border:1px solid var(--ci-edge) !important;border-radius:8px !important;
  box-shadow:var(--aptk-hard-shadow-soft,0 2px 4px rgba(0,0,0,.25)) !important;font:850 8px/1 Inter,sans-serif !important;
  letter-spacing:.02em !important;text-transform:uppercase !important;cursor:pointer !important;
}
html body #page-colors .ci-primary-btn{background:var(--ci-accent)!important;color:var(--qwix-accent-ink,var(--accent-ink,#fff8ed)) !important;border-color:transparent!important;}
html body #page-colors .ci-secondary-btn{background:var(--ci-control)!important;color:var(--ci-text)!important;}
html body #page-colors .ci-full{width:100%!important;}
html body #page-colors .ci-status{min-height:14px!important;}

html body #page-colors .ci-source-summary{display:grid!important;grid-template-columns:42px 42px minmax(0,1fr)!important;gap:6px!important;align-items:center!important;padding:9px!important;border:1px solid var(--ci-edge)!important;border-radius:10px!important;}
html body #page-colors .ci-source-summary>span{height:30px!important;border-radius:7px!important;border:1px solid var(--ci-edge)!important;}
html body #page-colors .ci-source-summary>strong{font-size:9px!important;color:var(--ci-text)!important;}

html body #page-colors .ci-reference-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:6px !important;
}
html body #page-colors .ci-reference-actions .ci-secondary-btn{
  width:100% !important;
  min-width:0 !important;
}
html body #page-colors .ci-reference-actions .ci-secondary-btn.is-busy{
  opacity:.72 !important;
  cursor:progress !important;
  pointer-events:none !important;
}
html body #page-colors .ci-dropzone {
  position:relative !important;display:flex !important;align-items:center !important;justify-content:center !important;min-height:38px !important;overflow:hidden !important;
  border:1px dashed var(--ci-edge) !important;border-radius:9px !important;background:rgba(0,0,0,.10) !important;color:var(--ci-muted) !important;cursor:pointer !important;
}
html body #page-colors .ci-dropzone.is-dragging{border-color:var(--ci-accent)!important;}
html body #page-colors .ci-dropzone input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important;z-index:3!important;}
html body #page-colors .ci-dropzone img,
html body #page-colors .ci-dropzone.has-image img{display:none!important;}
html body #page-colors .ci-dropzone>span{position:relative!important;z-index:2!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;text-align:center!important;padding:7px 10px!important;text-shadow:none!important;}
html body #page-colors .ci-dropzone.has-image>span{display:flex!important;}
html body #page-colors .ci-dropzone strong{color:var(--ci-text)!important;font-size:8px!important;}
html body #page-colors .ci-dropzone small{font-size:7px!important;}

html body #page-colors .ci-extracted-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:5px!important;}
html body #page-colors .ci-extracted-color{height:42px!important;padding:0!important;border:1px solid var(--ci-edge)!important;border-radius:8px!important;background:var(--ci-swatch)!important;box-shadow:none!important;cursor:pointer!important;}
html body #page-colors .ci-extracted-color.is-selected{outline:2px solid var(--ci-accent)!important;outline-offset:1px!important;}

html body #page-colors .ci-studio-controls{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
html body #page-colors .ci-range-field{grid-column:1/-1!important;}
html body #page-colors .ci-range-field>span{display:flex!important;justify-content:space-between!important;}
html body #page-colors .ci-range-field input{width:100%!important;accent-color:var(--ci-accent)!important;}
html body #page-colors .ci-style-description{grid-column:1/-1!important;}

html body #page-colors .ci-role-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;}
html body #page-colors .ci-role-color {
  min-width:0 !important;min-height:78px !important;padding:8px !important;border:0 !important;border-radius:9px !important;
  background:var(--ci-swatch) !important;color:var(--ci-ink) !important;box-shadow:none !important;display:flex !important;flex-direction:column !important;
  align-items:flex-start !important;justify-content:space-between !important;text-align:left !important;cursor:pointer !important;
}
html body #page-colors .ci-role-color span{font-size:7px!important;font-weight:800!important;opacity:.75!important;}
html body #page-colors .ci-role-color strong{font:800 8px/1.2 "IBM Plex Mono",monospace!important;}

html body #page-colors .ci-palette-preview {
  min-height:142px !important;padding:13px !important;border-radius:11px !important;background:var(--palette-bg,#10131a) !important;color:var(--palette-text,#f5f7fa) !important;
  display:flex !important;flex-direction:column !important;justify-content:space-between !important;gap:12px !important;overflow:hidden !important;
}
html body #page-colors .ci-palette-preview>div:first-child{padding:10px!important;border-radius:9px!important;background:var(--palette-surface,#1c2230)!important;}
html body #page-colors .ci-palette-preview span{color:var(--palette-highlight,#f2a65a)!important;font-size:7px!important;font-weight:900!important;letter-spacing:.1em!important;}
html body #page-colors .ci-palette-preview strong{display:block!important;margin:6px 0 4px!important;font-size:15px!important;}
html body #page-colors .ci-palette-preview p{margin:0!important;font-size:8px!important;line-height:1.4!important;opacity:.72!important;}
html body #page-colors .ci-palette-preview>div:last-child{display:flex!important;gap:6px!important;}
html body #page-colors .ci-palette-preview b{padding:7px 9px!important;border-radius:7px!important;background:var(--palette-primary,#65d6ad)!important;color:var(--palette-bg,#10131a)!important;font-size:8px!important;}
html body #page-colors .ci-palette-preview b:last-child{background:var(--palette-secondary,#6ea5ff)!important;}
html body #page-colors .ci-metrics{display:flex!important;flex-wrap:wrap!important;gap:5px!important;}
html body #page-colors .ci-metrics span{padding:5px 7px!important;border-radius:999px!important;background:var(--ci-control)!important;color:var(--ci-muted)!important;font-size:7px!important;}

@media (max-width:360px){
  html body #page-colors .ci-color-pair{grid-template-columns:1fr 26px 1fr!important;}
  html body #page-colors .ci-color-control{grid-template-columns:28px 1fr!important;}
  html body #page-colors .ci-result-card{grid-template-columns:96px 1fr!important;}
  html body #page-colors .ci-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Saved > Colors > Match — compact, single-flow interface */
html body #page-colors #ci-mode-compare{
  gap:9px!important;
}
html body #page-colors .ci-match-card{
  padding:12px!important;
  border:1px solid var(--ci-edge)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.018)!important;
  box-shadow:none!important;
}
html body #page-colors .ci-match-card .ci-color-pair{
  grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)!important;
  gap:7px!important;
  align-items:end!important;
}
html body #page-colors .ci-match-card .ci-color-field>span:first-child{
  color:var(--ci-text)!important;
  font-size:9px!important;
  font-weight:850!important;
}
html body #page-colors .ci-match-card .ci-color-control{
  grid-template-columns:36px minmax(0,1fr)!important;
  gap:6px!important;
}
html body #page-colors .ci-match-card .ci-color-control input[type="color"]{
  width:36px!important;
  height:36px!important;
  border-radius:9px!important;
  padding:3px!important;
}
html body #page-colors .ci-match-card .ci-color-control input[type="color"]::-webkit-color-swatch{
  border-radius:6px!important;
}
html body #page-colors .ci-match-card .ci-color-control input[type="text"]{
  height:36px!important;
  padding:0 9px!important;
  border-radius:9px!important;
  font-size:9px!important;
}
html body #page-colors .ci-match-card .ci-icon-btn{
  width:30px!important;
  height:36px!important;
  border-radius:9px!important;
  font-size:15px!important;
}
html body #page-colors .ci-purpose{
  display:grid!important;
  gap:7px!important;
  margin-top:12px!important;
  padding-top:11px!important;
  border-top:1px solid var(--ci-edge)!important;
}
html body #page-colors .ci-purpose-label{
  color:var(--ci-muted)!important;
  font-size:8px!important;
  font-weight:850!important;
  letter-spacing:.02em!important;
}
html body #page-colors .ci-purpose-tabs{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:5px!important;
}
html body #page-colors .ci-purpose-btn{
  appearance:none!important;
  min-width:0!important;
  height:30px!important;
  padding:0 5px!important;
  border:1px solid var(--ci-edge)!important;
  border-radius:8px!important;
  background:var(--ci-control)!important;
  color:var(--ci-muted)!important;
  box-shadow:none!important;
  font:800 8px/1 Inter,sans-serif!important;
  cursor:pointer!important;
}
html body #page-colors .ci-purpose-btn:hover{
  color:var(--ci-text)!important;
}
html body #page-colors .ci-purpose-btn.is-active{
  border-color:var(--ci-accent)!important;
  background:var(--ci-control)!important;
  color:var(--ci-text)!important;
}

html body #page-colors #ci-mode-compare .ci-result-card{
  display:block!important;
  padding:12px!important;
  border:1px solid var(--ci-edge)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.018)!important;
}
html body #page-colors #ci-mode-compare .ci-result-card[data-rating="1"],
html body #page-colors #ci-mode-compare .ci-result-card[data-rating="2"]{
  border-color:rgba(255,122,122,.28)!important;
}
html body #page-colors #ci-mode-compare .ci-result-card[data-rating="4"],
html body #page-colors #ci-mode-compare .ci-result-card[data-rating="5"]{
  border-color:rgba(105,211,155,.24)!important;
}
html body #page-colors .ci-result-main{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}
html body #page-colors #ci-mode-compare .ci-result-main .ci-stars{
  flex:0 0 auto!important;
  gap:1px!important;
  color:var(--ci-edge)!important;
  font-size:15px!important;
}
html body #page-colors #ci-mode-compare .ci-result-main>strong{
  min-width:0!important;
  color:var(--ci-text)!important;
  font-size:13px!important;
  line-height:1.1!important;
}
html body #page-colors .ci-ratio{
  margin-left:auto!important;
  flex:0 0 auto!important;
  padding:5px 7px!important;
  border:1px solid var(--ci-edge)!important;
  border-radius:7px!important;
  background:var(--ci-control)!important;
  color:var(--ci-muted)!important;
  font:750 8px/1 "IBM Plex Mono",monospace!important;
}
html body #page-colors #ci-mode-compare .ci-result-card>p{
  margin:8px 0 0!important;
  color:var(--ci-muted)!important;
  font-size:9px!important;
  line-height:1.4!important;
}

html body #page-colors #ci-mode-compare .ci-section-head{
  margin:1px 0 -1px!important;
}
html body #page-colors #ci-mode-compare .ci-section-head strong{
  font-size:10px!important;
}
html body #page-colors #ci-mode-compare .ci-suggestion-grid{
  gap:6px!important;
}
html body #page-colors #ci-mode-compare .ci-suggestion{
  position:relative!important;
  border-radius:10px!important;
  transition:border-color .16s ease,transform .16s ease!important;
}
html body #page-colors #ci-mode-compare .ci-suggestion:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(255,255,255,.18)!important;
}
html body #page-colors #ci-mode-compare .ci-suggestion.is-selected{
  border-color:var(--ci-accent)!important;
}
html body #page-colors .ci-suggestion-preview{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:50px!important;
  overflow:hidden!important;
  background:var(--ci-bg)!important;
}
html body #page-colors .ci-suggestion-preview>span{
  position:relative!important;
  z-index:1!important;
  color:var(--ci-swatch)!important;
  font-size:17px!important;
  font-weight:900!important;
  letter-spacing:-.05em!important;
}
html body #page-colors .ci-suggestion-preview>i{
  position:absolute!important;
  left:8px!important;
  bottom:7px!important;
  width:22px!important;
  height:4px!important;
  border-radius:999px!important;
  background:var(--ci-swatch)!important;
}
html body #page-colors #ci-mode-compare .ci-suggestion-copy{
  gap:5px!important;
  padding:8px!important;
}
html body #page-colors #ci-mode-compare .ci-suggestion-copy>strong{
  color:var(--ci-text)!important;
  font-size:9px!important;
}
html body #page-colors .ci-suggestion-meta{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:4px!important;
  min-width:0!important;
}
html body #page-colors .ci-suggestion-meta code{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  color:var(--ci-muted)!important;
  font:700 7px/1.2 "IBM Plex Mono",monospace!important;
}
html body #page-colors .ci-suggestion-meta em{
  flex:0 0 auto!important;
  color:var(--ci-muted)!important;
  font:750 7px/1 Inter,sans-serif!important;
  font-style:normal!important;
}

html body #page-colors .ci-match-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto!important;
  gap:6px!important;
}
html body #page-colors .ci-match-actions button{
  width:100%!important;
  min-width:0!important;
}
html body #page-colors #ci-mode-compare .ci-status{
  min-height:11px!important;
  margin-top:-2px!important;
  font-size:8px!important;
}

@media (max-width:360px){
  html body #page-colors .ci-purpose-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html body #page-colors .ci-match-card .ci-color-pair{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;}
  html body #page-colors .ci-match-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;}
  html body #page-colors .ci-match-actions #ciApplyForeground{grid-column:1/-1!important;}
}

/* Detached Match / Library / Palette menu */
html body #page-colors .ci-mode-tabs,
html body #page-colors .ci-mode-tabs.ci-mode-tabs-detached{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:5px !important;
  flex:0 0 auto !important;
  width:100% !important;
  margin:0 0 8px 0 !important;
  position:relative !important;
  overflow:hidden !important;
  max-height:12px !important;
  min-height:12px !important;
  padding:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
  transition:max-height .42s cubic-bezier(.22,.84,.28,1),padding .42s cubic-bezier(.22,.84,.28,1),border-radius .42s cubic-bezier(.22,.84,.28,1),background .42s ease,border-color .42s ease,box-shadow .42s ease !important;
}
html body #page-colors .ci-mode-tabs::before,
html body #page-colors .ci-mode-tabs.ci-mode-tabs-detached::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:34px !important;
  height:4px !important;
  border-radius:999px !important;
  transform:translate(-50%,-50%) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.12)) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18) !important;
  opacity:.95 !important;
  transition:opacity .28s ease,transform .42s cubic-bezier(.22,.84,.28,1) !important;
  pointer-events:none !important;
}
html body #page-colors .ci-mode-tabs:hover,
html body #page-colors .ci-mode-tabs:focus-within,
html body #page-colors .ci-mode-tabs.ci-mode-tabs-detached:hover,
html body #page-colors .ci-mode-tabs.ci-mode-tabs-detached:focus-within{
  max-height:40px !important;
  min-height:40px !important;
  padding:3px !important;
  border-radius:11px !important;
  background:rgba(0,0,0,.14) !important;
  border-color:var(--ci-edge) !important;
  box-shadow:none !important;
}
html body #page-colors .ci-mode-tabs:hover::before,
html body #page-colors .ci-mode-tabs:focus-within::before,
html body #page-colors .ci-mode-tabs.ci-mode-tabs-detached:hover::before,
html body #page-colors .ci-mode-tabs.ci-mode-tabs-detached:focus-within::before{
  opacity:0 !important;
  transform:translate(-50%,-95%) !important;
}
html body #page-colors .ci-mode-tab{
  opacity:0 !important;
  transform:translateY(-7px) !important;
  pointer-events:none !important;
  transition:opacity .24s ease .08s,transform .42s cubic-bezier(.22,.84,.28,1),background .18s ease,color .18s ease,box-shadow .18s ease !important;
}
html body #page-colors .ci-mode-tabs:hover .ci-mode-tab,
html body #page-colors .ci-mode-tabs:focus-within .ci-mode-tab,
html body #page-colors .ci-mode-tabs.ci-mode-tabs-detached:hover .ci-mode-tab,
html body #page-colors .ci-mode-tabs.ci-mode-tabs-detached:focus-within .ci-mode-tab{
  opacity:1 !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}
html body #page-colors #saved-subpage-colors > .saved-library-combined-card{
  margin-top:0 !important;
}
html body #page-colors #saved-subpage-colors > .saved-library-combined-card .ci-mode-panel{
  padding-top:0 !important;
}

/* v1.1.3 — detached menu and visible workspace fix */
html body #page-colors #saved-subpage-colors.active{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  min-height:0 !important;
  overflow:hidden !important;
}

/* The mode switch is its own independent control, outside the function card. */
html body #page-colors #saved-subpage-colors > #ciModeTabs.ci-mode-tabs-detached{
  order:0 !important;
  flex:0 0 auto !important;
  width:100% !important;
  margin:0 !important;
  z-index:3 !important;
}

/* The actual tools live in a separate card below the switch. */
html body #page-colors #saved-subpage-colors > .ci-workspace-card,
html body #v120App #v120Content #page-colors #saved-subpage-colors > .card.saved-library-card.saved-library-combined-card.ci-workspace-card{
  order:1 !important;
  flex:1 1 auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:9px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  border:1px solid var(--ci-edge) !important;
  border-radius:11px !important;
  background:var(--aptk-block,var(--ci-panel)) !important;
  background-image:none !important;
  box-shadow:var(--aptk-hard-shadow,0 4px 12px rgba(0,0,0,.22)) !important;
}

/* Do not rely on the HTML hidden attribute in older CEP Chromium builds. */
html body #page-colors .ci-workspace-card > .ci-mode-panel{
  width:100% !important;
  min-width:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
html body #page-colors .ci-workspace-card > .ci-mode-panel:not(.is-active){
  display:none !important;
}
html body #page-colors .ci-workspace-card > .ci-mode-panel.is-active{
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
}
html body #page-colors .ci-workspace-card > .ci-mode-panel.is-active > *{
  opacity:1 !important;
  visibility:visible !important;
}

/* Slower, smoother expansion of only Library / Match / Palette. */
html body #page-colors #ciModeTabs.ci-mode-tabs-detached{
  max-height:10px !important;
  min-height:10px !important;
  padding:0 !important;
  border-radius:999px !important;
  transition:
    max-height .52s cubic-bezier(.2,.78,.22,1),
    min-height .52s cubic-bezier(.2,.78,.22,1),
    padding .52s cubic-bezier(.2,.78,.22,1),
    border-radius .52s cubic-bezier(.2,.78,.22,1),
    background .38s ease,
    border-color .38s ease !important;
}
html body #page-colors #ciModeTabs.ci-mode-tabs-detached:hover,
html body #page-colors #ciModeTabs.ci-mode-tabs-detached:focus-within{
  max-height:40px !important;
  min-height:40px !important;
  padding:3px !important;
  border-radius:11px !important;
}
html body #page-colors #ciModeTabs.ci-mode-tabs-detached .ci-mode-tab{
  transition:
    opacity .30s ease .10s,
    transform .52s cubic-bezier(.2,.78,.22,1),
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease !important;
}


/* v1.1.4 — truly detached menu, transparent function workspace */
html body #page-colors #saved-subpage-colors.active{
  gap:8px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Only the compact Library / Match / Palette switch has its own surface. */
html body #page-colors #saved-subpage-colors > #ciModeTabs.ci-mode-tabs-detached{
  width:100% !important;
  margin:0 !important;
  flex:0 0 auto !important;
  z-index:4 !important;
}

/* The function area is no longer one large card. Individual controls keep their own cards. */
html body #page-colors #saved-subpage-colors > #ciWorkspace.ci-workspace{
  display:block !important;
  order:1 !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
html body #page-colors #ciWorkspace.ci-workspace > .ci-mode-panel{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
html body #page-colors #ciWorkspace.ci-workspace > .ci-mode-panel:not(.is-active){
  display:none !important;
}
html body #page-colors #ciWorkspace.ci-workspace > .ci-mode-panel.is-active{
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
}

/* Collapse as soon as the pointer leaves the switch. Focus must not keep it open. */
html body #page-colors #ciModeTabs.ci-mode-tabs-detached:focus-within{
  max-height:10px !important;
  min-height:10px !important;
  padding:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
}
html body #page-colors #ciModeTabs.ci-mode-tabs-detached:focus-within::before{
  opacity:.95 !important;
  transform:translate(-50%,-50%) !important;
}
html body #page-colors #ciModeTabs.ci-mode-tabs-detached:focus-within .ci-mode-tab{
  opacity:0 !important;
  transform:translateY(-7px) !important;
  pointer-events:none !important;
}
html body #page-colors #ciModeTabs.ci-mode-tabs-detached:hover{
  max-height:40px !important;
  min-height:40px !important;
  padding:3px !important;
  border-radius:11px !important;
  background:rgba(0,0,0,.14) !important;
  border-color:var(--ci-edge) !important;
  box-shadow:none !important;
}
html body #page-colors #ciModeTabs.ci-mode-tabs-detached:hover::before{
  opacity:0 !important;
  transform:translate(-50%,-95%) !important;
}
html body #page-colors #ciModeTabs.ci-mode-tabs-detached:hover .ci-mode-tab{
  opacity:1 !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}


/* v1.1.5 — restore scrolling inside the detached Colors workspace */
html body #page-colors #saved-subpage-colors.active{
  min-height:0 !important;
  overflow:hidden !important;
}
html body #page-colors #saved-subpage-colors > #ciWorkspace.ci-workspace{
  flex:1 1 auto !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:0 5px 10px 0 !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(244,244,245,.34) transparent !important;
}
html body #page-colors #ciWorkspace.ci-workspace::-webkit-scrollbar{
  display:block !important;
  width:7px !important;
  height:7px !important;
}
html body #page-colors #ciWorkspace.ci-workspace::-webkit-scrollbar-track{
  background:transparent !important;
}
html body #page-colors #ciWorkspace.ci-workspace::-webkit-scrollbar-thumb{
  background:rgba(244,244,245,.30) !important;
  border:2px solid transparent !important;
  border-radius:999px !important;
  background-clip:content-box !important;
}
html body #page-colors #ciWorkspace.ci-workspace::-webkit-scrollbar-thumb:hover{
  background:rgba(244,244,245,.48) !important;
  border:2px solid transparent !important;
  background-clip:content-box !important;
}
html body #page-colors #ciWorkspace.ci-workspace > .ci-mode-panel.is-active{
  min-height:max-content !important;
  padding-bottom:2px !important;
}

/* v1.1.6 — robust flex sizing for CEP: the workspace takes the remaining height and scrolls */
html body #page-colors #saved-subpage-colors > #ciWorkspace.ci-workspace{
  flex:1 1 0% !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
}
html body #page-colors #ciWorkspace.ci-workspace > .ci-mode-panel.is-active{
  min-height:0 !important;
  height:auto !important;
}

/* v1.2.0 — simpler Match colors and explicit editable Palette workflow */
html body #page-colors .ci-match-card .ci-color-control{
  grid-template-columns:44px minmax(0,1fr) !important;
  gap:8px !important;
  align-items:center !important;
}
html body #page-colors .ci-match-card .ci-color-control input[type="color"],
html body #page-colors .ci-match-card .ci-large-color-picker{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:10px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
  cursor:pointer !important;
}
html body #page-colors .ci-match-card .ci-color-control input[type="color"]::-webkit-color-swatch-wrapper{
  padding:0 !important;
}
html body #page-colors .ci-match-card .ci-color-control input[type="color"]::-webkit-color-swatch{
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:10px !important;
}
html body #page-colors .ci-match-card .ci-color-control input[type="text"].user-color-input,
html body #page-colors .ci-match-card .ci-hex-input{
  width:100% !important;
  height:32px !important;
  min-height:32px !important;
  margin:0 !important;
  padding:0 11px !important;
  border-radius:11px !important;
  border:1px solid rgba(255,255,255,.045) !important;
  background:var(--sv-panel-2) !important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.035)) !important;
  box-shadow:var(--sv-inset) !important;
  color:var(--sv-text) !important;
  font:750 9px/1.2 "IBM Plex Mono",monospace !important;
  letter-spacing:.002em !important;
  outline:none !important;
}
html body #page-colors .ci-match-card .ci-color-control input[type="text"].user-color-input:focus{
  border-color:var(--ci-accent) !important;
}
html body #page-colors .ci-match-card .ci-icon-btn{
  height:44px !important;
  align-self:end !important;
}
html body #page-colors .ci-match-actions{
  display:grid !important;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) !important;
  gap:6px !important;
}
html body #page-colors .ci-match-actions #ciSavePair,
html body #page-colors .ci-match-actions #ciCopyPair{
  width:100% !important;
}

html body #page-colors .ci-create-row{
  display:block !important;
  width:100% !important;
}
html body #page-colors .ci-create-row .ci-primary-btn{
  width:100% !important;
  height:32px !important;
}
html body #page-colors .ci-palette-output[hidden]{
  display:none !important;
}
html body #page-colors .ci-palette-output{
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
}
html body #page-colors .ci-role-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:7px !important;
}
html body #page-colors .ci-role-editor{
  display:grid !important;
  gap:6px !important;
  min-width:0 !important;
  padding:8px !important;
  border:1px solid var(--ci-edge) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.018) !important;
}
html body #page-colors .ci-role-editor-title{
  color:var(--ci-text) !important;
  font-size:8px !important;
  font-weight:850 !important;
}
html body #page-colors .ci-role-editor-control{
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) !important;
  gap:6px !important;
  align-items:center !important;
}
html body #page-colors .ci-role-picker{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
  cursor:pointer !important;
}
html body #page-colors .ci-role-picker::-webkit-color-swatch-wrapper{padding:0 !important;}
html body #page-colors .ci-role-picker::-webkit-color-swatch{
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:8px !important;
}
html body #page-colors .ci-role-editor input[type="text"].user-color-input,
html body #page-colors .ci-role-hex{
  width:100% !important;
  height:32px !important;
  min-height:32px !important;
  margin:0 !important;
  padding:0 9px !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.045) !important;
  background:var(--sv-panel-2) !important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.035)) !important;
  box-shadow:var(--sv-inset) !important;
  color:var(--sv-text) !important;
  font:750 8px/1.2 "IBM Plex Mono",monospace !important;
  outline:none !important;
}
html body #page-colors .ci-palette-actions{
  display:grid !important;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr) !important;
  gap:6px !important;
}
html body #page-colors .ci-palette-actions button{
  width:100% !important;
  min-width:0 !important;
}
@media (max-width:360px){
  html body #page-colors .ci-match-card .ci-color-control{grid-template-columns:40px minmax(0,1fr) !important;gap:6px !important;}
  html body #page-colors .ci-match-card .ci-color-control input[type="color"],
  html body #page-colors .ci-match-card .ci-large-color-picker{width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important;}
  html body #page-colors .ci-match-card .ci-icon-btn{height:40px !important;}
  html body #page-colors .ci-role-grid{grid-template-columns:1fr !important;}
  html body #page-colors .ci-palette-actions{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr) !important;}
}

/* Palette 2.0 — one clear style choice, source-driven output */
html body #page-colors .ci-style-picker{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
html body #page-colors .ci-control-label{
  color:var(--ci-text) !important;
  font-size:8px !important;
  font-weight:850 !important;
  letter-spacing:.025em !important;
}
html body #page-colors .ci-style-tabs{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:5px !important;
}
html body #page-colors .ci-style-btn{
  appearance:none !important;
  min-width:0 !important;
  height:31px !important;
  min-height:31px !important;
  padding:0 5px !important;
  border:1px solid var(--ci-edge) !important;
  border-radius:9px !important;
  background:var(--ci-control) !important;
  color:var(--ci-muted) !important;
  box-shadow:none !important;
  font:800 7px/1 Inter,sans-serif !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease !important;
}
html body #page-colors .ci-style-btn:hover{
  color:var(--ci-text) !important;
  border-color:rgba(255,255,255,.17) !important;
}
html body #page-colors .ci-style-btn.is-active{
  color:var(--ci-text) !important;
  border-color:var(--ci-accent) !important;
  background:var(--ci-control) !important;
}
html body #page-colors .ci-style-description{
  min-height:24px !important;
  color:var(--ci-muted) !important;
  font-size:8px !important;
  line-height:1.45 !important;
}
html body #page-colors .ci-palette-preview span{
  color:var(--palette-text,#f5f7fa) !important;
  opacity:.66 !important;
}
html body #page-colors .ci-palette-preview b{
  color:var(--palette-primary-ink,#101114) !important;
}
html body #page-colors .ci-palette-preview b:last-child{
  color:var(--palette-secondary-ink,#101114) !important;
}
html body #page-colors .ci-metrics .is-pass{
  color:var(--ci-success) !important;
}
html body #page-colors .ci-metrics .is-fail{
  color:var(--ci-danger) !important;
}
@media (max-width:390px){
  html body #page-colors .ci-style-tabs{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}


/* v1.2.2 — the same soft stagger used by the rest of Qwix when switching
   Library / Match / Palette. The target blocks are prepared before they
   become visible, which prevents a one-frame flash in older CEP Chromium. */
html.qwix-motion-enabled body #page-colors .qwix-ci-mode-reveal-prepared{
  opacity:.12 !important;
  transform:translate3d(0,4px,0) !important;
  transition:none !important;
}
html.qwix-motion-enabled body #page-colors .ci-mode-panel.is-active .qwix-local-reveal-item{
  animation:qwix-local-reveal-soft 300ms cubic-bezier(.22,.76,.2,1) both !important;
  animation-delay:calc(var(--qwix-local-order,0) * 18ms) !important;
  will-change:transform,opacity !important;
}


/* v1.2.3 — cleaner Library add row, aligned actions and theme-safe active navigation */

/* Library: the field, swatch and Save button stand directly on the page. */
html body #v120App #v120Content #page-colors #ci-mode-library .saved-add-panel,
html body #v120App #v120Content #page-colors #ci-mode-library .saved-add-row,
html body #page-colors #ci-mode-library .saved-add-panel[data-aptk-paint="1"],
html body #page-colors #ci-mode-library .saved-add-row[data-aptk-paint="1"]{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Match and Palette use one identical action layout and height. */
html body #page-colors .ci-match-actions,
html body #page-colors .ci-palette-actions{
  display:grid !important;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) !important;
  gap:6px !important;
  width:100% !important;
}
html body #page-colors .ci-match-actions button,
html body #page-colors .ci-palette-actions button{
  width:100% !important;
  min-width:0 !important;
  height:29px !important;
  min-height:29px !important;
  padding:0 10px !important;
}

/* Small copy icon before the label. */
html body #page-colors .ci-copy-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
}
html body #page-colors .ci-copy-btn .ci-copy-icon{
  width:11px !important;
  height:11px !important;
  flex:0 0 11px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.55 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* Accent-filled page buttons need opposite text contrast in dark and light themes. */
html:not([data-qwix-tone="light"]) body #v120Nav .v120-nav-btn.active,
html:not([data-qwix-tone="light"]) body #v120App #v120Nav .v120-nav-btn.active,
html:not([data-qwix-tone="light"]) body #tabbar .tab-btn.active,
html:not([data-qwix-tone="light"]) body #page-colors .saved-subtab.active,
html:not([data-qwix-tone="light"]) body #page-colors .saved-subtab.is-active{
  color:#111315 !important;
  text-shadow:none !important;
}
html:not([data-qwix-tone="light"]) body #v120Nav .v120-nav-btn.active .v120-nav-icon,
html:not([data-qwix-tone="light"]) body #v120Nav .v120-nav-btn.active .v120-nav-icon *,
html:not([data-qwix-tone="light"]) body #v120App #v120Nav .v120-nav-btn.active .v120-nav-icon,
html:not([data-qwix-tone="light"]) body #v120App #v120Nav .v120-nav-btn.active .v120-nav-icon *{
  color:#111315 !important;
  stroke:currentColor !important;
}
html:not([data-qwix-tone="light"]) body #v120Nav .v120-nav-btn.active .v120-nav-icon-logo,
html:not([data-qwix-tone="light"]) body #v120App #v120Nav .v120-nav-btn.active .v120-nav-icon-logo{
  background:#111315 !important;
}

html[data-qwix-tone="light"] body #v120Nav .v120-nav-btn.active,
html[data-qwix-tone="light"] body #v120App #v120Nav .v120-nav-btn.active,
html[data-qwix-tone="light"] body #tabbar .tab-btn.active,
html[data-qwix-tone="light"] body #page-colors .saved-subtab.active,
html[data-qwix-tone="light"] body #page-colors .saved-subtab.is-active{
  color:#ffffff !important;
  text-shadow:none !important;
}
html[data-qwix-tone="light"] body #v120Nav .v120-nav-btn.active .v120-nav-icon,
html[data-qwix-tone="light"] body #v120Nav .v120-nav-btn.active .v120-nav-icon *,
html[data-qwix-tone="light"] body #v120App #v120Nav .v120-nav-btn.active .v120-nav-icon,
html[data-qwix-tone="light"] body #v120App #v120Nav .v120-nav-btn.active .v120-nav-icon *{
  color:#ffffff !important;
  stroke:currentColor !important;
}
html[data-qwix-tone="light"] body #v120Nav .v120-nav-btn.active .v120-nav-icon-logo,
html[data-qwix-tone="light"] body #v120App #v120Nav .v120-nav-btn.active .v120-nav-icon-logo{
  background:#ffffff !important;
}


/* Higher-specificity Saved page labels: core theme rules use several IDs. */
html:not([data-qwix-tone="light"]) body #v120App #v120Content #page-colors #savedSubtabs.saved-subtabs .saved-subtab.active,
html:not([data-qwix-tone="light"]) body #v120App #v120Content #page-colors #savedSubtabs.saved-subtabs .saved-subtab.is-active{
  color:#111315 !important;
  text-shadow:none !important;
}
html[data-qwix-tone="light"] body #v120App #v120Content #page-colors #savedSubtabs.saved-subtabs .saved-subtab.active,
html[data-qwix-tone="light"] body #v120App #v120Content #page-colors #savedSubtabs.saved-subtabs .saved-subtab.is-active{
  color:#ffffff !important;
  text-shadow:none !important;
}

/* Color Intelligence 2.1 — source-preserving palette roles */
html body #page-colors .ci-role-editor-title{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
}
html body #page-colors .ci-source-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:15px!important;
  padding:1px 5px!important;
  border-radius:999px!important;
  border:1px solid var(--aptk-edge)!important;
  background:var(--aptk-secondary)!important;
  color:var(--aptk-muted-strong)!important;
  font-size:7px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}


/* Color Intelligence 2.4 — Colors From drawer uses the exact Split drawer motion.
   The collapsed radius is half the 10px handle height, so the corners
   continuously transform into the open 11px panel instead of snapping. */
html body #page-colors #ci-mode-palette .ci-source-drawer{
  position:relative !important;
  z-index:6 !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-height:10px !important;
  min-height:10px !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:5px !important;
  background:rgba(255,255,255,.035) !important;
  background-image:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
  transition:
    max-height .50s cubic-bezier(.2,.78,.22,1),
    padding .50s cubic-bezier(.2,.78,.22,1),
    border-radius .50s cubic-bezier(.2,.78,.22,1),
    background .36s ease,
    border-color .36s ease,
    box-shadow .36s ease !important;
  transition-delay:0s !important;
  will-change:max-height,padding,border-radius !important;
}
html body #page-colors #ci-mode-palette .ci-source-drawer::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  z-index:3 !important;
  width:34px !important;
  height:4px !important;
  border-radius:999px !important;
  transform:translate(-50%,-50%) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.12)) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18) !important;
  opacity:.95 !important;
  pointer-events:none !important;
  transition:opacity .28s ease,transform .52s cubic-bezier(.2,.78,.22,1) !important;
}
html body #page-colors #ci-mode-palette .ci-source-drawer > *{
  opacity:0 !important;
  transform:translateY(-7px) !important;
  pointer-events:none !important;
  visibility:visible !important;
  transition:
    opacity .30s ease .10s,
    transform .52s cubic-bezier(.2,.78,.22,1) !important;
}
html body #page-colors #ci-mode-palette .ci-source-drawer:hover,
html body #page-colors #ci-mode-palette .ci-source-drawer.is-open{
  max-height:430px !important;
  min-height:10px !important;
  padding:6px !important;
  overflow:hidden !important;
  border-radius:11px !important;
  border-color:var(--qwix-border-primary,var(--ci-edge,rgba(255,255,255,.08))) !important;
  background:var(--aptk-block,var(--aptk-secondary,#1f2024)) !important;
  background-image:none !important;
  box-shadow:var(--aptk-hard-shadow,0 4px 12px rgba(0,0,0,.22)) !important;
}
html body #page-colors #ci-mode-palette .ci-source-drawer:hover::before,
html body #page-colors #ci-mode-palette .ci-source-drawer.is-open::before{
  opacity:0 !important;
  transform:translate(-50%,-95%) !important;
}
html body #page-colors #ci-mode-palette .ci-source-drawer:hover > *,
html body #page-colors #ci-mode-palette .ci-source-drawer.is-open > *{
  opacity:1 !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}
html[data-qwix-tone="light"] body #page-colors #ci-mode-palette .ci-source-drawer,
html[data-aptk-mode="suede"] body #page-colors #ci-mode-palette .ci-source-drawer{
  border-color:rgba(76,58,37,.10) !important;
  background:rgba(76,58,37,.035) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32) !important;
}
html[data-qwix-tone="light"] body #page-colors #ci-mode-palette .ci-source-drawer::before,
html[data-aptk-mode="suede"] body #page-colors #ci-mode-palette .ci-source-drawer::before{
  background:linear-gradient(180deg,rgba(76,58,37,.28),rgba(76,58,37,.12)) !important;
  box-shadow:0 1px 3px rgba(74,51,24,.12) !important;
}
html[data-qwix-tone="light"] body #page-colors #ci-mode-palette .ci-source-drawer:hover,
html[data-qwix-tone="light"] body #page-colors #ci-mode-palette .ci-source-drawer.is-open,
html[data-aptk-mode="suede"] body #page-colors #ci-mode-palette .ci-source-drawer:hover,
html[data-aptk-mode="suede"] body #page-colors #ci-mode-palette .ci-source-drawer.is-open{
  border-color:rgba(76,58,37,.13) !important;
  background:var(--aptk-block,#eee3d2) !important;
  box-shadow:var(--aptk-hard-shadow,0 4px 12px rgba(74,51,24,.16)) !important;
}
html body #page-colors #ci-mode-palette .ci-source-drawer-label{
  display:block !important;
  margin:0 0 7px 2px !important;
  color:var(--ci-muted) !important;
  font-size:8px !important;
  font-weight:850 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}
html body #page-colors #ci-mode-palette .ci-source-drawer-body{
  display:grid !important;
  gap:8px !important;
}
html body #page-colors #ci-mode-palette .ci-source-tabs{margin:0 !important;}
html body #page-colors #ci-mode-palette .ci-create-row{margin-top:0 !important;}
html body #page-colors .ci-role-editor-actions{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:5px !important;
}
html body #page-colors .ci-role-editor-actions button{
  appearance:none !important;
  height:24px !important;
  min-height:24px !important;
  padding:0 7px !important;
  border:1px solid var(--ci-edge) !important;
  border-radius:8px !important;
  background:var(--ci-control) !important;
  color:var(--ci-text) !important;
  box-shadow:none !important;
  font:800 7px/1 Inter,sans-serif !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}
html body #page-colors .ci-role-editor-actions .ci-role-change:hover{
  border-color:var(--ci-accent) !important;
  color:var(--ci-text) !important;
}
html body #page-colors .ci-role-editor-actions button:disabled{
  opacity:.32 !important;
  cursor:default !important;
}
html body #page-colors .ci-match-actions{
  grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) !important;
}
@media (max-width:360px){
  html body #page-colors .ci-match-actions{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}


/* Color Intelligence 2.5 — intelligent role cards and Apple-like drag-to-swap */
html body #page-colors .ci-palette-output{
  position:relative !important;
  isolation:isolate !important;
}
html body #page-colors .ci-role-grid{
  position:relative !important;
  z-index:4 !important;
}
html body #page-colors .ci-role-editor{
  position:relative !important;
  transform-origin:center !important;
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.82,.24,1), border-color .18s ease, box-shadow .22s ease, filter .18s ease !important;
  will-change:transform,opacity !important;
}
html body #page-colors .ci-role-swatch-shell{
  position:relative !important;
  display:block !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
}
html body #page-colors .ci-role-swatch{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:block !important;
  width:36px !important;
  height:36px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:8px !important;
  background:var(--ci-role-color) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05) !important;
  cursor:grab !important;
  outline:none !important;
  transition:transform .18s cubic-bezier(.2,.82,.24,1), box-shadow .18s ease, border-color .18s ease !important;
}
html body #page-colors .ci-role-swatch:hover{
  transform:scale(1.045) !important;
  border-color:color-mix(in srgb,var(--ci-accent) 55%,rgba(255,255,255,.12)) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.05) !important;
}
html body #page-colors .ci-role-swatch:active{cursor:grabbing !important;transform:scale(.98) !important;}
html body #page-colors .ci-role-picker{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:1px !important;
  height:1px !important;
  min-width:1px !important;
  min-height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}
html body #page-colors .ci-palette-output.is-role-dragging::after{
  content:"" !important;
  position:absolute !important;
  inset:-3px !important;
  z-index:2 !important;
  border-radius:14px !important;
  background:rgba(5,8,9,.66) !important;
  backdrop-filter:blur(1.5px) !important;
  pointer-events:none !important;
  animation:ciRoleDimIn .18s ease both !important;
}
html body #page-colors .ci-palette-output.is-role-dragging > :not(.ci-role-grid){
  opacity:.18 !important;
  filter:saturate(.45) brightness(.55) !important;
  transition:opacity .18s ease,filter .18s ease !important;
}
html body #page-colors .ci-palette-output.is-role-dragging .ci-role-editor{
  z-index:5 !important;
  opacity:.20 !important;
  filter:saturate(.55) brightness(.70) !important;
  transform:scale(.965) !important;
}
html body #page-colors .ci-palette-output.is-role-dragging .ci-role-editor.is-drop-target{
  opacity:1 !important;
  filter:none !important;
  transform:scale(.995) !important;
  border-color:color-mix(in srgb,var(--ci-accent) 58%,var(--ci-edge)) !important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ci-accent) 18%,transparent),0 8px 18px rgba(0,0,0,.24) !important;
  animation:ciRoleJiggle .18s ease-in-out var(--ci-wiggle-delay,0s) infinite alternate !important;
}
html body #page-colors .ci-palette-output.is-role-dragging .ci-role-editor.is-drag-source{
  opacity:.28 !important;
  filter:saturate(.3) brightness(.62) !important;
  animation:none !important;
  transform:scale(.94) !important;
  border-style:dashed !important;
}
html body #page-colors .ci-palette-output.is-role-dragging .ci-role-editor.is-drop-hover{
  opacity:1 !important;
  filter:none !important;
  transform:scale(1.035) translateY(-1px) !important;
  border-color:var(--ci-accent) !important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ci-accent) 30%,transparent),0 11px 24px rgba(0,0,0,.34) !important;
  animation:none !important;
}
html body #page-colors .ci-palette-output.is-role-dragging .ci-role-editor.is-drop-hover::after{
  content:"Swap" !important;
  position:absolute !important;
  right:7px !important;
  top:6px !important;
  z-index:3 !important;
  padding:3px 6px !important;
  border-radius:999px !important;
  background:var(--ci-accent) !important;
  color:var(--ci-accent-ink,#111315) !important;
  font:850 6px/1 Inter,sans-serif !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  animation:ciRoleSwapBadge .18s cubic-bezier(.2,.82,.24,1) both !important;
}
html body #page-colors .ci-role-editor.is-role-swap-complete{
  animation:ciRoleSwapComplete .48s cubic-bezier(.18,.89,.32,1.28) both !important;
  border-color:var(--ci-accent) !important;
}
.ci-role-drag-ghost{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  z-index:2147483000 !important;
  display:grid !important;
  grid-template-columns:30px auto !important;
  grid-template-rows:auto auto !important;
  column-gap:8px !important;
  align-items:center !important;
  min-width:112px !important;
  padding:7px 10px 7px 7px !important;
  border:1px solid color-mix(in srgb,var(--ci-accent) 46%,rgba(255,255,255,.12)) !important;
  border-radius:12px !important;
  background:color-mix(in srgb,var(--ci-control) 92%,black 8%) !important;
  box-shadow:0 15px 35px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.025) inset !important;
  pointer-events:none !important;
  opacity:1 !important;
  transform:translate3d(-200px,-200px,0) scale(.86) !important;
  transform-origin:center !important;
  transition:opacity .15s ease,transform .15s cubic-bezier(.2,.82,.24,1) !important;
  will-change:transform,opacity !important;
}
.ci-role-drag-ghost i{
  grid-row:1/3 !important;
  width:30px !important;
  height:30px !important;
  border-radius:8px !important;
  background:var(--ci-role-color) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
.ci-role-drag-ghost strong{color:var(--ci-text) !important;font:850 8px/1.15 Inter,sans-serif !important;white-space:nowrap !important;}
.ci-role-drag-ghost span{color:var(--ci-muted) !important;font:700 7px/1.15 "IBM Plex Mono",monospace !important;white-space:nowrap !important;}
.ci-role-drag-ghost.is-dropping{transition:opacity .15s ease,transform .15s cubic-bezier(.3,.9,.38,1) !important;}
html.ci-role-drag-active,html.ci-role-drag-active *{cursor:grabbing !important;user-select:none !important;-webkit-user-select:none !important;}
@keyframes ciRoleDimIn{from{opacity:0}to{opacity:1}}
@keyframes ciRoleJiggle{0%{transform:scale(.995) rotate(-.45deg) translateX(-.35px)}100%{transform:scale(.995) rotate(.45deg) translateX(.35px)}}
@keyframes ciRoleSwapBadge{from{opacity:0;transform:scale(.7) translateY(-2px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes ciRoleSwapComplete{0%{transform:scale(.94)}42%{transform:scale(1.045)}72%{transform:scale(.99)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  html body #page-colors .ci-palette-output.is-role-dragging .ci-role-editor.is-drop-target{animation:none !important;}
  html body #page-colors .ci-role-editor.is-role-swap-complete{animation:none !important;}
}

/* ===== Saved / Colors internal motion parity — 2026-07-17 =====
   Internal Library / Match / Palette switches use the exact same keyframe,
   duration, easing and stagger as a main-page switch. */
@keyframes qwix-ci-mode-reveal{
  0%{opacity:0;transform:translate3d(0,14px,0) scale(.994);}
  72%{opacity:1;transform:translate3d(0,-.6px,0) scale(1.0005);}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);}
}
html.qwix-motion-enabled body #page-colors .qwix-ci-mode-reveal-prepared{
  opacity:0 !important;
  transform:translate3d(0,14px,0) scale(.994) !important;
  transition:none !important;
  animation:none !important;
}
html.qwix-motion-enabled body #page-colors .qwix-ci-mode-reveal-item{
  animation:qwix-ci-mode-reveal var(--qwix-motion-page,330ms) var(--qwix-motion-out,cubic-bezier(.16,1,.3,1)) both !important;
  animation-delay:calc(var(--qwix-local-order,0) * var(--qwix-motion-stagger,24ms)) !important;
  will-change:transform,opacity !important;
}
html body #page-colors #saved-subpage-colors,
html body #page-colors #ciWorkspace.ci-workspace,
html body #page-colors #ciWorkspace.ci-workspace > .ci-mode-panel.is-active,
html body #page-colors .ci-palette-output{
  gap:8px !important;
}
html body #page-colors #ciWorkspace.ci-workspace > .ci-mode-panel.is-active > *,
html body #page-colors .ci-palette-output > *{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
@media (prefers-reduced-motion:reduce){
  html.qwix-motion-enabled body #page-colors .qwix-ci-mode-reveal-prepared{
    opacity:1 !important;
    transform:none !important;
  }
  html.qwix-motion-enabled body #page-colors .qwix-ci-mode-reveal-item{
    animation:none !important;
  }
}

/* 2026-07-18: Palette role editor aligned with Settings theme editor: swatch on the left, copy on the right. */
html body #page-colors .ci-role-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}
html body #page-colors .ci-role-editor{
  display:grid !important;
  grid-template-columns:72px minmax(0,1fr) !important;
  gap:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.018) !important;
}
html body #page-colors .ci-role-swatch-shell{
  grid-column:1 !important;
  grid-row:1 !important;
  width:auto !important;
  height:auto !important;
  min-width:72px !important;
  min-height:100% !important;
  border-right:1px solid rgba(255,255,255,.07) !important;
  background:rgba(255,255,255,.02) !important;
}
html body #page-colors .ci-role-swatch{
  width:100% !important;
  height:100% !important;
  min-width:72px !important;
  min-height:100% !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
html body #page-colors .ci-role-swatch:hover{
  transform:none !important;
  border-color:transparent !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
html body #page-colors .ci-role-editor-main{
  grid-column:2 !important;
  grid-row:1 !important;
  display:grid !important;
  gap:8px !important;
  min-width:0 !important;
  padding:10px 10px 10px 11px !important;
}
html body #page-colors .ci-role-editor-copy{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  min-width:0 !important;
}
html body #page-colors .ci-role-editor-title{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
  color:var(--ci-text) !important;
  font-size:8.6px !important;
  font-weight:850 !important;
}
html body #page-colors .ci-role-editor-hint{
  color:var(--ci-muted) !important;
  font:620 8px/1.3 Inter,system-ui,sans-serif !important;
}
html body #page-colors .ci-role-editor-body{
  display:grid !important;
  gap:7px !important;
}
html body #page-colors .ci-role-editor-control{
  display:block !important;
}
html body #page-colors .ci-role-editor input[type="text"].user-color-input,
html body #page-colors .ci-role-hex{
  width:100% !important;
  height:32px !important;
}
html body #page-colors .ci-role-editor-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:6px !important;
}
@media (max-width: 430px){
  html body #page-colors .ci-role-grid{grid-template-columns:1fr !important;}
}

/* 2026-07-18 v2: Palette uses the same continuous expanding color rail as Settings. */
html body #page-colors .ci-role-grid{
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  gap:0!important;
  border:1px solid var(--ci-edge)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.012)!important;
}
html body #page-colors .ci-role-editor{
  position:relative!important;
  display:block!important;
  min-height:92px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:hidden!important;
}
html body #page-colors .ci-role-editor + .ci-role-editor{
  border-top:0!important;
}
html body #page-colors .ci-role-swatch-shell{
  position:absolute!important;
  z-index:5!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:28%!important;
  min-width:78px!important;
  height:auto!important;
  min-height:0!important;
  display:block!important;
  border:0!important;
  background:transparent!important;
  overflow:hidden!important;
  transition:width .4s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease!important;
}
html body #page-colors .ci-role-editor:first-child .ci-role-swatch-shell{
  border-top-left-radius:13px!important;
}
html body #page-colors .ci-role-editor:last-child .ci-role-swatch-shell{
  border-bottom-left-radius:13px!important;
}
html body #page-colors .ci-role-swatch-shell:hover,
html body #page-colors .ci-role-swatch-shell:focus-within{
  width:64%!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),8px 0 18px rgba(0,0,0,.16)!important;
}
html body #page-colors .ci-role-swatch{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:0!important;
  background:var(--ci-role-color)!important;
  box-shadow:none!important;
  transform:none!important;
  overflow:hidden!important;
}
html body #page-colors .ci-role-swatch:hover,
html body #page-colors .ci-role-swatch:active{
  transform:none!important;
  box-shadow:none!important;
}
html body #page-colors .ci-role-swatch-hex{
  position:relative!important;
  z-index:2!important;
  color:#fff!important;
  opacity:0!important;
  transform:translateX(-7px)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.34)!important;
  font:800 9px/1 "IBM Plex Mono",Consolas,monospace!important;
  letter-spacing:.04em!important;
  pointer-events:none!important;
  transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1)!important;
}
html body #page-colors .ci-role-swatch-shell:hover .ci-role-swatch-hex,
html body #page-colors .ci-role-swatch-shell:focus-within .ci-role-swatch-hex{
  opacity:1!important;
  transform:none!important;
}
html body #page-colors .ci-role-editor-main{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  min-height:92px!important;
  box-sizing:border-box!important;
  display:grid!important;
  gap:8px!important;
  padding:10px 10px 10px 31%!important;
  text-align:right!important;
}
html body #page-colors .ci-role-editor-copy{
  align-items:flex-end!important;
  text-align:right!important;
}
html body #page-colors .ci-role-editor-title{
  justify-content:flex-end!important;
  width:100%!important;
  text-align:right!important;
}
html body #page-colors .ci-role-editor-hint{
  width:100%!important;
  text-align:right!important;
}
html body #page-colors .ci-role-editor-body{
  margin-left:auto!important;
  width:min(100%,240px)!important;
}
@media (max-width:430px){
  html body #page-colors .ci-role-grid{display:block!important;}
  html body #page-colors .ci-role-swatch-shell{width:31%!important;min-width:72px!important;}
  html body #page-colors .ci-role-swatch-shell:hover,
  html body #page-colors .ci-role-swatch-shell:focus-within{width:70%!important;}
  html body #page-colors .ci-role-editor-main{padding-left:34%!important;}
}
html body #page-colors .ci-role-swatch.is-light .ci-role-swatch-hex{
  color:#171717!important;
  text-shadow:none!important;
}

/* Primary actions inherit the theme readability token. */
html body #page-colors .ci-primary-btn,html body #page-colors .ci-primary-btn:hover,html body #page-colors .ci-primary-btn:active{color:var(--qwix-accent-ink,#fff8ed)!important;-webkit-text-fill-color:var(--qwix-accent-ink,#fff8ed)!important;}
html body #page-colors .ci-primary-btn *{color:inherit!important;-webkit-text-fill-color:inherit!important;fill:currentColor!important;}

/* 2026-07-18: stronger mode/section switching with a prepared first frame
   identical to the first animation frame. */
@keyframes qwix-ci-mode-reveal{
  0%{opacity:0;transform:translate3d(0,28px,0) scale(.988);}
  72%{opacity:1;transform:translate3d(0,-2px,0) scale(1.001);}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);}
}
html.qwix-motion-enabled body #page-colors .qwix-ci-mode-reveal-prepared{
  opacity:0 !important;
  transform:translate3d(0,28px,0) scale(.988) !important;
}
html.qwix-motion-enabled body #page-colors .qwix-ci-mode-reveal-item{
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}