:root {
  --bg-a: #081326;
  --bg-b: #1c0d20;
  --card-bg: rgba(7, 11, 21, 0.86);
  --line: rgba(255, 200, 120, 0.26);
  --txt: #f4ead6;
  --txt-dim: #bcae90;
  --accent: #d6a345;
  --accent-blue: #79a3ff;
  --rare: #f7d984;
  --magic: #8ba7ff;
  --normal: #d4d4d4;
  --unique: #d8a56f;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--txt);
  font-family: "Spectral", "Garamond", "Palatino Linotype", serif;
  min-height: 100vh;
  background: radial-gradient(circle at 8% 20%, #1b2a4a, transparent 40%),
    radial-gradient(circle at 90% 8%, #402022, transparent 45%),
    linear-gradient(145deg, var(--bg-a), var(--bg-b));
}

body.modal-open {
  overflow: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Cinzel", "Book Antiqua", "Palatino Linotype", serif;
  letter-spacing: 0.04em;
}

.bg-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #fff 1px, transparent 2px);
  background-size: 3px 3px;
}

.app-shell {
  position: relative;
  z-index: 2;
  width: min(1240px, 94vw);
  margin: 28px auto 36px;
}

.layout {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-chip {
  border: 1px solid rgba(176, 137, 81, 0.5);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(6, 10, 19, 0.8);
  color: #f0dfbe;
  white-space: nowrap;
  max-width: 45vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-nav {
  display: flex;
  gap: 10px;
  margin: 14px 0 16px;
}

.tab-btn {
  border: 1px solid rgba(183, 139, 74, 0.55);
  background: rgba(7, 11, 21, 0.85);
  color: #d5bd95;
  border-radius: 10px;
  padding: 10px 16px;
  font-family: "Cinzel", "Book Antiqua", serif;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.tab-btn.active {
  background: linear-gradient(120deg, #5f390d, #a4712c);
  color: #fff2d9;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.panel {
  border: 1px solid var(--line);
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  padding: 20px;
}

.panel-items {
  min-height: 560px;
}

.subtitle {
  margin-top: 10px;
  margin-bottom: 16px;
  color: var(--txt-dim);
}

label {
  display: block;
  margin-top: 10px;
  margin-bottom: 6px;
  color: #d5c09f;
  font-size: 0.94rem;
}

textarea,
input {
  width: 100%;
  border: 1px solid rgba(200, 161, 93, 0.45);
  border-radius: 10px;
  background: rgba(2, 5, 12, 0.8);
  color: #f6efe2;
  padding: 10px 12px;
  font-family: "Consolas", "Menlo", monospace;
}

select {
  border: 1px solid rgba(200, 161, 93, 0.45);
  border-radius: 10px;
  background: rgba(2, 5, 12, 0.8);
  color: #f6efe2;
  padding: 10px 12px;
  font-family: "Consolas", "Menlo", monospace;
}

textarea {
  min-height: 150px;
  resize: vertical;
}

textarea.notes {
  min-height: 90px;
}

.actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.btn {
  border: 1px solid rgba(219, 160, 78, 0.65);
  background: rgba(16, 20, 32, 0.9);
  color: #efdcbe;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.btn.primary {
  background: linear-gradient(120deg, #5f390d, #a4712c);
  color: #fff6e7;
}

.btn.small {
  padding: 8px 12px;
}

.status {
  min-height: 1.25rem;
  margin-top: 10px;
  color: var(--txt-dim);
}

.share-wrap {
  margin-top: 10px;
}

.share-wrap.hidden {
  display: none;
}

.share-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.panel-header small {
  color: var(--txt-dim);
}

.items-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.items-controls select {
  border: 1px solid rgba(197, 156, 90, 0.5);
  background: rgba(6, 10, 19, 0.85);
  color: #ebdcc0;
  border-radius: 8px;
  padding: 8px 10px;
}

.cost-to-craft-row {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 8px;
}

.preview-host {
  margin-top: 12px;
  min-height: 84px;
}

.preview-host.empty {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(214, 163, 69, 0.4);
  border-radius: 12px;
  color: var(--txt-dim);
}

.item-chip {
  position: relative;
  border: 1px solid rgba(121, 163, 255, 0.3);
  background: linear-gradient(180deg, rgba(14, 18, 30, 0.95), rgba(6, 8, 14, 0.95));
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: default;
}

.item-card-main {
  display: grid;
  gap: 10px;
}

.item-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.item-title-wrap {
  min-width: 0;
}

.item-fee {
  margin: 2px 0 0;
  color: #e4ba72;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.88rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.item-fee .fee-label {
  line-height: 1.1;
}

.item-fee .fee-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.item-art-stage {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(24, 30, 45, 0.65), rgba(11, 14, 24, 0.85));
  border: 1px solid rgba(127, 157, 214, 0.16);
  display: grid;
  place-items: center;
  min-height: 88px;
  padding: 8px;
}

.item-art-wrap {
  width: 74px;
  height: 74px;
  border: 1px solid rgba(181, 145, 85, 0.45);
  border-radius: 8px;
  background: radial-gradient(circle at 35% 25%, rgba(47, 62, 100, 0.3), rgba(5, 7, 13, 0.95));
  display: grid;
  place-items: center;
  overflow: hidden;
}

.item-art {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: none;
}

.item-art.show {
  display: block;
}

.item-art-fallback {
  font-family: "Cinzel", "Book Antiqua", serif;
  color: #e7c78f;
  font-size: 1.05rem;
}

.item-art-fallback.hidden {
  display: none;
}

.item-submitted {
  margin: 0;
  color: #b79f78;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.82rem;
  text-align: center;
}

.item-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.item-action-btn {
  border-color: rgba(201, 210, 234, 0.7);
  color: #fcfaff;
  background: rgba(18, 28, 48, 0.8);
  padding: 7px 12px;
}

.item-action-btn:hover {
  background: rgba(26, 38, 67, 0.95);
}

.item-chip.clickable {
  cursor: pointer;
}

.item-edit-btn,
.item-delete-btn {
  position: absolute;
  top: 8px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0.92;
}

.item-edit-btn {
  right: 44px;
  border: 1px solid rgba(119, 161, 225, 0.65);
  background: rgba(14, 26, 48, 0.9);
  color: #b8d7ff;
}

.item-delete-btn:hover {
  background: rgba(84, 23, 23, 0.92);
}

.item-edit-btn:hover {
  background: rgba(24, 46, 82, 0.95);
}

.item-delete-btn {
  right: 8px;
  border: 1px solid rgba(211, 109, 93, 0.6);
  background: rgba(40, 12, 12, 0.88);
  color: #ffb0a8;
}

.item-edit-btn.disabled,
.item-edit-btn:disabled,
.item-delete-btn.disabled,
.item-delete-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  border-color: rgba(138, 132, 132, 0.55);
  background: rgba(28, 24, 24, 0.7);
  color: #b89a9a;
}

.item-delete-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.item-edit-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.item-chip .item-name {
  margin: 0;
  font-family: "Cinzel", "Palatino Linotype", serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rare);
}

.item-chip .item-base {
  margin: 2px 0 8px;
  color: var(--accent-blue);
}

.item-chip .item-meta {
  margin: 0 0 2px;
  color: var(--txt-dim);
  font-size: 1rem;
}

.recent-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.recent-list .item-chip {
  margin-bottom: 0;
}

.item-chip.market-mode {
  background: linear-gradient(180deg, rgba(33, 50, 79, 0.88), rgba(27, 40, 65, 0.88));
  border-color: rgba(144, 174, 228, 0.22);
  border-radius: 8px;
  padding: 14px;
}

.item-chip.market-mode .item-head-row {
  display: block;
  padding-right: 86px;
}

.item-chip.market-mode .item-title-wrap {
  min-width: 0;
}

.item-chip.market-mode .item-art-stage {
  min-height: 240px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(18, 22, 34, 0.92), rgba(17, 20, 33, 0.95));
  border: 1px solid rgba(111, 129, 164, 0.18);
}

.item-chip.market-mode .item-art-wrap {
  width: 100%;
  height: 216px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.item-chip.market-mode .item-art {
  width: auto !important;
  height: auto !important;
  max-width: 74%;
  max-height: 95%;
  object-fit: contain;
}

.item-chip.market-mode .item-name {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.item-chip.market-mode .item-base {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.2;
}

.item-chip.market-mode .item-meta {
  font-size: 1.05rem;
}

.item-chip.market-mode .item-submitted {
  font-size: 0.88rem;
  color: #cfb892;
}

.item-chip.market-mode .item-fee {
  width: auto;
  justify-content: flex-start;
  margin-top: 2px;
  text-align: left;
}

.hidden {
  display: none !important;
}

.item-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.item-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.item-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.76);
  backdrop-filter: blur(3px);
}

.item-modal-card {
  position: relative;
  width: min(980px, 94vw);
  max-height: 88vh;
  overflow: auto;
  padding: 20px;
  border-color: rgba(163, 188, 246, 0.35);
  background: linear-gradient(170deg, rgba(11, 20, 36, 0.96), rgba(7, 12, 22, 0.96));
  transform: translateY(10px) scale(0.985);
  transition: transform 180ms ease;
}

.item-modal.show .item-modal-card {
  transform: translateY(0) scale(1);
}

.item-modal-close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(181, 192, 220, 0.55);
  border-radius: 10px;
  background: rgba(26, 34, 54, 0.9);
  color: #f0e7d4;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.item-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  grid-template-areas:
    "title title"
    "art craft";
  gap: 16px;
  align-items: start;
}

.item-modal-title-wrap h3 {
  margin: 0;
  color: #f4db98;
  text-transform: uppercase;
}

.item-modal-title-wrap {
  grid-area: title;
}

#itemModalBase {
  margin: 4px 0 0;
  color: #89b0ff;
  font-size: 1.15rem;
}

