/* F8.UI.1: shared presentation tokens for the production UI and its 3D host.
   Runtime modules still own panel state, tooltips, drag/drop and hotkeys. */
html:root{
  --cc-ui-panel-fill:linear-gradient(180deg,rgba(16,18,32,.98),rgba(7,9,18,.98));
  --cc-ui-panel-border:#514064;
  --cc-ui-control-text:#d5c9df;
  --cc-ui-control-active:#f4e5ff;
  --cc-ui-radius-window:14px;
  --cc-ui-radius-panel:10px;
  --cc-ui-radius-control:8px;
  --cc-ui-radius-small:6px;
  --cc-ui-accent:#c58aff;
  --cc-ui-gold:#ead394;
  --cc-ui-muted:#aea1b9;
  --cc-ui-control-fill:linear-gradient(180deg,#1c182a,#100e1c);
  --cc-ui-shadow:0 24px 80px #000c,inset 0 1px #ead9ff0c;
  --ui-panel-texture:url("../../assets/ui/panel-texture.png");
  --ui-frame-texture:url("../../assets/ui/frame-texture.png");
  --ui-slot-texture:url("../../assets/ui/slot-texture.png");
  --ui-slot-active-texture:url("../../assets/ui/slot-active-texture.png");
  --font-mono:var(--chronocairn-font);
}

/* More specific than asynchronously mounted legacy skins, independent of load order. */
html body :is(#inventory,#questLogV152,#merchant,#craft,#dialogueUiV276,#map-panel,#help,#v161Chat){
  color:#eee7f4;
  font-family:var(--chronocairn-font)!important;
  font-variant-numeric:tabular-nums;
}
html body :is(#inventory .f8-inventory-card,#questLogV152 .v152-window,
  #merchant .v181-merchant-card,#craft .f8-production-craft-card,
  #dialogueUiV276 .v276-dialogue-card,#map-panel.f8-production-map-panel){
  background-image:var(--cc-ui-panel-fill),var(--ui-panel-texture)!important;
  background-repeat:repeat!important;
  border-color:var(--cc-ui-panel-border)!important;
  border-image:none!important;
  border-width:1px!important;
  border-radius:var(--cc-ui-radius-window)!important;
  box-shadow:var(--cc-ui-shadow)!important;
}
/* Center the already-scaled production card once; legacy offsets pushed its
   upper and left edges outside the logical stage. */
html[data-f8-inventory-viewport] body #inventory.f8-production-inventory .f8-inventory-card{
  left:0!important;
  top:0!important;
}
html body #inventory .f8-production-inventory-stage{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr)!important;
}
html body #inventory.f8-production-inventory .f8-inventory-card .v6-sheet-tabs>button{
  height:var(--cc-ui-tab-height,44px)!important;
  min-height:var(--cc-ui-tab-height,44px)!important;
  max-height:var(--cc-ui-tab-height,44px)!important;
}
/* Keep the two production columns inside the card, including its scrollbar.
   The bag's seven fractional tracks follow the available right-column width. */
html[data-f8-inventory-viewport="compact"] body #inventory.f8-production-inventory .f8-inventory-card .v5-char-menu{
  padding:0!important;
  grid-template-columns:600px minmax(0,1fr)!important;
}
html[data-f8-inventory-viewport="standard"] body #inventory.f8-production-inventory .f8-inventory-card .v5-char-menu{
  padding:0!important;
  grid-template-columns:840px minmax(0,1fr)!important;
}
html body #inventory.f8-production-inventory .v5-stats{font-size:13px!important;line-height:1!important;gap:2px 16px!important;margin-top:6px!important;padding-top:6px!important}
html body #inventory.f8-production-inventory .v5-stats b{font-size:12px!important}
html body #inventory.f8-production-inventory .v5-stats em{font-size:13px!important}
html body #inventory.f8-production-inventory .v5-stats span{padding:0!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v5-quick-section{margin-top:4px!important;padding-top:4px!important}
html body #inventory #f8-equipment .equip-slot.empty .f8-item-slot{font-size:0!important}

