.tm-sk-panel { height:720px; padding-bottom:34px; }
.tm-sk-identity { color:#fff4cf; font-size:13px; }
.tm-sk-body { display:grid; grid-template-columns:300px 410px minmax(0,1fr); grid-gap:20px;gap:20px; min-height:0; flex:1; padding:18px 5px 10px; }
.tm-sk-library { display:flex; flex-direction:column; min-height:0; min-width:0; }
.tm-sk-preview,.tm-sk-detail { min-height:0; min-width:0; border-left:1px solid #c2d8df; padding-left:20px; }
.tm-sk-stage { position:relative; height:226px; margin-top:8px; border:1px solid #b7d2db; border-radius:14px; overflow:hidden; background:#102b46 url('../img/ui/sapphire/card-v1.png') center 75%/cover no-repeat; }
.tm-sk-canvas { width:100%; height:100%; display:block; image-rendering:pixelated; }
.tm-sk-target-label { position:absolute; right:24px; bottom:16px; font-size:9px; color:#c5d8e8; background:#102b46; border-radius:5px; padding:3px 6px; }
.tm-sk-preview-loading { position:absolute; top:20px; left:0; right:0; text-align:center; font-size:12px; color:#e2eaf0; }
.tm-sk-preview-caption { text-align:center; color:#e2eaf0; font-size:13px; margin:8px 0; }
.tm-sk-preview-actions { text-align:center; }
.tm-sk-replay { padding:7px 20px; color:#e2eaf0; background:#102b46; border:1px solid #a5cdda; border-radius:8px; font-size:11px!important; }
.tm-sk-preview-note { font-size:9px; color:#e2eaf0; text-align:center; margin:8px 0 0; }
.tm-sk-detail-content { max-height:182px; overflow:auto; scrollbar-width:thin; }
.tm-sk-detail-hero { display:flex; align-items:center; grid-gap:10px;gap:10px; margin-top:8px; }.tm-sk-detail-hero .tm-st-icon { width:43px; height:43px; }.tm-sk-detail-hero h3 { margin:0; font-size:17px; color:#e2eaf0; }
.tm-sk-description { color:#e2eaf0; font-size:12px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.tm-sk-costs { display:flex; grid-gap:8px;gap:8px; margin:10px 0 12px; }.tm-sk-costs span { padding:5px 9px; border-radius:6px; background:#102b46; color:#e2eaf0; font-size:10px; }
.tm-sk-equip-actions { display:flex; flex-direction:column; grid-gap:7px;gap:7px; margin-top:8px; }
.tm-sk-equip-actions button { padding:8px 10px; border:1px solid #a1c8d7; border-radius:8px; background:#102b46; color:#e2eaf0; font-size:11px; }
.tm-sk-equip-actions .tm-sk-auto-equip { background:linear-gradient(#102b46,#102b46); color:white; border-color:#2c8cb6; font-weight:700; }
.tm-sk-equip-actions .tm-sk-unequip-skill { background:#102b46; border-color:#e5c79e; color:#f0ce83; }
.tm-skill-overlay button:disabled { opacity:.45; cursor:default; }
.tm-sk-action-hint { font-size:9px; line-height:1.6; color:#e2eaf0; }
.tm-sk-equipped-key { color:#f4a29b; background:#102b46; border:1px solid #e4c879; border-radius:5px; font-size:11px; padding:3px 6px; }
.tm-sk-loadout { flex-shrink:0; margin:0 5px; height:146px; padding:8px 12px; border:1px solid #c2d9df; border-radius:13px; background:#102b46; }
.tm-sk-loadout-heading { display:flex; align-items:center; justify-content:space-between; color:#e2eaf0; height:24px; }.tm-sk-loadout-heading strong { font-size:12px; }.tm-sk-loadout-heading span { font-size:9px; color:#e2eaf0; }.tm-sk-equipped-count { color:#f4a29b!important; }
.tm-sk-slots { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); grid-gap:8px;gap:8px; margin:4px 0 7px; }
.tm-sk-slot { position:relative; height:71px; min-width:0; padding:2px 3px 5px; border:1px solid #bad3dc; border-radius:8px; background:url('../img/ui/sapphire/panel-v1.png') center/100% 100% no-repeat; color:#e2eaf0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tm-sk-slot kbd { position:absolute; left:5px; top:3px; font:bold 10px 'Segoe UI',sans-serif; background:#102b46; border:1px solid #dfce9a; color:#f0ce83; padding:0 3px; border-radius:3px; z-index:1; }
.tm-sk-slot .tm-st-icon { width:35px; height:35px; }.tm-sk-slot small { display:block; font-size:8px; height:16px; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; color:#e2eaf0; }.tm-sk-slot-empty { font-size:27px; opacity:.4; height:35px; }
.tm-sk-slot.selected { outline:2px solid #e7b943; outline-offset:1px; }.tm-sk-slot-actions { display:flex; justify-content:center; grid-gap:8px;gap:8px; }.tm-sk-slot-actions button { background:#102b46; color:#e2eaf0; border:1px solid #c4dbe2; border-radius:6px; padding:3px 11px; font-size:9px; }
.tm-sk-footer { height:39px; margin-top:15px; }.tm-sk-message { font-size:10px; margin-right:14px; line-height:1.5; }.tm-sk-message.error { color:#f4a29b; }
.tm-sk-footer-actions { display:flex; grid-gap:8px;gap:8px; flex-shrink:0; }.tm-sk-save { padding:8px 13px; border:1px solid #9dc4b5; color:#8dd9b1; background:#102b46; border-radius:8px; font-size:11px!important; }
/* Keep the loadout as its own region between the skill preview and footer. */
.tm-sk-panel>.tm-sk-body{bottom:39%}.tm-sk-loadout{position:absolute;left:52px;right:52px;top:64%;height:19%;margin:0;padding:6px 12px}
.tm-sk-stage{height:150px}.tm-sk-preview,.tm-sk-detail{overflow-y:auto;padding-bottom:6px}.tm-sk-preview-note,.tm-sk-message{font-size:12px;color:#c5d8e8}.tm-sk-preview-caption{color:#c5d8e8}.tm-sk-loadout-heading span{font-size:11px;color:#c5d8e8}.tm-sk-equipped-count{color:#f4a29b!important}.tm-sk-slots{margin:3px 0 6px}.tm-sk-slot{height:62px;background:#102b46;color:#c5d8e8}.tm-sk-slot kbd{font-size:11px;color:#f4a29b}.tm-sk-slot small{font-size:10px;line-height:14px;color:#c5d8e8}.tm-sk-slot .tm-st-icon{width:28px;height:28px}.tm-sk-slot-actions{gap:0;grid-gap:0}.tm-sk-slot-actions button{color:#c5d8e8;font-size:11px}.tm-sk-slot-actions button+button{margin-left:8px}.tm-sk-footer-actions{gap:0;grid-gap:0}.tm-sk-footer-actions button+button{margin-left:10px}.tm-sk-save{min-height:40px;font-size:12px!important;color:#8dd9b1}.tm-sk-replay{color:#c5d8e8;font-size:12px!important}
.tm-sk-description,.tm-sk-action-hint{color:#c5d8e8;font-size:12px;line-height:18px}.tm-sk-costs span{color:#c5d8e8;font-size:11px}.tm-sk-costs span+span{margin-left:8px}.tm-sk-costs{gap:0;grid-gap:0}.tm-sk-equip-actions{gap:0;grid-gap:0}.tm-sk-equip-actions button{min-height:36px;font-size:12px;color:#c5d8e8}.tm-sk-equip-actions button+button{margin-top:8px}.tm-sk-equip-actions .tm-sk-auto-equip{background:linear-gradient(#287fab,#15567f);color:white}.tm-sk-equip-actions .tm-sk-unequip-skill{color:#f4a29b}.tm-skill-overlay button:disabled{opacity:1;background:#102b46;color:#c5d8e8;border-color:#b0c1c9}

.tm-sk-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain}
#tm-skill-hud .tm-sk-save{background:transparent url('../img/ui/inventory/learn-button-v1.png') center/100% 100% no-repeat;border:0;width:220px;min-height:58px;color:#fff8db;text-shadow:0 1px 2px #19416b;padding:15px 24px;font-size:14px!important;font-weight:700}
#tm-skill-hud .tm-sk-close{display:flex;align-items:center;justify-content:center;padding:0 0 4px;line-height:1}
.tm-skill-rarity{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;margin:3px 6px 3px 0}.tm-sk-detail-hero .tm-skill-rarity{margin-left:auto;flex-shrink:0}
/* Compact skill cards: name + rarity on the left, type / MP / hotbar key stacked on the right. */
#tm-skill-hud .tm-st-skill{min-height:0!important;padding-top:4px!important;padding-bottom:4px!important}
#tm-skill-hud .tm-sk-side{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;gap:1px;text-align:right}
#tm-skill-hud .tm-sk-side small{display:block;color:#c5d8e8;font-size:10px;line-height:13px;white-space:nowrap}
#tm-skill-hud .tm-sk-side .tm-sk-equipped-key{margin-top:2px;padding:1px 6px;font-size:10px;line-height:14px}
@media(orientation:landscape) and (max-height:520px){
 #tm-skill-hud .tm-st-skill{padding-top:1px!important;padding-bottom:1px!important;margin-bottom:3px!important;border-width:3px!important}
 #tm-skill-hud .tm-st-skill-text strong{font-size:10px!important;line-height:12px!important}
 #tm-skill-hud .tm-st-skill-text .tm-skill-rarity,#tm-skill-hud .tm-st-skill-text>span{font-size:9px!important;line-height:11px!important}
 #tm-skill-hud .tm-sk-side{gap:0}
 #tm-skill-hud .tm-sk-side small{font-size:8px;line-height:9px}
 #tm-skill-hud .tm-sk-side .tm-sk-equipped-key{margin-top:1px;padding:0 5px;font-size:9px;line-height:10px}
}