#itemModalMeta {
  margin: 8px 0 0;
  color: #cdc2a9;
}

#itemModalSubmitted {
  margin: 8px 0 0;
  color: #cfb892;
  text-transform: uppercase;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
}

.item-modal-art-stage {
  grid-area: art;
  margin-top: 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(17, 23, 35, 0.98), rgba(14, 18, 29, 0.98));
  border: 1px solid rgba(126, 144, 181, 0.28);
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 16px;
}

.item-modal-art-wrap {
  width: 100%;
  height: 280px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  cursor: zoom-in;
}

.item-modal-art {
  width: auto !important;
  height: auto !important;
  max-width: 52%;
  max-height: 80%;
  object-fit: contain;
  display: none;
}

.item-modal-art.show {
  display: block;
}

.item-modal-art-fallback {
  font-family: "Cinzel", "Book Antiqua", serif;
  color: #e7c78f;
  font-size: 2.2rem;
}

.item-modal-craft-wrap {
  grid-area: craft;
  border-radius: 10px;
  border: 1px solid rgba(134, 149, 180, 0.24);
  background: rgba(20, 28, 43, 0.72);
  padding: 14px 14px 12px;
  align-self: start;
  margin-top: 12px;
}

.item-modal-craft-wrap h4 {
  margin: 0 0 10px;
  font-family: "Cinzel", "Book Antiqua", serif;
  color: #f1d38f;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.item-modal-craft-wrap ol {
  margin: 0;
  padding-left: 20px;
  color: #e4ecff;
  display: grid;
  gap: 8px;
}

