.theme-preview-banner{background:#fff3cc;border-bottom:1px solid #eddc99;color:#655323;padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:26px;font-size:12px;line-height:1.7}.theme-preview-banner>div{display:flex;gap:18px;white-space:nowrap}.theme-preview-banner a{text-decoration:underline}
.appearance-current{display:flex;align-items:center;gap:10px;border:1px solid #dbe6ef;background:#ecf3f9;padding:16px 19px;font-size:12px;border-radius:10px;color:#42688c;margin-bottom:22px}.appearance-current>span:last-child{margin-left:auto;color:#8097ab;font-size:11px}
.appearance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.appearance-card{border:2px solid #e0e7ee;background:white;border-radius:13px;overflow:hidden;transition:border-color .15s;min-width:0}.appearance-card.selected{border-color:#346d9e}.appearance-card-body{padding:19px}.appearance-title{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:7px}.appearance-title h2{font-size:17px;margin:0}.appearance-title .tag{font-size:9px}.appearance-card-body>small{color:#8d9bab;font-size:10px}.appearance-card-body>p{font-size:12px;color:#788da1;line-height:1.85;margin:14px 0 20px;min-height:44px}.appearance-actions{display:flex;gap:9px;align-items:center;justify-content:space-between}.appearance-actions .btn{font-size:11px;padding:8px 12px}
.appearance-save{position:sticky;bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#ffffffed;backdrop-filter:blur(8px);border:1px solid #dce6ef;box-shadow:0 7px 24px #254f7514;padding:15px 21px;border-radius:11px;margin-top:23px;z-index:5}.appearance-save p{font-size:12px;color:#7890a3}.appearance-save .btn{white-space:nowrap}
/* These are captures of the actual layouts, not palette-only diagrams. */
.theme-thumb{height:215px;background:#eef2f6;border-bottom:1px solid #e3e9ef;padding:0;overflow:hidden}.theme-thumb>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.appearance-card-body>p{min-height:64px}.theme-preview-banner{position:relative;z-index:35}
@media(max-width:1150px){.appearance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.appearance-grid{gap:13px}.appearance-card-body{padding:14px}.appearance-title{align-items:flex-start;flex-wrap:wrap}.appearance-title h2{font-size:15px}.appearance-card-body>p{font-size:11px;min-height:84px}.appearance-actions{flex-wrap:wrap;gap:8px}.appearance-actions .btn{font-size:10px;padding:8px}.theme-thumb{height:155px}.appearance-current{flex-wrap:wrap;font-size:11px;padding:13px;gap:7px}.appearance-current>span:last-child{margin-left:0;flex-basis:100%;font-size:10px}.appearance-save{bottom:9px;padding:13px;gap:10px}.appearance-save p{font-size:10px;line-height:1.7}.appearance-save .btn{font-size:11px;padding:10px 12px}.theme-preview-banner{font-size:10px;gap:8px;align-items:flex-start;padding:8px 15px;flex-direction:column}.theme-preview-banner>div{gap:20px}}
@media(max-width:370px){.appearance-grid{grid-template-columns:1fr}.theme-thumb{height:205px}.appearance-card-body>p{min-height:0}}
@media(prefers-reduced-motion:reduce){.appearance-card{transition:none}}