.design-skill-popover {
  position: fixed;
  z-index: 160;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: min(420px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 18px 42px rgba(15,23,42,0.14);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.design-skill-popover.ratio-popover {
  width: min(760px, calc(100vw - 28px));
  padding: 16px;
  gap: 14px;
}

.design-skill-popover.quality-popover {
  display: flex;
  flex-direction: column;
  width: min(260px, calc(100vw - 28px));
  padding: 12px;
  gap: 8px;
  border-radius: 16px;
}

.design-skill-popover .quality-popover-title {
  color: #98a2b3;
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0 6px;
}

.design-skill-popover .quality-popover-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.design-skill-popover .quality-popover-option {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #475467;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.design-skill-popover .quality-popover-option:hover,
.design-skill-popover .quality-popover-option.selected {
  background: #f3f4f8;
  border-color: rgba(15,23,42,0.05);
  color: #111827;
}

.design-skill-popover .quality-popover-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
}

.design-skill-popover .quality-popover-check {
  width: 18px;
  height: 18px;
  color: currentColor;
  opacity: 0;
}

.design-skill-popover .quality-popover-check svg {
  width: 100%;
  height: 100%;
  display: block;
}

.design-skill-popover .quality-popover-option.selected .quality-popover-check {
  opacity: 1;
}


.design-skill-picker { display:inline-flex; align-items:center; position:relative; flex:0 0 auto; min-height:34px; padding:0 12px; border:1px solid var(--apple-glass-line, rgba(125,125,150,.12)); border-radius:12px; background:var(--apple-glass-fill, #fff); color:var(--text-secondary, #465268); box-shadow:var(--apple-glass-shadow, 0 3px 10px #1720330a); font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.design-skill-picker select { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.design-skill-picker:focus-within { outline:2px solid #8b7ce8; outline-offset:2px; }
.design-skill-picker[hidden] { display:none; }
#designSkillAdmin { margin-top:28px; padding-top:24px; border-top:1px solid var(--border-light); }
#designSkillAdmin select,#designSkillAdmin input,#designSkillAdmin textarea { width:100%; box-sizing:border-box; font:inherit; font-size:13px; padding:10px; margin:6px 0 16px; color:var(--text-primary); background:var(--bg-secondary); border:1px solid var(--border-light); border-radius:8px; }
#designSkillAdmin textarea { min-height:120px; resize:vertical; }
.design-skill-actions { display:flex; gap:10px; }

.design-skill-picker { max-width:210px; }
.design-skill-picker > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.mobile-compose-toolbar .design-skill-picker { max-width:126px; }

.design-skill-popover { box-sizing:border-box; overflow:hidden; }
.design-skill-popover .quality-popover-list { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.design-skill-popover .quality-popover-option { flex-shrink:0; }
.design-skill-popover button:focus-visible { outline:2px solid var(--accent, #7054d8); outline-offset:-2px; }
[data-theme="dark"] .design-skill-popover { background:#202536; border-color:rgba(255,255,255,.12); color:#edf0f8; }
[data-theme="dark"] .design-skill-popover .quality-popover-option { color:#c8cede; }
[data-theme="dark"] .design-skill-popover .quality-popover-option:hover,
[data-theme="dark"] .design-skill-popover .quality-popover-option.selected { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.1); }

/* 单列选项覆盖通用弹层的横向或网格布局。 */
.creative-option-popover.quality-popover.design-skill-popover {
  display:flex;
  flex-flow:column nowrap;
  grid-template-columns:none;
  align-items:stretch;
}
.design-skill-popover > .quality-popover-list { width:100%; flex:1 1 auto; }