.item-modal-notes {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(133, 148, 178, 0.25);
  color: #b4caef;
  white-space: pre-wrap;
}

.panel-atlas {
  min-height: 760px;
}

.atlas-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.atlas-toolbar-left,
.atlas-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.atlas-toolbar label {
  margin: 0;
  font-size: 0.86rem;
}

.atlas-chip {
  border: 1px solid rgba(176, 137, 81, 0.45);
  border-radius: 999px;
  padding: 6px 10px;
  color: #ecd9b9;
  background: rgba(6, 10, 19, 0.82);
  font-size: 0.84rem;
}

.atlas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
}

.atlas-canvas-wrap {
  border: 1px solid rgba(135, 163, 223, 0.26);
  border-radius: 14px;
  background: radial-gradient(circle at 20% 12%, rgba(37, 55, 92, 0.45), rgba(7, 11, 21, 0.9));
  min-height: 660px;
  overflow: hidden;
}

#atlasCanvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

#atlasCanvas:active {
  cursor: grabbing;
}

.atlas-sidebar {
  border: 1px solid rgba(121, 163, 255, 0.2);
  border-radius: 12px;
  background: rgba(10, 15, 28, 0.82);
  padding: 10px;
  max-height: 660px;
  overflow: auto;
}

.atlas-sidebar h3 {
  font-size: 0.98rem;
  margin: 6px 0 8px;
  color: #f2da9c;
  text-transform: uppercase;
}

.atlas-preset-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 10px;
}

.atlas-preset-list {
  display: grid;
  gap: 8px;
}

.atlas-preset-item {
  border: 1px solid rgba(122, 139, 183, 0.34);
  border-radius: 10px;
  background: rgba(18, 25, 41, 0.74);
  padding: 8px;
}

.atlas-preset-item .name {
  margin: 0;
  color: #f7e4b5;
}

.atlas-preset-item .meta {
  margin: 3px 0 0;
  color: #b5c3df;
  font-size: 0.8rem;
}

.atlas-preset-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.atlas-node-details {
  border: 1px solid rgba(122, 139, 183, 0.26);
  border-radius: 10px;
  background: rgba(17, 23, 37, 0.74);
  padding: 10px;
}

.atlas-node-details h4 {
  margin: 0 0 8px;
  color: #f2d99a;
}

.atlas-node-details p {
  margin: 0;
  color: #b7c8ea;
}

.atlas-node-details ul {
  margin: 0;
  padding-left: 18px;
  color: #c3d4f5;
  display: grid;
  gap: 6px;
}

