* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 380px;
  margin: 0;
  color: var(--ui-text);
  background: transparent;
  font-family: var(--ui-font-body);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
button { cursor: pointer; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden, [hidden], .preview-controls[hidden], .route-directory[hidden] { display: none !important; }
.page-content, .guide-workspace { min-width: 0; }

.overlay-shell {
  width: min(430px, 100vw);
  max-height: 100vh;
  padding: 14px;
  overflow-y: auto;
  border: 1px solid var(--ui-line);
  background:
    repeating-linear-gradient(105deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 5px),
    rgba(12, 10, 7, .96);
  box-shadow: var(--ui-frame-inset), 0 18px 48px rgba(0, 0, 0, .5);
}

.topbar, .section-title, .connection-row, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
}

.topbar { padding-bottom: 12px; border-bottom: 1px solid var(--ui-line-soft); }
.eyebrow, .phase { color: var(--ui-gold); font-size: 10px; letter-spacing: .12em; }
h1, h2 { font-family: var(--ui-font-display); }
h1 { margin-top: 3px; font-size: 24px; }
h2 { font-size: 16px; }
h3 { margin: 10px 0 4px; color: var(--ui-gold); font-size: 11px; }
.muted { color: var(--ui-text-muted); font-size: 11px; }
.code { color: #a9a1d7; font: 10px ui-monospace, monospace; }

.level-card {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 5px 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .04);
  font-size: 11px;
}
.level-icon, .level-card i { display: none; }
.level-card input { width: 45px; border: 0; background: transparent; color: var(--ui-gold-light); }
.tauri-character-level { display: none; }

