.skin-tabs {display:flex;gap:8px;margin-bottom:18px;}
.skin-tabs button {flex:1;min-height:44px;}
#panel .skin-tabs [aria-pressed="true"] {background:#334b80;color:white;}
.skin-role {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font-weight:700;}
.skin-role select {max-width:70%;min-height:44px;border:1px solid #a3b1c9;border-radius:10px;background:#fff;color:#263957;padding:8px;font:inherit;}
.skin-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.skin-card {position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;border:2px solid #c5d0e2;border-radius:16px;padding:12px 8px;background:#f3f6fc;color:#263957;cursor:pointer;font:inherit;}
.skin-card[aria-pressed="true"] {border-color:#435bb1;background:#eaf0ff;box-shadow:0 0 0 2px #435bb120;}
.skin-card:focus-visible {outline:3px solid #d67e24;outline-offset:3px;}
.skin-card canvas {width:100%;height:152px;object-fit:contain;pointer-events:none;}
.skin-card strong {font-size:17px;}
.skin-card small {font-size:11px;line-height:1.35;}
.skin-state {font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#435bb1;}
.skin-note {font-size:12px;color:#61718b;margin:16px 0 0;line-height:1.5;}
@media(max-width:440px){.skin-grid{gap:7px}.skin-card{padding:10px 4px}.skin-card canvas{height:132px}.skin-card strong{font-size:14px}.skin-card small{font-size:10px}}

#panel .skin-card:disabled {opacity:1;cursor:not-allowed;background:#f0f1f4;border-color:#c9ced8;color:#697080;}
#panel .skin-card:disabled canvas {opacity:.65;}
.skin-requirement {font-weight:700;max-width:140px;}


.skin-tile {position:relative;min-width:0;display:flex;}
.skin-tile .skin-card {width:100%;padding-top:38px;}
#panel .skin-info-toggle {position:absolute;top:0;left:0;z-index:1;width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;background:transparent;border:0;box-shadow:none;color:#334b80;cursor:pointer;}
.skin-info-toggle span {display:grid;place-items:center;width:22px;height:22px;border:1.5px solid currentColor;border-radius:50%;font-weight:800;font-size:15px;line-height:1;}
#panel .skin-info-toggle:focus-visible {outline:3px solid #d67e24;border-radius:12px;outline-offset:1px;}
#panel .skin-info-toggle[aria-expanded="true"] span {background:#334b80;color:white;}
/* Keep the textbox inside the grid on narrow screens. */
.skin-tooltip {position:absolute;top:42px;left:5px;z-index:4;width:min(220px,calc(100vw - 72px));box-sizing:border-box;padding:11px 12px;border:1px solid #aab9d0;border-radius:10px;background:#fffdf6;color:#263957;box-shadow:0 5px 16px #26395726;font-size:12px;line-height:1.45;cursor:default;}
.skin-tooltip[hidden] {display:none;}
.skin-tooltip p {margin:4px 0 0;}
.skin-tile:nth-child(2) .skin-tooltip {left:50%;transform:translateX(-50%);}
.skin-tile:last-child .skin-tooltip {left:auto;right:5px;}

#panel .skin-learn {display:inline-flex;align-items:center;gap:4px;min-height:44px;color:#334b80;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
#panel .skin-learn:focus-visible {outline:3px solid #d67e24;outline-offset:2px;border-radius:4px;}