/* One type hierarchy, including the production skill/talent controls. */
html body #inventory :is(.v6-sheet-tabs button,.v7-spec-tabs button,.v14-spec-tabs button,
  .v5-drop-button,.v7-bag-tools button,.v16-bar-heading,.v16-bar-heading small,
  .v6-talent-head,.v14-skills-head,.v14-skill-node,.v14-skill-node *,
  .v7-node,.v7-node *,.v5-stats *,.v5-character-name,.v5-character-level,.v5-drop-zone){
  font-family:var(--chronocairn-font)!important;
}
html body #inventory :is(.v6-sheet-tabs button,.v7-spec-tabs button,.v14-spec-tabs button){
  font-size:14px!important;
  letter-spacing:.055em!important;
}
html body #inventory :is(.v14-skill-node strong,.v7-node strong){font-size:13px!important;line-height:1.2!important}
html body #inventory :is(.v14-skill-node small,.v7-node small){font-size:11px!important;line-height:1.35!important;color:var(--cc-ui-muted)!important}
html body #inventory :is(.v14-skill-actions button,.v14-rank,.v7-node-rank){font-size:11px!important}
html body #inventory :is(.v6-talent-head,.v14-skills-head){font-size:16px!important}
html body #inventory :is(.v5-drop-button,.v7-bag-tools button,.v5-character-level){font-size:12px!important}
html body #inventory.f8-production-inventory :is(.v16-bar-heading,.v16-bar-heading small,#v16SkillRemoveZone){font-size:11px!important;line-height:1.25!important}
html body :is(#inventory .f8-inventory-card>h2,#questLogV152 header h2,
  #merchant .v181-merchant-card h2,#craft .f8-production-craft-card h2){
  color:var(--cc-ui-accent)!important;
  letter-spacing:.06em!important;
  line-height:1.15!important;
  text-shadow:none!important;
}