.alert { margin-top: 10px; padding: 9px 10px; border: 1px solid #8c713e; background: #3b2c17; color: #f1d79b; font-size: 11px; }
.alert.danger { border-color: #8d4a42; background: #3a1c19; color: #efbbb3; }

.task-card, .build-card, .loadout-card {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--ui-line-soft);
  background: rgba(255, 255, 255, .03);
}
.task-card-heading, .route-card { display: grid; gap: 5px; }
.route-card { margin-top: 10px; padding: 9px; border-left: 2px solid var(--ui-gold); background: rgba(197, 150, 79, .08); font-size: 11px; }
.route-arrow { color: var(--ui-text-soft); }
.route-detail-link { display: none; }
.route-progress { display: none; }
.tasks { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.tasks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 8px 9px; background: rgba(255, 255, 255, .04); font-size: 12px; line-height: 1.45; }
.tasks li.empty { grid-template-columns: minmax(0, 1fr); }
.task-content { min-width: 0; }
.task-check { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #637d50; border-radius: 50%; color: #b7d29c; }
.task-priority { display: inline-block; margin-right: 7px; padding: 1px 5px; border: 1px solid var(--ui-line); color: var(--ui-text-soft); font-size: 8px; line-height: 1.5; vertical-align: 1px; }
.tasks li.priority-permanent { border-left: 3px solid #cf8a2f; background: rgba(163, 91, 25, .15); }
.tasks li.priority-route { border-left: 3px solid #9f7139; }
.tasks li.priority-optional { opacity: .72; }
.priority-permanent .task-check { border-color: #cf8a2f; background: #6b3915; color: #ffe2a0; }
.priority-permanent .task-priority { border-color: #a76925; background: #542b12; color: #ffd68c; }
.priority-route .task-priority { border-color: #8a6538; color: #dcb87d; }
.priority-optional .task-priority { border-color: #55514a; color: #8f8a81; }
.reward { display: block; margin-top: 3px; color: #82b37a; font-size: 10px; }
.reward strong { font-weight: 700; }
.empty { color: var(--ui-text-muted); }

.level-range { color: #c8b9ec; font-size: 11px; }
.build-focus { margin-top: 6px; color: var(--ui-text-soft); font-size: 11px; }
.support-priority { margin: 7px 0 0; padding: 7px 9px; border: 1px solid var(--ui-line-soft); color: var(--ui-gold-light); font-size: 9px; line-height: 1.5; }
.support-priority[hidden] { display: none; }
.skill-list { display: grid; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.skill-setup { display: flex; align-items: center; gap: 7px; padding: 7px; background: rgba(255, 255, 255, .03); }
.gem-slot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.main-gem { flex: 0 0 116px; }
.gem-label { display: grid; min-width: 0; }
.gem-label strong { font-size: 11px; }
.gem-label small { overflow: hidden; color: var(--ui-text-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.gem-stone { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; overflow: hidden; border: 2px solid var(--ui-gold-dark); border-radius: 50%; background: #16120d; color: #f7f1e8; font-size: 9px; }
.gem-icon { width: 100%; height: 100%; object-fit: cover; }
.gem-fallback::after { position: absolute; inset: 3px; border: 1px solid rgba(255, 255, 255, .2); border-radius: inherit; content: ""; }
.socket-link { flex: 0 0 14px; height: 1px; background: var(--ui-gold-dark); }
.support-gems { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.support-gem { position: relative; display: grid; justify-items: center; gap: 2px; color: var(--ui-text-soft); font-size: 8px; text-align: center; }
.support-priority-badge { position: absolute; top: -7px; right: -5px; z-index: 2; padding: 1px 4px; border: 1px solid #9c6c2e; background: #4e2c12; color: #f3cf8c; font-size: 8px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.support-stone { width: 24px; height: 24px; }
.no-support { color: var(--ui-text-muted); font-size: 9px; }
.gem-role { color: var(--ui-gold); font-size: 8px; }

.compact-list { margin: 7px 0 0; padding: 0; list-style: none; font-size: 10px; }
.compact-list li { display: grid; grid-template-columns: 24px auto 1fr auto; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid var(--ui-line-soft); }
.gear-icon { display: grid; place-items: center; width: 22px; height: 22px; overflow: hidden; border: 1px solid var(--ui-gold-dark); color: var(--ui-gold-light); }
.gear-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gear-action { color: var(--ui-gold); }
.regex { display: block; padding: 7px; overflow-wrap: anywhere; background: #0b100a; color: #83ad78; font-size: 9px; white-space: normal; }
.passive-summary { margin-top: 8px; padding: 9px; background: rgba(83, 78, 111, .15); color: #bbb7c7; font-size: 10px; }
.passive-tree-preview { display: none; }
.tree-actions { display: grid; justify-items: end; gap: 4px; }
.tree-version { color: #77aa88; font-size: 8px; }
.tree-link { color: var(--ui-gold); font-size: 9px; text-decoration: none; }
.tree-note { margin-top: 7px; color: var(--ui-text-muted); font-size: 8px; }
.passive-legend { display: none; }

.connection { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ui-line-soft); }
.connection label { display: block; margin-bottom: 5px; font-size: 10px; }
.connection-row input { min-width: 0; flex: 1; padding: 7px; border: 1px solid var(--ui-line-soft); background: #111; color: #ddd; }
.connection-row button { padding: 7px 10px; border: 0; background: var(--ui-gold); color: #17120c; }
footer { margin-top: 10px; }

/* Desktop site */
body.preview-mode {
  min-width: 1120px;
  height: 100vh;
  overflow: hidden;
  color: var(--ui-text);
  background:
    radial-gradient(ellipse at 50% -15%, rgba(122, 87, 43, .13), transparent 44%),
    repeating-linear-gradient(98deg, rgba(255, 255, 255, .009) 0 1px, transparent 1px 4px),
    var(--ui-void);
}

.preview-mode .overlay-shell {
  width: 100%;
  height: 100vh;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid #2d2013;
  background: transparent;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .68);
}

.preview-mode .preview-controls {
  position: relative;
  height: var(--ui-header-height);
  padding: 0 34px;
  border-bottom: 1px solid #654724;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 45%),
    repeating-linear-gradient(104deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 5px),
    #0d0c09;
  box-shadow: 0 5px 22px rgba(0, 0, 0, .58), inset 0 -3px rgba(0, 0, 0, .72);
}
.preview-mode .preview-controls::after { position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; background: rgba(197, 150, 79, .3); content: ""; }
.preview-mode .preview-inner { display: grid; grid-template-columns: 330px 1fr auto; align-items: center; width: 100%; height: 100%; }
.preview-mode .site-brand { color: #e4c78f; font: 700 29px var(--ui-font-display); letter-spacing: .035em; white-space: nowrap; text-decoration: none; text-shadow: 0 1px #000, 0 0 14px rgba(190, 137, 57, .24); }
.preview-mode .main-navigation { display: flex; align-self: stretch; justify-content: center; gap: clamp(20px, 3vw, 48px); }
.preview-mode .main-navigation a { position: relative; display: grid; place-items: center; color: #ae9c82; font: 500 17px var(--ui-font-display); text-decoration: none; text-shadow: 0 1px #000; }
.preview-mode .main-navigation a:hover, .preview-mode .main-navigation a.active { color: #e0c89e; }
.preview-mode .main-navigation a.active::after { position: absolute; right: 0; bottom: 4px; left: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ui-gold), transparent); box-shadow: 0 0 8px rgba(197, 150, 79, .65); content: ""; }
.preview-mode .preview-heading { display: flex; align-items: center; gap: 15px; }
.preview-mode .header-version { padding: 9px 13px; border: 1px solid rgba(80, 139, 98, .25); background: rgba(37, 83, 53, .16); color: #79ae88; font-size: 11px; white-space: nowrap; box-shadow: inset 0 0 10px rgba(48, 102, 64, .12); }
.preview-mode .preview-settings label { display: block; }
.preview-mode .preview-settings select { width: 116px; padding: 9px 30px 9px 12px; border: 1px solid #5b4023; border-radius: 2px; background: linear-gradient(#1c1812, #0d0b08); color: #dec9a5; font: 13px var(--ui-font-display); outline: none; }

.preview-mode .page-content { display: grid; grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr); width: 100%; height: calc(100vh - var(--ui-header-height)); }
.preview-mode .route-directory { position: relative; overflow: hidden; border-right: 1px solid #5d4121; background: repeating-linear-gradient(103deg, rgba(255, 255, 255, .011) 0 1px, transparent 1px 5px), linear-gradient(90deg, #14110d, #090806); box-shadow: inset -12px 0 28px rgba(0, 0, 0, .36), inset 0 0 0 4px #080704, inset 0 0 0 5px rgba(130, 94, 48, .38); }
.preview-mode .route-directory::after { position: absolute; inset: 7px 5px 7px 7px; pointer-events: none; border: 1px solid rgba(150, 106, 51, .28); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .62); content: ""; }
.preview-mode .directory-heading { padding: 25px 33px 17px; }
.preview-mode .directory-heading .eyebrow { display: none; }
.preview-mode .directory-heading strong { color: #dbad63; font: 700 23px var(--ui-font-display); text-shadow: 0 1px #000, 0 0 8px rgba(197, 150, 79, .12); }
.preview-mode .guide-directory-list { position: relative; z-index: 1; display: grid; gap: 4px; padding: 0 24px 14px; border-bottom: 1px solid rgba(197, 150, 79, .16); }
.preview-mode .guide-button { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 42px; padding: 7px 9px; border: 1px solid #3d3020; background: linear-gradient(90deg, rgba(197, 150, 79, .035), transparent); color: #b4a58f; text-decoration: none; }
.preview-mode .guide-button:hover { border-color: #6f4c29; color: #dbc092; }
.preview-mode .guide-button.active { border-color: #8b5430; background: linear-gradient(90deg, rgba(94, 38, 23, .9), rgba(45, 23, 16, .52)); color: #f0dfc3; box-shadow: inset 2px 0 #c99548; }
.preview-mode .guide-marker { color: #ad824b; font: 9px var(--ui-font-number); text-align: center; }
.preview-mode .guide-label { display: grid; min-width: 0; font: 600 13px var(--ui-font-display); }
.preview-mode .guide-label small { overflow: hidden; margin-top: 2px; color: #756d62; font: 8px var(--ui-font-body); text-overflow: ellipsis; white-space: nowrap; }
.preview-mode .act-directory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 0 32px 16px; border-bottom: 1px solid rgba(197, 150, 79, .16); }
.preview-mode .act-button { padding: 10px 5px; border: 1px solid #4f3b25; border-radius: 1px; background: linear-gradient(#1c1812, #0e0c09); color: #8e806b; font: 13px var(--ui-font-display); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75); }
.preview-mode .act-button.active { border-color: #8b5430; background: linear-gradient(#542419, #27130e); color: #e6c690; box-shadow: inset 0 0 12px rgba(207, 102, 54, .16), 0 0 7px rgba(91, 43, 24, .3); }
.preview-mode .area-directory { position: relative; z-index: 1; display: grid; align-content: start; height: calc(100% - 270px); padding: 8px 24px 24px 27px; overflow-y: auto; scrollbar-color: #6a4d28 #0d0b08; scrollbar-width: thin; }
.preview-mode .area-directory::before { position: absolute; top: 20px; bottom: 24px; left: 57px; width: 1px; background: linear-gradient(#b07a32, rgba(197, 150, 79, .1)); content: ""; }
.preview-mode .area-button { position: relative; z-index: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 55px; padding: 7px; border: 1px solid transparent; background: transparent; color: #aa9c86; text-align: left; }
.preview-mode .area-button:hover { background: rgba(197, 150, 79, .055); }
.preview-mode .area-button.area-priority-permanent:not(.active) { background: linear-gradient(90deg, rgba(127, 71, 23, .13), transparent 76%); }
.preview-mode .area-button.area-priority-permanent:not(.active) .area-step { border-color: #ad7c39; color: #d3aa62; }
.preview-mode .area-button.area-priority-permanent .area-directory-level { color: #d3a255; }
.preview-mode .area-button.active { border-color: #8a4b2c; background: linear-gradient(90deg, rgba(88, 34, 22, .88), rgba(45, 23, 16, .5)); color: #f0dfc3; box-shadow: inset 2px 0 var(--ui-gold), inset 0 0 16px rgba(0, 0, 0, .3); }
.preview-mode .area-step { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; margin-left: 10px; border: 1px solid #746445; border-radius: 50%; background: #16130e; color: #a58c65; font: 8px ui-monospace, monospace; box-shadow: inset 0 0 0 3px #0c0a07; }
.preview-mode .area-button.completed .area-step { border-color: #71815a; background: #334a29; color: #d1e5a9; }
.preview-mode .area-button.active .area-step { width: 36px; height: 36px; margin-left: 4px; border: 1px solid #e0aa45; background: radial-gradient(circle, #ac681f, #3d1f0d 70%); color: #ffe08a; font-size: 17px; box-shadow: 0 0 16px rgba(223, 152, 50, .56), inset 0 0 0 4px #1d1109; }
.preview-mode .area-directory-name { display: grid; min-width: 0; font: 600 var(--ui-type-label) var(--ui-font-display); }
.preview-mode .area-directory-name small { overflow: hidden; color: #8a8173; font: 500 var(--ui-type-caption) var(--ui-font-body); text-overflow: ellipsis; white-space: nowrap; }
.preview-mode .area-directory-level { color: #b39566; font: 600 var(--ui-type-meta) var(--ui-font-number); }

.preview-mode .guide-workspace { display: grid; grid-template-rows: 104px minmax(0, 1fr); gap: 12px; min-width: 0; padding: 15px 21px; overflow: hidden; background: radial-gradient(ellipse at 45% 0%, rgba(117, 81, 36, .09), transparent 43%), repeating-linear-gradient(105deg, rgba(255, 255, 255, .008) 0 1px, transparent 1px 5px), #090806; }
.preview-mode .topbar { min-height: 104px; padding: 0 14px 13px; border-bottom: 1px solid rgba(197, 150, 79, .22); }
.preview-mode .topbar .eyebrow { display: none; }
.preview-mode h1 { color: #f0ddb9; font-size: clamp(36px, 2.55vw, 46px); font-weight: 700; letter-spacing: .045em; text-shadow: 0 2px 2px #000, 0 0 14px rgba(197, 150, 79, .12); }
.preview-mode h2 { color: var(--ui-gold-light); font-size: 19px; }
.preview-mode .muted { color: #8f826d; font-size: 11px; }
.preview-mode .level-card { display: grid; grid-template-columns: 38px auto 44px 1px 38px auto; align-items: center; min-width: 380px; padding: 12px 17px; border: 1px solid #684a27; background: linear-gradient(135deg, rgba(197, 150, 79, .075), rgba(255, 255, 255, .008)); color: #c0b19a; font: 14px var(--ui-font-display); box-shadow: var(--ui-frame-inset); }
.preview-mode .level-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #a47635; border-radius: 50%; background: radial-gradient(circle, rgba(164, 114, 44, .22), transparent 68%); color: #d6ae61; font-size: 16px; box-shadow: inset 0 0 0 3px #0b0906, 0 0 6px rgba(197, 150, 79, .2); }
.preview-mode .level-card i { display: block; width: 1px; height: 32px; background: rgba(197, 150, 79, .32); }
.preview-mode .level-card input { width: 44px; padding: 0; border: 0; background: transparent; color: #f0ca83; font: 20px var(--ui-font-number); outline: none; }
.preview-mode .level-card strong { margin-left: 6px; color: #f0ca83; font: 20px var(--ui-font-number); }
.preview-mode .level-card > label, .preview-mode .level-card > span { white-space: nowrap; }
.preview-mode #character-level { display: none; }
.preview-mode .tauri-character-level { display: none; }

.preview-mode .task-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 1.03fr); gap: 23px; min-height: 245px; margin: 0; padding: 27px 43px; border: 1px solid #80623b; outline: 3px double rgba(88, 63, 33, .58); outline-offset: -7px; background: repeating-linear-gradient(0deg, rgba(79, 58, 34, .028) 0 1px, transparent 1px 4px), radial-gradient(ellipse at 15% 20%, rgba(255, 255, 255, .17), transparent 38%), var(--ui-parchment); color: var(--ui-parchment-ink); box-shadow: inset 0 0 30px rgba(69, 49, 27, .24), var(--ui-frame-shadow); }
.preview-mode .task-card::before, .preview-mode .task-card::after { position: absolute; z-index: 2; color: #71502a; font-size: 24px; line-height: 1; content: "◆"; opacity: .78; }
.preview-mode .task-card::before { top: 5px; left: 7px; }
.preview-mode .task-card::after { right: 7px; bottom: 5px; transform: rotate(180deg); }
.preview-mode .mission-column { display: flex; min-height: 0; flex-direction: column; }
.preview-mode .task-card h2 { color: #352619; font-size: 22px; }
.preview-mode .task-card .code { color: #725b3b; }
.preview-mode .task-card .tasks { flex: 1; grid-auto-rows: minmax(55px, 1fr); gap: 0; margin-top: 13px; border: 1px solid rgba(75, 56, 34, .18); }
.preview-mode .task-card .tasks li { align-content: center; min-height: 55px; padding: 12px 14px; border-bottom: 1px solid rgba(75, 56, 34, .22); background: rgba(255, 255, 255, .075); color: #3a2e23; font-size: var(--ui-type-label); font-weight: 500; }
.preview-mode .task-card .tasks li:last-child { border-bottom: 0; }
.preview-mode .task-check { border-color: #586a43; background: #344b2e; color: #d9e4bc; box-shadow: inset 0 0 0 2px rgba(18, 26, 13, .7); }
.preview-mode .task-priority { border-color: rgba(81, 60, 35, .45); background: rgba(76, 56, 34, .08); color: #705538; font-size: var(--ui-type-caption); font-weight: 700; letter-spacing: .04em; }
.preview-mode .task-card .tasks li.priority-permanent { border-left: 4px solid #a86120; background: linear-gradient(90deg, rgba(182, 111, 40, .22), rgba(255, 255, 255, .075) 54%); box-shadow: inset 0 0 18px rgba(137, 73, 17, .08); }
.preview-mode .priority-permanent .task-check { border-color: #a86120; background: #763b17; color: #ffe2a4; box-shadow: inset 0 0 0 2px #3d1c0b, 0 0 7px rgba(151, 85, 26, .2); }
.preview-mode .priority-permanent .task-priority { border-color: #9c6229; background: #6a3518; color: #f7d59e; }
.preview-mode .task-card .tasks li.priority-route { border-left: 4px solid #8a6b42; background: linear-gradient(90deg, rgba(113, 83, 47, .13), rgba(255, 255, 255, .055)); }
.preview-mode .priority-route .task-check { border-color: #86623a; background: #5e452a; color: #f2d8ad; }
.preview-mode .priority-route .task-priority { border-color: #8a6a45; background: rgba(105, 76, 43, .14); color: #76512b; }
.preview-mode .task-card .tasks li.priority-optional { background: rgba(255, 255, 255, .035); opacity: .8; }
.preview-mode .priority-optional .task-check { border-color: #847b6c; background: transparent; color: #70685e; box-shadow: none; }
.preview-mode .priority-optional .task-priority { color: #7d7468; }
.preview-mode .task-card .reward { margin-top: 6px; color: #356833; font-size: var(--ui-type-body); font-weight: 700; }
.preview-mode .priority-permanent .reward { color: #8b3f18; font-size: var(--ui-type-emphasis); font-weight: 700; }
.preview-mode .route-overview { display: grid; grid-template-rows: auto 1fr; border: 1px solid rgba(80, 60, 35, .2); background: rgba(255, 255, 255, .03); }
.preview-mode .route-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; margin: 0; padding: 15px 18px 13px; border: 0; border-bottom: 1px solid rgba(80, 60, 35, .22); background: transparent; color: #493727; font-size: var(--ui-type-emphasis); font-weight: 500; }
.preview-mode .route-card .phase { color: #7d5726; }
.preview-mode .route-card strong { color: #37271b; }
.preview-mode .route-arrow { grid-column: 1 / span 2; color: #5d4937; }
.preview-mode .route-detail-link { display: block; grid-row: 1 / span 2; grid-column: 3; align-self: center; padding: 7px 13px; border: 1px solid #79513b; background: linear-gradient(#66291c, #38140f); color: #e7cfaa; font: 11px var(--ui-font-display); text-decoration: none; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .45); }
.preview-mode .route-progress { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 12px; }
.preview-mode .route-progress-item { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; color: #766957; text-align: center; }
.preview-mode .route-progress-item::before { position: absolute; top: 17px; left: -50%; width: 100%; height: 1px; background: #8e7b5e; content: ""; }
.preview-mode .route-progress-item:first-child::before { display: none; }
.preview-mode .route-progress-marker { z-index: 1; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #867255; border-radius: 50%; background: var(--ui-parchment); color: #776448; font-size: 11px; box-shadow: inset 0 0 0 3px rgba(72, 53, 31, .13); }
.preview-mode .route-progress-item.active .route-progress-marker { border-color: #a75d1e; background: #a8641f; color: #fff4d9; box-shadow: 0 0 11px rgba(168, 100, 31, .42); }
.preview-mode .route-progress-item.completed .route-progress-marker { border-color: #547044; background: #405b35; color: #e8f3dc; }
.preview-mode .route-progress-item small { color: #817563; font-size: var(--ui-type-supporting); font-weight: 500; }
.preview-mode .route-progress-item strong { max-width: 100px; color: #433426; font: 600 var(--ui-type-meta) var(--ui-font-display); }

.preview-mode .view-surface { display: grid; min-height: 0; gap: 12px; }
.preview-mode[data-site-view="route"] .view-surface { display: none; }
.preview-mode[data-site-view="skills"] .view-surface { grid-template-columns: minmax(620px, 1.55fr) minmax(360px, .75fr); }
.preview-mode[data-site-view="gear"] .view-surface,
.preview-mode[data-site-view="passives"] .view-surface { grid-template-columns: minmax(0, 1fr); }
.preview-mode .build-card, .preview-mode .loadout-card { position: relative; margin: 0; padding: 0; overflow: hidden; border: 1px solid #73532f; outline: 1px solid rgba(0, 0, 0, .82); box-shadow: var(--ui-frame-inset), var(--ui-frame-shadow); }
.preview-mode .build-card::before, .preview-mode .loadout-card::before { position: absolute; inset: 5px; z-index: 3; pointer-events: none; border: 1px solid rgba(197, 150, 79, .1); content: ""; }
.preview-mode .build-card { display: flex; flex-direction: column; height: 100%; background: repeating-linear-gradient(105deg, rgba(255, 255, 255, .009) 0 1px, transparent 1px 5px), radial-gradient(circle at 20% 10%, rgba(117, 80, 35, .07), transparent 32%), #100e0b; }
.preview-mode .section-title { min-height: 49px; padding: 12px 24px; border-bottom: 1px solid rgba(197, 150, 79, .24); background: linear-gradient(rgba(255, 255, 255, .018), transparent); }
.preview-mode .build-card h2, .preview-mode .passive-card h2 { color: #d3a862; text-shadow: 0 1px #000; }
.preview-mode .build-focus { display: none; }
.preview-mode .support-priority { margin: 0; padding: 9px 24px; border: 0; border-bottom: 1px solid rgba(197, 150, 79, .18); background: rgba(126, 82, 30, .08); color: #d7b978; font-size: var(--ui-type-supporting); font-weight: 600; }
.preview-mode .level-range { color: #cdb4e4; }
.preview-mode .skill-list { flex: 1; min-height: 0; gap: 0; margin: 0; overflow-y: auto; scrollbar-color: #6d5432 #11100e; scrollbar-width: thin; }
.preview-mode .skill-setup { position: relative; min-height: 113px; padding: 27px 27px 13px; border-top: 1px solid rgba(197, 150, 79, .16); background: linear-gradient(90deg, rgba(197, 150, 79, .04), transparent 56%); }
.preview-mode .skill-setup:first-child { border-top: 0; }
.preview-mode .main-gem { position: relative; flex-basis: 210px; }
.preview-mode .gem-stone { border-color: #a6824a; background: #17130e; box-shadow: inset 0 0 0 3px #12100d, 0 0 0 1px #5d4528, 0 0 10px rgba(197, 150, 79, .15); }
.preview-mode .main-gem .gem-stone { width: 58px; height: 58px; border-width: 2px; }
.preview-mode .gem-icon { width: calc(100% - 7px); height: calc(100% - 7px); border-radius: 50%; filter: saturate(.96) contrast(1.05); }
.preview-mode .gem-fallback { background: radial-gradient(circle at 35% 25%, #bad7c7 0 6%, #3b816b 28%, #173f33 66%, #081712); font: 16px var(--ui-font-display); }
.preview-mode .gem-label strong { color: #eee0c6; font: 600 18px var(--ui-font-display); }
.preview-mode .gem-label small { max-width: 138px; margin-top: 4px; color: #a09584; font-size: var(--ui-type-supporting); font-weight: 500; }
.preview-mode .socket-link { flex-basis: 28px; background: linear-gradient(90deg, #a27c42, #554631); }
.preview-mode .support-gems { position: relative; flex: 1; flex-wrap: nowrap; justify-content: flex-start; gap: clamp(12px, 1.6vw, 26px); }
.preview-mode .support-gem { min-width: 68px; color: #d2c5b0; font-size: var(--ui-type-supporting); font-weight: 500; }
.preview-mode .support-priority-badge { top: -9px; right: -7px; padding: 2px 5px; border-color: #a8732d; background: #5b3213; color: #f6d590; font-size: 9px; box-shadow: 0 1px 5px rgba(0, 0, 0, .55); }
.preview-mode .support-gem .gem-stone { width: 42px; height: 42px; border-width: 2px; }
.preview-mode .gem-role { position: absolute; top: -18px; left: 0; padding-left: 10px; color: #b48b5a; font-size: var(--ui-type-caption); font-weight: 600; letter-spacing: .08em; }
.preview-mode .gem-role::before { position: absolute; top: 50%; left: 0; width: 5px; height: 5px; border: 1px solid #8f673a; content: ""; transform: translateY(-50%) rotate(45deg); }
.preview-mode .support-role { top: -18px; }
.preview-mode .no-support { color: #756b5e; }
.preview-mode .skill-note { min-height: 35px; padding: 9px 22px; border-top: 1px solid rgba(197, 150, 79, .14); color: #a2947d; font-size: var(--ui-type-caption); font-weight: 500; }

.preview-mode .gear-card { background: repeating-linear-gradient(0deg, rgba(79, 58, 34, .025) 0 1px, transparent 1px 4px), var(--ui-parchment-light); color: var(--ui-parchment-ink); }
.preview-mode .gear-card h2 { color: #56391c; }
.preview-mode .gear-stage-title { max-width: 250px; overflow: hidden; color: #765a34; font-size: var(--ui-type-caption); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.preview-mode .gear-card .compact-list { display: grid; gap: 0; margin: 0; }
.preview-mode .gear-card .compact-list li { grid-template-columns: 36px 48px minmax(0, 1fr) 84px; min-height: 48px; padding: 8px 15px; border-bottom: 1px solid rgba(75, 56, 34, .26); color: #392d23; font-size: var(--ui-type-meta); font-weight: 500; }
.preview-mode .gear-card .compact-list li.gear-item-emphasis { border-left: 4px solid #b96921; background: rgba(183, 98, 27, .11); }
.preview-mode .gear-icon { width: 31px; height: 31px; border: 1px solid #6e4f2d; background: linear-gradient(#31271c, #17120d); color: #d3ab68; font-size: 16px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .5); }
.preview-mode .gear-icon img { width: calc(100% - 3px); height: calc(100% - 3px); max-width: 100%; max-height: 100%; filter: saturate(.82) contrast(1.08); }
.preview-mode .gear-category { font: 600 12px var(--ui-font-display); }
.preview-mode .gear-description { line-height: 1.45; white-space: normal; }
.preview-mode .gear-action { padding: 5px 8px; border: 1px solid #6d5235; background: linear-gradient(#28231c, #14110d); color: #d1b681; font: 600 var(--ui-type-caption) var(--ui-font-display); text-align: center; box-shadow: inset 0 0 0 1px #090806; }
.preview-mode .gear-more { border-top: 1px solid rgba(75, 56, 34, .2); color: #4f4033; }
.preview-mode .gear-more summary { padding: 7px 15px; color: #765225; font-size: var(--ui-type-caption); font-weight: 500; cursor: pointer; }
.preview-mode .gear-card { overflow-y: auto; }
.preview-mode .gear-card h3, .preview-mode .gear-card #combat-text, .preview-mode .gear-card .regex { margin-right: 16px; margin-left: 16px; }
.preview-mode .gear-card #combat-text { color: #4f4033; font-size: var(--ui-type-supporting); font-weight: 500; line-height: 1.45; }
.preview-mode .gear-card .regex { margin-bottom: 14px; border: 1px solid rgba(52, 91, 46, .22); background: #132015; color: #8fcf89; }
.preview-mode .filter-panel { padding: 18px 0; }
.preview-mode .filter-note { margin: 7px 16px 0; color: #725d47; font-size: var(--ui-type-supporting); }

.preview-mode .combat-card { padding: 0; background: repeating-linear-gradient(0deg, rgba(79, 58, 34, .025) 0 1px, transparent 1px 4px), var(--ui-parchment-light); color: var(--ui-parchment-ink); }
.preview-mode .combat-card h2 { color: #56391c; }
.preview-mode .combat-card #combat-text { padding: 24px; color: #46372a; font-size: 16px; font-weight: 600; line-height: 1.75; }

.preview-mode .passive-card { display: flex; flex-direction: column; background: repeating-linear-gradient(105deg, rgba(255, 255, 255, .009) 0 1px, transparent 1px 5px), #100e0b; }
.preview-mode .passive-summary { margin: 0; padding: 9px 18px 4px; border: 0; background: transparent; color: #d0bea2; font-size: var(--ui-type-supporting); font-weight: 500; }
.preview-mode .passive-tree-preview { display: block; flex: 1; min-height: 145px; padding: 0 12px; background: radial-gradient(ellipse at 50% 50%, rgba(197, 150, 79, .075), transparent 60%); }
.preview-mode .passive-tree-preview svg { width: 100%; height: 100%; overflow: visible; }
.preview-mode .passive-edge { stroke: #987b48; stroke-width: 2; filter: drop-shadow(0 0 2px rgba(174, 129, 58, .2)); }
.preview-mode .passive-edge.dormant { stroke: #5a5142; stroke-width: 1.3; opacity: .72; }
.preview-mode .passive-edge.weapon-1 { stroke: #6d9b50; }
.preview-mode .passive-edge.weapon-2 { stroke: #a4774e; }
.preview-mode .passive-node circle { fill: #24211a; stroke: #987a4a; stroke-width: 3; filter: drop-shadow(0 0 3px rgba(168, 124, 55, .25)); }
.preview-mode .passive-node.dormant circle { fill: #1b1915; stroke: #615848; stroke-width: 2; opacity: .85; }
.preview-mode .passive-node.lane-0 circle { fill: #4c5e2d; stroke: #8ead50; }
.preview-mode .passive-node.lane-1 circle { fill: #31542c; stroke: #72a05b; }
.preview-mode .passive-node.lane-2 circle { fill: #4c3728; stroke: #a6784d; }
.preview-mode .passive-node.is-current circle { fill: #5c431f; stroke: #d0a04a; stroke-width: 4; filter: drop-shadow(0 0 7px rgba(202, 151, 64, .58)); }
.preview-mode .passive-node text { fill: #c4b59d; font-size: 9px; font-weight: 500; }
.preview-mode .passive-node-icon { fill: #f0cc7b !important; font-size: 12px !important; }
.preview-mode .tree-actions { gap: 3px; }
.preview-mode .tree-version { color: #79b18a; }
.preview-mode .tree-link { color: #d2a75d; font-size: 9px; }
.preview-mode .passive-legend { display: flex; align-items: center; gap: 22px; min-height: 27px; padding: 3px 18px 7px; border-top: 1px solid rgba(197, 150, 79, .13); color: #817869; font-size: 8px; }
.preview-mode .passive-legend span { display: flex; align-items: center; gap: 6px; }
.preview-mode .passive-legend i { width: 10px; height: 10px; border: 1px solid #6a6152; border-radius: 50%; background: #24211b; }
.preview-mode .passive-legend i.allocated { border-color: #729051; background: #40582f; }
.preview-mode .passive-legend i.current { border-color: #d09b47; background: #6b4920; box-shadow: 0 0 5px rgba(208, 155, 71, .4); }
.preview-mode .tree-note, .preview-mode .connection, .preview-mode footer { display: none; }

@media (max-width: 1280px) {
  body.preview-mode { height: auto; overflow: auto; }
  .preview-mode .overlay-shell { height: auto; min-height: 100vh; overflow: visible; }
  .preview-mode .preview-inner { grid-template-columns: 260px 1fr auto; }
  .preview-mode .main-navigation { gap: 16px; }
  .preview-mode .page-content { grid-template-columns: 250px minmax(0, 1fr); height: auto; min-height: calc(100vh - var(--ui-header-height)); }
  .preview-mode .area-directory { height: calc(100vh - 334px); }
  .preview-mode .guide-workspace { display: block; overflow: visible; }
  .preview-mode .task-card { grid-template-columns: 1fr; height: auto; min-height: 225px; margin-top: 12px; }
  .preview-mode .view-surface,
  .preview-mode[data-site-view="skills"] .view-surface { grid-template-columns: 1fr; grid-template-rows: auto; margin-top: 12px; }
  .preview-mode .build-card { height: auto; }
  .preview-mode .skill-list { max-height: none; overflow: visible; }
}

@media (max-width: 900px) {
  body.preview-mode { min-width: 0; }
  .preview-mode .preview-controls { height: auto; padding: 12px 16px; }
  .preview-mode .preview-inner { grid-template-columns: 1fr auto; }
  .preview-mode .main-navigation { display: none; }
  .preview-mode .header-version { display: none; }
  .preview-mode .page-content { display: block; min-height: 0; }
  .preview-mode .route-directory { border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .preview-mode .directory-heading { display: none; }
  .preview-mode .guide-directory-list { grid-template-columns: repeat(3, minmax(160px, 1fr)); padding-top: 12px; overflow-x: auto; }
  .preview-mode .act-directory { padding-top: 12px; }
  .preview-mode .area-directory { display: flex; height: auto; padding: 8px 12px 12px; overflow-x: auto; }
  .preview-mode .area-directory::before { display: none; }
  .preview-mode .area-button { flex: 0 0 180px; }
  .preview-mode .guide-workspace { padding: 16px 12px; }
  .preview-mode .topbar { align-items: flex-start; }
  .preview-mode .level-card { grid-template-columns: auto auto auto; min-width: 0; }
  .preview-mode .level-card .level-icon, .preview-mode .level-card i { display: none; }
  .preview-mode .skill-setup { align-items: flex-start; flex-wrap: wrap; }
  .preview-mode .main-gem { flex-basis: 190px; }
  .preview-mode .support-gems { flex-wrap: wrap; }
}

.guide-site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0 48px;
  border-top: 1px solid rgba(197, 150, 79, .22);
  color: #817767;
  font-size: 12px;
  line-height: 1.7;
}
.guide-site-footer p { max-width: 760px; margin: 0; }
.guide-site-footer nav { display: flex; gap: 18px; }
.guide-site-footer a,
.main-navigation a { color: #c4a76f; text-decoration: none; }
.guide-site-footer a:hover,
.main-navigation a:hover { color: #f0d49d; }

.info-shell {
  width: min(880px, calc(100% - 40px));
  margin: 0 auto;
  padding: 54px 0 90px;
  color: #d8c9b0;
  font-size: 16px;
  line-height: 1.8;
}
.info-brand { display: inline-block; margin-bottom: 54px; color: #cfa660; text-decoration: none; }
.info-shell h1 { margin: 12px 0 24px; color: #efdbb7; font: 600 clamp(38px, 6vw, 68px) var(--ui-font-display); }
.info-shell h2 { margin: 0 0 14px; color: #dfbd7e; font: 600 25px var(--ui-font-display); }
.info-lead { max-width: 760px; color: #c5b79f; font-size: 19px; }
.info-shell section { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(197, 150, 79, .2); }
.info-shell li { margin: 8px 0; }
.info-shell a { color: #ddb96f; text-underline-offset: 4px; }
.source-list a + a { margin-left: 4px; }
.info-actions { display: flex; gap: 14px; margin-top: 50px; }
.info-actions a { padding: 9px 14px; border: 1px solid #73532f; background: #17130f; text-decoration: none; }

@media (max-width: 900px) {
  .guide-site-footer { display: grid; width: min(100% - 32px, 680px); }
  .guide-site-footer nav { flex-wrap: wrap; }
}

/* Guide library and complete guide detail */
.preview-mode .main-navigation span {
  position: relative;
  display: grid;
  place-items: center;
  color: #ae9c82;
  font: 500 17px var(--ui-font-display);
}

.preview-mode .main-navigation span.active { color: #e0c89e; }
.preview-mode .main-navigation span.active::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ui-gold), transparent);
  box-shadow: 0 0 8px rgba(197, 150, 79, .65);
  content: "";
}

.preview-mode .area-directory { height: calc(100% - 168px); }

.preview-mode .guide-workspace {
  display: block;
  overflow-y: auto;
  scrollbar-color: #6d5432 #11100e;
  scrollbar-width: thin;
}

.preview-mode .task-card { margin-top: 12px; }
.preview-mode .view-surface {
  display: grid;
  grid-template-columns: minmax(620px, 1.4fr) minmax(430px, .9fr);
  grid-template-areas:
    "skills combat"
    "skills gear"
    "skills passive";
  align-items: start;
  gap: 12px;
  margin-top: 12px;
}

.preview-mode .skill-panel { grid-area: skills; }
.preview-mode .combat-card { grid-area: combat; }
.preview-mode .gear-card { grid-area: gear; }
.preview-mode .passive-card { grid-area: passive; }
.preview-mode .build-card { height: auto; }
.preview-mode .skill-list { max-height: none; overflow: visible; }
.preview-mode .route-detail-link { display: none; }

.preview-mode .passive-visual {
  display: grid;
  min-height: 210px;
  margin: 10px 18px 18px;
  overflow: hidden;
  border: 1px solid rgba(197, 150, 79, .28);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(197, 150, 79, .09), transparent 62%),
    #090806;
}

.preview-mode .passive-visual figure { margin: 0; }
.preview-mode .passive-visual a { display: block; min-height: 0; }
.preview-mode .passive-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
}

.preview-mode .passive-visual figcaption {
  padding: 10px 14px;
  border-top: 1px solid rgba(175, 124, 47, 0.3);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.preview-mode .passive-source-placeholder {
  display: grid;
  place-content: center;
  gap: 9px;
  padding: 28px;
  color: #9f927e;
  text-align: center;
}

.preview-mode .passive-source-placeholder::before {
  color: #c79a50;
  font-size: 28px;
  content: "✦";
}

.preview-mode .passive-source-placeholder strong {
  color: #dbc293;
  font: 600 17px var(--ui-font-display);
}

.preview-mode .passive-source-placeholder p {
  max-width: 380px;
  font-size: var(--ui-type-supporting);
  line-height: 1.6;
}

body.preview-mode.guide-list-page { min-width: 900px; height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
.guide-list-page .overlay-shell { height: auto; min-height: 100vh; overflow: visible; }
.guide-list-page .preview-controls { position: sticky; top: 0; z-index: 10; }
.guide-list-page .guide-count {
  justify-self: end;
  padding: 9px 13px;
  border: 1px solid rgba(80, 139, 98, .25);
  background: rgba(37, 83, 53, .16);
  color: #79ae88;
  font-size: 11px;
}

.guide-library {
  width: min(1420px, calc(100% - 80px));
  margin: 0 auto;
  padding: 72px 0 96px;
}

.library-heading { max-width: 760px; }
.guide-list-page .library-heading .eyebrow { color: #a87739; font-size: 11px; }
.guide-list-page .library-heading h1 {
  margin-top: 12px;
  color: #efdbb7;
  font-size: clamp(38px, 4vw, 58px);
}
.library-heading p {
  max-width: 680px;
  margin-top: 14px;
  color: #a79985;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
}

.guide-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}

.guide-card {
  position: relative;
  display: grid;
  min-height: 390px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid #684a2a;
  background:
    linear-gradient(145deg, rgba(197, 150, 79, .09), transparent 42%),
    repeating-linear-gradient(105deg, rgba(255, 255, 255, .01) 0 1px, transparent 1px 5px),
    #100e0b;
  color: #d8c9b0;
  text-decoration: none;
  box-shadow: var(--ui-frame-inset), 0 16px 36px rgba(0, 0, 0, .34);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.guide-card::after {
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(197, 150, 79, .13);
  content: "";
}

.guide-card:hover {
  border-color: #bd8240;
  box-shadow: var(--ui-frame-inset), 0 22px 44px rgba(0, 0, 0, .44), 0 0 22px rgba(164, 102, 39, .12);
  transform: translateY(-3px);
}

.guide-card-number {
  position: absolute;
  top: 21px;
  right: 24px;
  color: rgba(224, 190, 132, .24);
  font: 700 42px var(--ui-font-number);
}

.guide-card-tag {
  justify-self: start;
  padding: 5px 9px;
  border: 1px solid #80562d;
  background: rgba(110, 57, 25, .36);
  color: #e2bd79;
  font-size: 11px;
  font-weight: 700;
}

.guide-card h2 {
  align-self: end;
  margin-top: 56px;
  color: #efdbb7;
  font-size: 26px;
  line-height: 1.35;
}
.guide-card-archetype { margin-top: 8px; color: #b38b55; font-size: 13px; font-weight: 600; }
.guide-card-summary { margin-top: 18px; color: #b7ab98; font-size: 14px; font-weight: 500; line-height: 1.7; }
.guide-card-meta { display: grid; gap: 8px; align-self: end; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(197, 150, 79, .18); color: #817767; font-size: 11px; }
.guide-card-meta span { display: flex; justify-content: space-between; gap: 12px; }
.guide-card-meta strong { color: #caba9f; font-weight: 600; }
.guide-card-action { justify-self: end; margin-top: 22px; color: #d6a85e; font: 600 13px var(--ui-font-display); }
.guide-card.accent-ember { border-color: #77402d; }
.guide-card.accent-ember .guide-card-tag { border-color: #934e32; background: rgba(126, 48, 29, .38); color: #e6a47d; }
.guide-card.accent-teal { border-color: #3e675f; }
.guide-card.accent-teal .guide-card-tag { border-color: #477b6f; background: rgba(27, 91, 77, .28); color: #91c9ba; }

.extended-guide-panel {
  margin-top: 14px;
  border: 1px solid #70512e;
  background:
    linear-gradient(145deg, rgba(197, 150, 79, .07), transparent 38%),
    repeating-linear-gradient(105deg, rgba(255, 255, 255, .008) 0 1px, transparent 1px 5px),
    #100e0b;
  color: #d7cab4;
  box-shadow: var(--ui-frame-inset), 0 14px 36px rgba(0, 0, 0, .3);
}

.extended-guide-panel[hidden] { display: none; }
.extended-guide-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 22px 26px; border-bottom: 1px solid rgba(197, 150, 79, .28); }
.extended-guide-heading h2 { margin-top: 4px; color: #e2c68f; font: 600 24px var(--ui-font-display); }
.extended-guide-heading p { max-width: 670px; color: #a69a87; font-size: 13px; font-weight: 500; line-height: 1.65; }
.extended-guide-actions { display: grid; justify-items: end; gap: 12px; }
.primary-tool-link { padding: 9px 13px; border: 1px solid #95652d; background: linear-gradient(#3c2612, #1d1209); color: #efcb83; font: 600 12px var(--ui-font-display); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75); }
.primary-tool-link:hover { border-color: #c28a43; color: #ffe0a0; }

.endgame-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 26px; list-style: none; }
.endgame-phase { position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0 16px; }
.endgame-phase:not(:last-child)::after { position: absolute; top: 19px; right: -8px; width: 16px; height: 1px; background: #8e6735; content: ""; }
.endgame-marker { justify-self: start; padding: 6px 10px; border: 1px solid #986d34; background: #362515; color: #f1ca81; font: 700 12px var(--ui-font-number); }
.endgame-phase-body { margin-top: 12px; padding: 18px; border: 1px solid rgba(197, 150, 79, .22); background: rgba(0, 0, 0, .24); }
.endgame-phase-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.endgame-phase-heading h3 { margin: 0; color: #e3cfaa; font: 600 18px var(--ui-font-display); }
.endgame-phase-heading span { color: #9c815c; font-size: 11px; }
.endgame-summary { min-height: 72px; margin-top: 12px; color: #c6b9a3; font-size: 14px; font-weight: 600; line-height: 1.7; }
.endgame-details { display: grid; grid-template-columns: 46px 1fr; gap: 8px 10px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(197, 150, 79, .16); font-size: 12px; line-height: 1.65; }
.endgame-details dt { color: #c7974f; font-weight: 700; }
.endgame-details dd { margin: 0; color: #9f9586; font-weight: 500; }
.endgame-passive { margin: 16px 0 0; }
.endgame-passive a { display: block; max-height: 260px; overflow: hidden; border: 1px solid rgba(197, 150, 79, .25); background: #070605; }
.endgame-passive img { display: block; width: 100%; max-height: 260px; object-fit: contain; }

.craft-workbench { padding: 26px; }
.craft-target, .craft-process, .craft-calculator, .craft-markets { border: 1px solid rgba(197, 150, 79, .24); background: rgba(0, 0, 0, .22); }
.craft-target-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; padding: 20px 22px; border-bottom: 1px solid rgba(197, 150, 79, .2); }
.craft-source-label, .craft-kicker { color: #9b7846; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.craft-target-heading h3, .craft-tools h3 { margin-top: 5px; color: #ebd4a8; font: 600 22px var(--ui-font-display); }
.craft-reliability-legend { display: flex; flex-wrap: wrap; justify-content: end; gap: 10px 16px; color: #948979; font-size: 10px; font-weight: 600; }
.craft-reliability-legend span { display: flex; align-items: center; gap: 5px; }
.craft-reliability-legend i { width: 8px; height: 8px; border-radius: 50%; background: #668c59; }
.craft-reliability-legend .probability-random i { background: #b47b35; }
.craft-reliability-legend .probability-unknown i { background: #87574e; }

.craft-specimen { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(620px, 1.55fr); gap: 24px; padding: 22px; }
.craft-item-image { display: flex; flex-direction: column; margin: 0; border: 1px solid #75532b; background: #050403; }
.craft-item-image a { display: grid; min-height: 310px; place-items: center; padding: 14px; }
.craft-item-image img { display: block; max-width: 100%; max-height: 390px; object-fit: contain; }
.craft-item-image figcaption { padding: 10px 13px; border-top: 1px solid rgba(197, 150, 79, .2); color: #988a76; font-size: 11px; line-height: 1.5; }
.craft-breakdown { display: grid; align-content: start; gap: 16px; }
.craft-base { padding: 16px 18px; border: 1px solid rgba(197, 150, 79, .22); background: rgba(92, 57, 24, .13); }
.craft-base h4 { margin: 5px 0 0; color: #e5c890; font: 600 18px var(--ui-font-display); }
.craft-requirements { display: grid; gap: 6px; margin: 12px 0 0; padding-left: 18px; color: #bcb09e; font-size: 12px; font-weight: 500; line-height: 1.55; }
.affix-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.affix-group { border: 1px solid rgba(197, 150, 79, .2); }
.affix-group > h4 { margin: 0; padding: 9px 12px; border-bottom: 1px solid rgba(197, 150, 79, .18); color: #b79054; font-size: 11px; letter-spacing: .12em; }
.affix-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 61px; padding: 9px 12px; border-bottom: 1px solid rgba(197, 150, 79, .1); }
.affix-row:last-child { border-bottom: 0; }
.affix-row strong, .affix-row span { display: block; }
.affix-row strong { color: #d9ccb5; font-size: 12px; line-height: 1.45; }
.affix-row div > span { margin-top: 3px; color: #918777; font-size: 10px; line-height: 1.4; }
.affix-row .affix-status { flex: 0 0 auto; padding: 3px 6px; border: 1px solid #6d5c42; color: #a89a83; font-size: 9px; }
.affix-row.status-locked .affix-status { border-color: #4f7f5a; color: #82b38a; }
.affix-row.status-random .affix-status { border-color: #865544; color: #d08a73; }

.craft-process { margin-top: 18px; }
.craft-section-title { padding: 16px 20px; border-bottom: 1px solid rgba(197, 150, 79, .22); color: #dec18b; font: 600 19px var(--ui-font-display); }
.craft-steps { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; }
.craft-step { display: grid; grid-template-columns: 48px 1fr; min-width: 0; border-bottom: 1px solid rgba(197, 150, 79, .13); }
.craft-step:nth-child(odd) { border-right: 1px solid rgba(197, 150, 79, .13); }
.craft-step-number { display: grid; place-items: start center; padding-top: 17px; border-right: 1px solid rgba(197, 150, 79, .14); color: #a4783d; font: 700 13px var(--ui-font-number); }
.craft-step-body { min-width: 0; padding: 15px 16px 17px; }
.craft-step-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.craft-step-heading h4 { margin: 0; color: #d9c6a4; font-size: 14px; line-height: 1.45; }
.probability-badge { flex: 0 0 auto; padding: 3px 6px; border: 1px solid #55754d; color: #83a977; font-size: 9px; font-weight: 700; }
.probability-badge.probability-random { border-color: #835e32; color: #c99854; }
.probability-badge.probability-unknown { border-color: #774b43; color: #c98275; }
.craft-materials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.material-chip { padding: 4px 7px; border: 1px solid rgba(111, 145, 91, .34); background: rgba(54, 83, 42, .19); color: #9dc08d; font-size: 10px; text-decoration: none; }
a.material-chip:hover { border-color: #7caa6c; color: #c1dda9; }
.craft-step-result, .craft-step-probability { margin-top: 9px; color: #a79b89; font-size: 11px; font-weight: 500; line-height: 1.55; }
.craft-step-result strong { color: #c4ad84; }
.craft-step-probability strong { color: #a77c54; }

.craft-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.craft-calculator, .craft-markets { padding: 20px; }
.craft-tools h3 { font-size: 19px; }
.craft-tool-note { margin-top: 8px; color: #958a79; font-size: 11px; font-weight: 500; line-height: 1.6; }
.cost-rows { display: grid; gap: 7px; margin-top: 16px; }
.cost-row { display: grid; grid-template-columns: minmax(150px, 1fr) 66px 14px 92px; align-items: center; gap: 7px; }
.cost-material-name { color: #bfb19a; font-size: 11px; font-weight: 600; }
.cost-material-name small { display: block; margin-top: 2px; color: #8c6750; font-size: 9px; }
.cost-row input { min-width: 0; height: 32px; padding: 0 8px; border: 1px solid #655038; background: #0b0907; color: #e3cfaa; font: 600 11px var(--ui-font-number); }
.cost-symbol { color: #796c59; text-align: center; }
.cost-total { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(197, 150, 79, .2); color: #a99b86; font-size: 12px; }
.cost-total strong { color: #edc97d; font: 700 18px var(--ui-font-number); }
.market-links { display: grid; gap: 8px; margin-top: 16px; }
.market-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 10px 11px; border: 1px solid rgba(197, 150, 79, .15); background: rgba(0, 0, 0, .2); }
.market-row strong, .market-row code { display: block; }
.market-row strong { color: #c9b18a; font-size: 11px; }
.market-row code { max-width: 520px; margin-top: 4px; overflow-wrap: anywhere; color: #8fb285; font-size: 9px; line-height: 1.45; }
.market-actions { display: flex; gap: 6px; }
.market-actions button, .market-actions a { padding: 7px 9px; border: 1px solid #73532f; background: #17120d; color: #c4a672; font-size: 10px; text-decoration: none; cursor: pointer; }
.market-actions button:hover, .market-actions a:hover { border-color: #ae7d3e; color: #efd298; }

body.preview-mode.crafting-page { min-width: 980px; height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
.crafting-page-shell { min-height: 100vh; background: radial-gradient(ellipse at 50% 0%, rgba(117, 81, 36, .1), transparent 40%); }
.crafting-page .preview-controls { position: sticky; top: 0; z-index: 10; }
.crafting-page .preview-inner { grid-template-columns: 330px 1fr auto; }
.crafting-locale-control select { width: 116px; padding: 9px 30px 9px 12px; border: 1px solid #5b4023; border-radius: 2px; background: linear-gradient(#1c1812, #0d0b08); color: #dec9a5; font: 13px var(--ui-font-display); outline: none; }
.crafting-page-content { width: min(1500px, calc(100% - 64px)); margin: 0 auto; padding: 46px 0 90px; }
.crafting-page-intro { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 26px; padding: 0 4px 24px; border-bottom: 1px solid rgba(197, 150, 79, .25); }
.crafting-page-intro h1 { margin-top: 7px; color: #efd9b1; font: 600 clamp(34px, 4vw, 54px) var(--ui-font-display); }
.crafting-page-intro p { max-width: 700px; margin-top: 10px; color: #a79b88; font-size: 14px; font-weight: 500; line-height: 1.7; }
.crafting-guide-context { display: grid; min-width: 280px; justify-items: end; gap: 7px; color: #8f826f; font-size: 11px; }
.crafting-guide-context strong { color: #d6bd91; font-size: 14px; }
.crafting-guide-context a { color: #82b28a; text-decoration: none; }
.crafting-empty { padding: 60px; border: 1px solid #70512e; color: #ad9f8a; text-align: center; }

@media (max-width: 1280px) {
  .preview-mode .view-surface { grid-template-columns: 1fr; grid-template-areas: "skills" "combat" "gear" "passive"; }
  .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .endgame-timeline, .craft-steps { grid-template-columns: 1fr; }
  .endgame-phase { padding-bottom: 18px; }
  .endgame-phase:not(:last-child)::after { display: none; }
  .craft-specimen, .craft-tools { grid-template-columns: 1fr; }
  .craft-step:nth-child(odd) { border-right: 0; }
}

@media (max-width: 900px) {
  body.preview-mode.guide-list-page { min-width: 0; }
  .guide-list-page .preview-inner { grid-template-columns: 1fr auto; }
  .guide-list-page .guide-count { grid-column: 2; }
  .guide-library { width: min(100% - 32px, 680px); padding-top: 44px; }
  .guide-cards { grid-template-columns: 1fr; }
  .extended-guide-heading, .craft-target-heading { align-items: start; flex-direction: column; }
  .extended-guide-actions { justify-items: start; }
  .craft-workbench, .endgame-timeline { padding: 16px; }
  .affix-groups { grid-template-columns: 1fr; }
  .cost-row { grid-template-columns: minmax(120px, 1fr) 58px 12px 78px; }
  .market-row { grid-template-columns: 1fr; }
  body.preview-mode.crafting-page { min-width: 0; }
  .crafting-page .preview-inner { grid-template-columns: 1fr auto; }
  .crafting-page .main-navigation { display: none; }
  .crafting-page-content { width: min(100% - 28px, 680px); padding-top: 28px; }
  .crafting-page-intro { align-items: start; flex-direction: column; }
  .crafting-guide-context { min-width: 0; justify-items: start; }
}