.poe-tooltip {
  position: fixed;
  z-index: 13000;
  width: min(420px, calc(100vw - 20px));
  border: 1px solid #7c5a24;
  background: linear-gradient(180deg, rgba(5, 8, 15, 0.98), rgba(3, 5, 11, 0.97));
  color: #d6dbe7;
  box-shadow: 0 0 0 1px rgba(193, 145, 65, 0.3), 0 24px 46px rgba(0, 0, 0, 0.75);
  border-radius: 8px;
  padding: 8px 10px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.poe-tooltip.auth-mode {
  width: auto;
  max-width: min(620px, calc(100vw - 12px));
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.poe-tooltip.auth-mode .auth-tooltip-wrap {
  display: grid;
  gap: 8px;
}

.poe-tooltip.auth-mode .auth-craft-steps {
  border: 1px solid rgba(193, 145, 65, 0.65);
  background: rgba(6, 9, 16, 0.95);
  padding: 8px 10px;
  font-family: "Cinzel", "Book Antiqua", serif;
  color: #c4d1ff;
  text-align: left;
  max-width: 520px;
}

.poe-tooltip.auth-mode .auth-craft-steps .title {
  color: #f0d48e;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.poe-tooltip.auth-mode .auth-craft-steps p {
  margin: 2px 0;
  font-size: 0.95rem;
  line-height: 1.3;
}

.poe-tooltip.inline-tooltip {
  position: static;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  pointer-events: auto;
}

.poe-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

.poe-title {
  text-align: center;
  margin: -8px -10px 0;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(169, 117, 46, 0.8);
  background: linear-gradient(
    180deg,
    rgba(132, 92, 36, 0.85) 0%,
    rgba(90, 62, 22, 0.5) 15%,
    rgba(25, 23, 28, 0.4) 55%,
    rgba(8, 10, 18, 0.8) 100%
  );
}

.poe-title .name {
  margin: 0 0 2px;
  font-family: "Cinzel", "Book Antiqua", serif;
  font-size: 1.42rem;
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 0 0 8px rgba(246, 224, 164, 0.2);
}

.poe-title .base {
  margin: 0;
  color: #f2dd95;
  font-family: "Cinzel", "Book Antiqua", serif;
  font-size: 1.3rem;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 0 0 7px rgba(240, 216, 149, 0.2);
}

.poe-section {
  text-align: center;
  padding: 8px 0 7px;
  border-bottom: 1px solid rgba(67, 73, 89, 0.58);
}

.poe-section:last-child {
  border-bottom: none;
}

.poe-section p {
  margin: 1px 0;
  font-size: 1.04rem;
  line-height: 1.17;
  letter-spacing: 0.01em;
  color: #c8ccd7;
}

.poe-section p .label {
  color: #a7acbc;
}

.poe-section p .value {
  color: #f2f4fb;
  font-weight: 700;
}

.poe-section.meta p:first-child {
  color: #868a93;
  text-transform: uppercase;
}

.poe-section.meta p:first-child .label,
.poe-section.meta p:first-child .value {
  color: #868a93;
  font-weight: 500;
}

.poe-section.mods p {
  color: #7f8cf4;
}

.poe-section.implicit p {
  color: #8392ff;
}

.poe-section.enchant p {
  color: #d9ebff;
}

.poe-section.advanced {
  opacity: 0.82;
}

.poe-section.advanced p {
  font-size: 0.95rem;
}

.poe-flags {
  color: #b74f4f;
  text-transform: uppercase;
}

.login-page {
  display: grid;
  place-items: center;
}

.login-shell {
  width: min(520px, 92vw);
  text-align: center;
}

.discord-btn {
  display: inline-block;
  margin-top: 8px;
  text-decoration: none;
  background: #5865f2;
  border-color: #7e88f6;
  color: #fff;
}

.login-note {
  margin-top: 12px;
  color: var(--txt-dim);
}

.auth-actions {
  justify-content: center;
}

@media (max-width: 940px) {
  .app-shell {
    margin-top: 18px;
  }

  .app-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .user-chip {
    max-width: 72vw;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .items-controls {
    width: 100%;
    justify-content: flex-end;
  }

  .items-controls select {
    width: 48%;
  }

  .recent-list {
    grid-template-columns: 1fr;
  }

  .item-modal-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "art"
      "craft";
  }

  .item-modal-art-stage {
    min-height: 260px;
  }

  .item-modal-art-wrap {
    height: 220px;
  }

  .item-modal-art {
    max-width: 68%;
    max-height: 86%;
  }

  .atlas-layout {
    grid-template-columns: 1fr;
  }

  .atlas-canvas-wrap {
    min-height: 520px;
  }

  .atlas-sidebar {
    max-height: none;
  }

  .poe-tooltip {
    position: static;
    opacity: 1;
    transform: none;
    margin-top: 10px;
    pointer-events: auto;
  }
}