/* A common control finish; skill nodes and item slots retain their rarity/state cues. */
html body :is(#inventory .v6-sheet-tabs button,#inventory .v7-spec-tabs button,
  #inventory .v14-spec-tabs button,#inventory .v5-drop-button,#inventory .v7-bag-tools button,
  #inventory .v14-skill-actions button,#inventory #v14ResetSkills,#inventory .v7-node button,
  #questLogV152 .v202-journal-tab,
  #merchant .v181-row button,#craft .v5-craft-tabs button,#dialogueUiV276 .v276-dialogue-choice,
  #v22SkillAssignMenu button){
  background-image:var(--cc-ui-control-fill)!important;
  border:1px solid var(--cc-ui-panel-border)!important;
  border-image:none!important;
  border-radius:var(--cc-ui-radius-control)!important;
  color:var(--cc-ui-control-text)!important;
  transition:background-color .12s,border-color .12s,box-shadow .12s;
}
html body :is(#inventory .v6-sheet-tabs button,#inventory .v7-spec-tabs button,
  #inventory .v14-spec-tabs button,#craft .v5-craft-tabs button,#questLogV152 .v202-journal-tab).active{
  background-image:linear-gradient(180deg,#302039,#1a1226)!important;
  border-color:var(--cc-ui-accent)!important;
  color:var(--cc-ui-control-active)!important;
  box-shadow:inset 0 -2px var(--cc-ui-accent)!important;
}
html body :is(#inventory,#questLogV152,#merchant,#craft,#dialogueUiV276,#map-panel) button:hover:not(:disabled){
  border-color:var(--cc-ui-accent)!important;
}
html body :is(#inventory,#questLogV152,#merchant,#craft,#dialogueUiV276,#map-panel) button:focus-visible{
  outline:2px solid var(--cc-ui-accent)!important;
  outline-offset:3px!important;
}
html body :is(#inventory,#questLogV152,#merchant,#craft) button:disabled{cursor:not-allowed}

/* Close controls share the same logical size and focus treatment. */
html body :is(#inventory #f8-production-close-inventory,#questLogV152 #v152QuestClose,
  #merchant .v181-merchant-card header button,#craft #closeCraft,
  #dialogueUiV276 .v276-dialogue-close){
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--cc-ui-panel-border)!important;
  border-image:none!important;
  border-radius:var(--cc-ui-radius-control)!important;
  background:var(--cc-ui-control-fill)!important;
  color:#eedcff!important;
  font:900 26px/1 var(--chronocairn-font)!important;
}

/* The same surface treatment reaches HUD, map, dialogue and floating UI. */
html body :is(#hud .f8-production-player-panel,#hud .f8-production-quest-tracker,
  #hud #f8-minimap.f8-production-minimap,#v41StatusPanel,#v161Chat,
  #f8-production-item-tooltip,#v6ItemTooltip,#v23SkillTooltip,#v41StatusTooltip,
  #f8-production-item-context,#v22SkillAssignMenu){
  background-image:var(--cc-ui-panel-fill)!important;
  border-color:var(--cc-ui-panel-border)!important;
  border-radius:var(--cc-ui-radius-panel)!important;
  box-shadow:0 8px 28px #0009,inset 0 1px #ead9ff0c!important;
}
html body #hud .f8-production-quest-tracker .panel-title{color:var(--cc-ui-gold)!important}
html body #hud :is(.f8-production-player-portrait,.f8-production-top-bar){border-radius:var(--cc-ui-radius-small)!important}
html body :is(#f8-production-item-tooltip,#v6ItemTooltip,#v23SkillTooltip,#v41StatusTooltip){line-height:1.45!important}
html body :is(#inventory .f8-inventory-card,#questLogV152 .v152-detail,
  #questLogV152 .v152-body aside,#merchant .v181-list,#craft .f8-production-craft-card,
  #inventory #v14SkillsPanel,#inventory .v6-talent-panel){
  scrollbar-width:thin;
  scrollbar-color:#795391 #0b0d18;
}
html body #questLogV152 .v152-window::before{border-radius:var(--cc-ui-radius-panel)}
html body #questLogV152 .v202-journal-tabs{gap:8px!important}
html body #questLogV152 .v202-journal-tab{font-size:14px!important;min-height:44px!important;padding:8px 16px!important}
html body #craft .v5-craft-top{border-radius:var(--cc-ui-radius-panel)}
html body #craft .v5-craft-tabs{gap:8px}
html body #craft .v5-craft-tabs button{min-height:36px;padding:8px 12px;font-size:13px}
html body #merchant .v181-merchant-card{padding:18px}
html body #merchant .v181-row{border-radius:var(--cc-ui-radius-control)}

/* Readable inventory typography is sized for the production card's .7 scale.
   Keep its canonical paperdoll, ten equipment mounts and seven bag columns. */
html body #inventory.f8-production-inventory .f8-inventory-card{
  --cc-sheet-text:20px;
  --cc-sheet-caption:18px;
  --cc-sheet-title:24px;
}
html body #inventory.f8-production-inventory .f8-inventory-card>h2{font-size:28px!important;margin-bottom:10px!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v5-character-name{font-size:32px!important;line-height:1!important;color:var(--cc-ui-gold)!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v5-character-level{font-size:18px!important;line-height:1!important;color:var(--cc-ui-muted)!important}
html body #inventory.f8-production-inventory .f8-inventory-card :is(.v6-sheet-tabs button,.v7-spec-tabs button,.v14-spec-tabs button){font-size:20px!important;letter-spacing:.035em!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v5-paperdoll{
  border-color:#574333!important;
  border-radius:10px!important;
  background:radial-gradient(ellipse at 50% 65%,#43311f88,#17131a 55%,#090a12 90%)!important;
}
html body #inventory.f8-production-inventory .f8-inventory-card #f8-equipment .equip-slot>.label{font-size:15px!important;color:#b5a8c0!important}
html body #inventory.f8-production-inventory .f8-inventory-card #f8-equipment .equip-slot.empty .empty-slot-label{display:none!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v5-stats{
  max-height:none!important;
  overflow:visible!important;
  margin-top:8px!important;
  padding-top:8px!important;
  gap:2px 18px!important;
  font-size:var(--cc-sheet-text)!important;
  line-height:1!important;
}
html body #inventory.f8-production-inventory .f8-inventory-card .v5-stats span{
  box-sizing:border-box!important;
  min-height:24px!important;
  align-items:center!important;
  gap:10px!important;
  padding:0!important;
  border-bottom:1px solid #d4baff0d!important;
}
html body #inventory.f8-production-inventory .f8-inventory-card .v5-stats b{font-size:20px!important;font-weight:400!important;color:#b2a5bd!important;letter-spacing:.01em!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v5-stats em{font-size:22px!important;color:#f1dfb0!important;white-space:nowrap!important}

