.ap-settings { color:var(--ui-ink); min-width:0; max-width:1180px; margin-inline:auto; }
.ap-settings *, .ap-settings *::before, .ap-settings *::after { box-sizing:border-box; }
.ap-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:26px; }
.ap-heading h2 { margin:0 0 8px; font-size:25px; line-height:1.35; letter-spacing:-.6px; }
.ap-heading p { margin:0; color:var(--ui-muted); font-size:14px; line-height:1.7; max-width:52em; }
.ap-current { flex:none; display:flex; align-items:center; gap:8px; padding:9px 13px; color:var(--ui-primary); background:var(--ui-soft); border:1px solid var(--vline); border-radius:12px; font-size:12px; font-weight:650; white-space:nowrap; }
.ap-current::before { content:''; width:7px; height:7px; background:currentColor; border-radius:50%; }
.ap-family + .ap-family { margin-top:30px; padding-top:24px; border-top:1px solid var(--ui-line); }
.ap-family-heading { margin-bottom:14px; }
.ap-family-heading h3 { margin:0 0 5px; color:var(--ui-ink); font-size:17px; line-height:1.4; letter-spacing:-.2px; }
.ap-family-heading p { margin:0; color:var(--ui-muted); font-size:13px; line-height:1.65; }
.ap-grid { display:grid; gap:16px; }
.ap-grid--style { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ap-grid--palette { grid-template-columns:repeat(4,minmax(0,1fr)); }
/* Each swatch owns its surface and palette so a preview cannot repaint the
   choices. Only the selected ring indicates the current preview. */
.ap-settings .ap-card { display:flex; flex-direction:column; min-width:0; margin:0; padding:0; overflow:hidden; border:2px solid var(--ap-line); border-radius:16px; background:#fff; color:var(--ap-ink); cursor:pointer; text-align:left; font:inherit; box-shadow:none; transform:none; transition:border-color .12s; }
.ap-settings .ap-card:hover:not(:disabled) { border-color:var(--ap-primary); box-shadow:none; transform:none; }
.ap-settings .ap-card[aria-checked="true"] { border-color:var(--ap-primary); box-shadow:0 0 0 3px var(--ap-soft); }
.ap-settings .ap-card:disabled { cursor:wait; }
.ap-settings .ap-card:focus-visible { outline:3px solid var(--ap-primary); outline-offset:4px; }
.ap-art { display:flex; width:100%; height:174px; padding:15px 16px 0; background:var(--ap-bg); border-bottom:1px solid var(--ap-line); overflow:hidden; }
.ap-art i, .ap-art b, .ap-art em { display:block; font-style:normal; }
.ap-grid--palette .ap-art { height:142px; padding:13px 12px 0; }
.ap-mini { display:block; width:100%; border:1px solid var(--ap-line); border-radius:8px 8px 0 0; overflow:hidden; background:#fff; box-shadow:0 4px 12px #1420380b; }
.ap-mini-header { display:flex; align-items:center; gap:8px; height:24px; padding:5px 9px; border-bottom:1px solid var(--ap-line); background:var(--ap-chrome); }
.ap-mini-mark { width:11px; height:11px; background:var(--ap-primary); border-radius:3px; margin-right:auto; }
.ap-mini-header i { width:18px; height:4px; border-radius:2px; background:var(--ap-line-strong); }
.ap-mini-header i:first-of-type { background:var(--ap-primary); }
.ap-mini-main { display:block; padding:10px 9px; }
.ap-mini-top { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-bottom:11px; }
.ap-mini-title { width:54%; height:7px; background:var(--ap-ink); border-radius:3px; }
.ap-mini-action { width:23px; height:14px; background:var(--ap-primary); border-radius:4px; }
.ap-mini-block { display:flex; justify-content:space-between; align-items:center; padding:8px 7px; margin-bottom:7px; border:1px solid var(--ap-line); border-radius:6px; background:#fff; }
.ap-mini-block:first-of-type { background:var(--ap-soft); border-color:var(--ap-line-strong); }
.ap-mini-block i { width:57%; height:4px; background:var(--ap-muted); border-radius:2px; }
.ap-mini-block b { width:16px; height:5px; background:var(--ap-primary); border-radius:3px; }
.ap-studio { display:grid; grid-template-columns:47px minmax(0,1fr); width:100%; border:1px solid var(--ap-line); border-radius:7px 7px 0 0; overflow:hidden; background:#fff; }
.ap-studio-nav { display:flex; flex-direction:column; gap:9px; padding:12px 9px; background:var(--ap-ink); }
.ap-studio-nav b { width:15px; height:15px; margin-bottom:9px; border-radius:4px; background:#fff; }
.ap-studio-nav i { width:100%; height:5px; border-radius:2px; background:#ffffff4d; }
.ap-studio-nav i:first-of-type { background:#fff; }
.ap-studio-nav em { width:16px; height:16px; margin-top:auto; border:1px solid #ffffff61; border-radius:50%; }
.ap-studio-main { padding:13px 11px; }
.ap-studio-stats { display:flex; gap:5px; margin-bottom:10px; }
.ap-studio-stats b { width:33.33%; height:29px; border:1px solid var(--ap-line); border-radius:3px; background:var(--ap-soft); }
.ap-studio-table { display:block; border:1px solid var(--ap-line); border-radius:3px; }
.ap-studio-table i { height:16px; border-bottom:1px solid var(--ap-line); background:linear-gradient(var(--ap-line-strong),var(--ap-line-strong)) 7px center/45% 3px no-repeat,linear-gradient(var(--ap-primary),var(--ap-primary)) calc(100% - 7px) center/12px 3px no-repeat; }
.ap-studio-table i:first-child { background-color:var(--ap-quiet); }
.ap-studio-table i:last-child { border-bottom:0; }
.ap-editorial { display:block; width:100%; padding:9px 10px 0; border-top:2px solid var(--ap-ink); background:var(--ap-chrome); }
.ap-editorial-kicker { display:block; width:31%; height:3px; margin-bottom:7px; background:var(--ap-primary); }
.ap-editorial-title { display:block; width:76%; height:17px; margin-bottom:9px; background:var(--ap-ink); }
.ap-editorial-nav { display:flex; align-items:center; gap:10px; height:17px; margin-bottom:9px; border-top:1px solid var(--ap-ink); border-bottom:1px solid var(--ap-line-strong); }
.ap-editorial-nav i { width:22%; height:3px; background:var(--ap-muted); }
.ap-editorial-nav i:first-child { background:var(--ap-primary); }
.ap-editorial-feature { display:flex; gap:9px; padding-bottom:9px; border-bottom:1px solid var(--ap-ink); }
.ap-editorial-feature > b { width:36%; height:33px; background:var(--ap-soft); border-left:3px solid var(--ap-primary); }
.ap-editorial-feature > span { flex:1; padding-top:2px; }
.ap-editorial-feature i { width:100%; height:4px; margin-bottom:6px; background:var(--ap-line-strong); }
.ap-editorial-feature i:first-child { width:78%; background:var(--ap-ink); }
.ap-editorial-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--ap-line-strong); }
.ap-editorial-row i { width:50%; height:4px; background:var(--ap-muted); }
.ap-editorial-row b { width:12%; height:4px; background:var(--ap-primary); }
.ap-card[data-theme="poster"] .ap-art { padding-top:11px; }
.ap-poster { display:block; width:100%; padding:7px 5px; }
.ap-poster-title { display:block; width:69%; height:16px; margin-bottom:9px; background:var(--ap-ink); }
.ap-poster-nav { display:flex; gap:5px; margin-bottom:11px; }
.ap-poster-nav i { width:26%; height:14px; border:1.5px solid var(--ap-ink); border-radius:10px; background:#fff; }
.ap-poster-nav i:first-child { background:var(--ap-primary); }
.ap-poster-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.ap-poster-cards > span { display:block; height:54px; padding:9px 7px; border:2px solid var(--ap-ink); border-radius:7px; background:#fff; box-shadow:3px 3px 0 var(--ap-ink); }
.ap-poster-cards > span:first-child { background:var(--ap-soft); }
.ap-poster-cards b { width:75%; height:9px; margin-bottom:9px; background:var(--ap-ink); }
.ap-poster-cards i { width:55%; height:4px; background:var(--ap-primary); }
.ap-poster-action { display:block; width:48%; height:20px; border:1.5px solid var(--ap-ink); border-radius:5px; background:var(--ap-primary); box-shadow:2px 2px 0 var(--ap-ink); }
.ap-card-info { display:block; padding:17px 16px 18px; width:100%; background:#fff; }
.ap-card-title { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; color:var(--ap-ink); font-size:16px; font-weight:700; }
.ap-radio { width:19px; height:19px; display:grid; place-items:center; flex:none; border:1.5px solid var(--ap-muted); border-radius:50%; color:transparent; font-size:11px; }
.ap-card[aria-checked="true"] .ap-radio { background:var(--ap-primary); color:#fff; border-color:var(--ap-primary); }
.ap-card-tag { display:block; color:var(--ap-primary); font-size:11px; font-weight:650; letter-spacing:.3px; margin-bottom:9px; }
.ap-card-description { display:block; color:var(--ap-muted); font-size:12px; line-height:1.75; }
.ap-footer { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:24px; padding:18px 20px; border:1px solid var(--ui-line); border-radius:16px; background:var(--ui-surface); }
.ap-feedback { flex:1 1 280px; min-width:0; color:var(--ui-muted); font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
.ap-feedback[data-kind="error"] { color:#a12b37; }
.ap-feedback[data-kind="success"] { color:var(--ui-primary); }
.ap-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ap-settings .ap-button { min-height:44px; padding:10px 16px; border:1px solid var(--ui-line); border-radius:10px; background:#fff; color:var(--ui-ink); font:inherit; font-size:13px; font-weight:650; cursor:pointer; white-space:nowrap; }
.ap-settings .ap-button.primary { color:#fff; background:var(--ui-primary); border-color:var(--ui-primary); }
.ap-settings .ap-button:hover:not(:disabled) { border-color:var(--ui-primary); }
.ap-settings .ap-button.primary:hover:not(:disabled) { background:var(--ui-primary-hover); }
.ap-settings .ap-button:disabled { opacity:.5; cursor:not-allowed; }
.ap-footnote { margin:13px 2px 0; color:var(--ui-muted); font-size:12px; line-height:1.7; }
@media(max-width:1050px) {
  .ap-grid--palette { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ap-grid--palette .ap-art { height:150px; }
  .ap-art { padding-inline:12px; }
}
@media(max-width:760px) {
  .ap-heading { flex-direction:column; gap:12px; margin-bottom:22px; }
  .ap-grid--style { grid-template-columns:1fr; }
  .ap-grid--style .ap-card { flex-direction:row; }
  .ap-grid--style .ap-art { flex:0 0 38%; width:38%; height:auto; min-height:165px; border-bottom:0; border-right:1px solid var(--ap-line); }
  .ap-grid--style .ap-card-info { flex:1; min-width:0; align-self:center; }
}
@media(max-width:640px) {
  .ap-heading h2 { font-size:23px; }
  .ap-heading p { font-size:13px; }
  .ap-family + .ap-family { margin-top:23px; padding-top:20px; }
  .ap-grid { gap:12px; }
  .ap-grid--style .ap-art { flex-basis:36%; width:36%; padding-inline:8px; }
  .ap-grid--palette .ap-art { height:124px; padding:11px 8px 0; }
  .ap-mini-header { padding-inline:6px; gap:4px; }
  .ap-mini-header i { width:12px; }
  .ap-mini-main { padding:9px 7px; }
  .ap-mini-top { margin-bottom:10px; }
  .ap-mini-block { padding:7px 5px; }
  .ap-studio { grid-template-columns:25px minmax(0,1fr); }
  .ap-studio-nav { padding-inline:5px; }
  .ap-studio-nav b { width:13px; height:13px; }
  .ap-studio-main { padding:12px 5px; }
  .ap-studio-stats { gap:3px; }
  .ap-studio-table i { background-size:37% 3px,7px 3px; background-position:4px center,calc(100% - 4px) center; }
  .ap-editorial { padding-inline:4px; }
  .ap-editorial-title { width:88%; height:15px; }
  .ap-editorial-feature { gap:5px; }
  .ap-editorial-nav { gap:6px; }
  .ap-poster { padding-inline:1px; }
  .ap-poster-cards { gap:7px; }
  .ap-poster-cards > span { padding-inline:4px; }
  .ap-poster-action { width:65%; }
  .ap-card-info { padding:14px 11px 15px; }
  .ap-card-title { font-size:14px; }
  .ap-card-tag { font-size:10px; line-height:1.6; }
  .ap-card-description { font-size:12px; }
  .ap-footer { margin-top:18px; padding:14px; gap:12px; }
  .ap-feedback { flex-basis:100%; }
  .ap-actions { width:100%; }
  .ap-actions .ap-button { flex:1; padding-inline:10px; }
}
@media(prefers-reduced-motion:reduce) { .ap-settings .ap-card { transition:none; } }