/* Put the bag's title, currencies and tools back into normal flow. */
html body #inventory.f8-production-inventory .f8-inventory-card .v5-bag-title{margin:0 0 8px!important;min-height:42px!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v5-bag-title h3{margin:0!important;font-size:28px!important;font-weight:400!important;color:var(--cc-ui-gold)!important;letter-spacing:.05em!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v5-currencies{
  position:static!important;
  transform:none!important;
  width:auto!important;
  height:auto!important;
  justify-content:flex-start!important;
  gap:10px!important;
  margin:0 0 10px!important;
  padding:0 0 10px!important;
}
html body #inventory.f8-production-inventory .f8-inventory-card .v5-currencies span{font-size:20px!important;line-height:1.1!important;padding:6px 12px!important;border-radius:6px!important;color:var(--cc-ui-gold)!important}
html body #inventory.f8-production-inventory .f8-inventory-card :is(.v5-drop-button,.v7-bag-tools button){font-size:18px!important;min-height:34px!important;padding:5px 12px!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v7-bag-tools{margin:0 0 10px!important;padding:7px 8px!important;border-radius:8px!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v7-bag-tools b{font-size:18px!important;letter-spacing:.035em!important;color:var(--cc-ui-muted)!important}
html body #inventory.f8-production-inventory .f8-inventory-card .slot-count{font-size:18px!important}
html body #inventory.f8-production-inventory .f8-inventory-card #f8-drop-zone{height:44px!important;font-size:18px!important;letter-spacing:.035em!important;border-radius:8px!important;color:#bb8fa3!important;background:#20121b88!important;border-color:#714659!important}

/* Both canonical loadout bars share one footer row, freeing space for stats. */
html body #inventory.f8-production-inventory .f8-inventory-card .v5-quick-section{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(625px,1fr)!important;
  gap:18px!important;
  margin-top:8px!important;
  padding:8px 0 0!important;
  background:transparent!important;
  align-items:start!important;
}
html body #inventory.f8-production-inventory .f8-inventory-card :is(#v16InventorySkillSection,.cc-action-section){
  box-sizing:border-box!important;
  min-width:0!important;
  margin:0!important;
  padding:8px!important;
  border:1px solid #49335b!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#171021aa,#090b15cc)!important;
}
html body #inventory.f8-production-inventory .f8-inventory-card :is(.v16-bar-heading,.v16-bar-heading small){font-size:18px!important;line-height:1.1!important;margin:0 0 8px!important;letter-spacing:0!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v16-bar-heading{align-items:center!important;gap:10px!important;min-height:22px!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v16-bar-heading>span{color:#e3c7f7!important;white-space:nowrap!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v16-bar-heading small{font-size:16px!important;margin:0!important;color:#a99ab5!important}
html body #inventory.f8-production-inventory .f8-inventory-card #v16InventorySkillBar{grid-template-columns:repeat(5,minmax(0,1fr))!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v16-inv-skill-slot{height:66px!important;border:1px solid #503560!important;border-radius:8px!important;background-image:linear-gradient(180deg,#20152d,#0c0b16)!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v16-inv-skill-slot.empty{opacity:1!important;border-color:#392b49!important}
html body #inventory.f8-production-inventory .f8-inventory-card :is(.v16-key,.v16-rank){font-size:16px!important;color:#d8c38b!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v16-name{font-size:14px!important;color:#b8a6c5!important}
html body #inventory.f8-production-inventory .f8-inventory-card #v16SkillRemoveZone{height:24px!important;margin-top:6px!important;font-size:16px!important;border-radius:6px!important}
html body #inventory.f8-production-inventory .f8-inventory-card #f8-inventory-actionbar{grid-template-columns:repeat(8,minmax(0,72px))!important;gap:7px!important}
html body #inventory.f8-production-inventory .f8-inventory-card #f8-inventory-actionbar .f8-item-slot{min-width:0!important;width:100%!important;height:72px!important}
html body #inventory.f8-production-inventory .f8-inventory-card #f8-inventory-actionbar kbd{font-size:16px!important;color:#d8c38b!important}

/* Two readable cards per row at laptop size; three on the larger profile. */
html body #inventory.f8-production-inventory .f8-inventory-card .f8-sheet-content{margin:0!important;padding:0!important;max-height:none!important;overflow:visible!important;border:0!important;background:transparent!important}
html body #inventory.f8-production-inventory .f8-inventory-card :is(#v14SkillsPanel,.v6-talent-panel){height:620px!important;min-height:620px!important;padding:12px!important;border-color:#49335b!important}
html[data-f8-inventory-viewport="standard"] body #inventory.f8-production-inventory .f8-inventory-card :is(#v14SkillsPanel,.v6-talent-panel){height:820px!important;min-height:820px!important}
html body #inventory.f8-production-inventory .f8-inventory-card :is(.v6-talent-head,.v14-skills-head){height:auto!important;min-height:52px!important;max-height:none!important;font-size:20px!important;line-height:1.3!important;white-space:normal!important;overflow:visible!important;gap:12px!important}
html body #inventory.f8-production-inventory .f8-inventory-card :is(#v6ResetTalents,#v14ResetSkills){flex:0 0 auto!important;width:auto!important;min-height:36px!important;padding:6px 10px!important;font-size:16px!important;white-space:nowrap!important;background-image:var(--cc-ui-control-fill)!important;border:1px solid var(--cc-ui-panel-border)!important;border-radius:8px!important;color:#c8b5d5!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:auto!important;gap:12px!important;justify-content:stretch!important}
html[data-f8-inventory-viewport="standard"] body #inventory.f8-production-inventory .f8-inventory-card .v14-skill-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-skill-node{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 40px!important;
  grid-template-rows:minmax(48px,auto) 1fr 32px!important;
  grid-template-areas:"icon title rank" "desc desc desc" "actions actions actions"!important;
  width:auto!important;min-width:0!important;max-width:none!important;
  height:auto!important;min-height:200px!important;max-height:none!important;
  aspect-ratio:auto!important;
  padding:12px!important;
  gap:10px!important;
  opacity:1!important;filter:none!important;
  background:linear-gradient(160deg,#1c1727,#0c0d17 85%)!important;
}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-skill-icon{grid-area:icon!important;width:48px!important;height:48px!important;margin:0!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-skill-node strong{grid-area:title!important;font-size:22px!important;line-height:1.1!important;padding:0!important;align-self:center!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-skill-node small{grid-area:desc!important;font-size:18px!important;line-height:1.35!important;margin:0!important;color:#b6a7c3!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-rank{grid-area:rank!important;position:static!important;font-size:20px!important;text-align:right!important;align-self:start!important;color:var(--cc-ui-gold)!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-tier{top:48px!important;bottom:auto!important;right:12px!important;font-size:13px!important;color:#8f7e9e!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-skill-actions{grid-area:actions!important;margin:0!important;align-self:end!important;gap:8px!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-skill-actions button{font-size:18px!important;min-height:32px!important;padding:4px 8px!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v16-drag-hint{font-size:13px!important;border:0!important;background:transparent!important;color:#b594c9!important;line-height:1.2!important;text-align:center!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-skill-node.locked{border-color:#382e44!important;background:#0f101a!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-skill-node.locked .v14-skill-icon{filter:grayscale(.7)!important;opacity:.6!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-skill-node.unlocked{border-color:#b479d2!important;box-shadow:inset 3px 0 #b479d2!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v14-skill-node.maxed{border-color:#c6a35f!important;box-shadow:inset 3px 0 #c6a35f!important}

html body #inventory.f8-production-inventory .f8-inventory-card .v7-points-note{font-size:18px!important;line-height:1.3!important;color:var(--cc-ui-muted)!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v7-spec-tree{padding:14px 22px!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v7-spec-tree h3{font-size:26px!important;color:var(--cc-ui-gold)!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v7-spec-tree>p{font-size:18px!important;line-height:1.35!important;margin:6px 0 18px!important;color:var(--cc-ui-muted)!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v7-node{box-sizing:border-box!important;grid-template-columns:48px minmax(0,1fr) 40px!important;min-height:86px!important;gap:12px!important;padding:12px!important;opacity:1!important;filter:none!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v7-node strong{font-size:22px!important;line-height:1.2!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v7-node small{font-size:18px!important;line-height:1.35!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v7-node-icon{width:48px!important;height:48px!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v7-node-rank{font-size:20px!important}
html body #inventory.f8-production-inventory .f8-inventory-card .v7-node.locked .v7-node-icon{filter:grayscale(.7)!important;opacity:.6!important}

/* Floating skill details are unscaled and need their own readable text size. */
html body #v23SkillTooltip{font-size:16px!important;line-height:1.45!important;padding:16px!important}
html body #v23SkillTooltip .v23-name{font-size:22px!important}
html body #v23SkillTooltip :is(.v23-meta,.v23-scale,.v23-hint){font-size:14px!important}

@media(prefers-reduced-motion:reduce){
  html body :is(#inventory,#questLogV152,#merchant,#craft,#dialogueUiV276) button{transition:none!important}
}