:root {
  --top-height: 118px;
  --footer-height: 50px;
  --rail-width: 150px;
  --aside-width: 430px;
  --blue: #1769ff;
  --blue-bright: #4ca5ff;
}

body {
  min-width: 1100px;
  padding-bottom: var(--footer-height);
  background:
    linear-gradient(116deg, transparent 0 48%, rgba(23, 105, 255, .055) 48% 57%, transparent 57%),
    radial-gradient(circle at 69% 31%, rgba(23, 105, 255, .12), transparent 30%),
    #03070d;
}

body::before {
  content: "";
  left: 33%;
  top: 14%;
  width: 62vw;
  height: 72vh;
  border: 0;
  border-radius: 0;
  background: linear-gradient(162deg, rgba(23, 105, 255, .19), rgba(23, 105, 255, .03) 58%, transparent 58%);
  transform: skewX(-16deg);
}

body::after { opacity: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  height: var(--top-height);
  grid-template-columns: 320px minmax(560px, 1fr) 430px;
  gap: 18px;
  padding: 14px 22px;
  overflow: visible;
  border-bottom: 2px solid var(--blue);
  background: linear-gradient(100deg, #1858c6 0 320px, #07101b 320px, #04080e 68%, #08111e);
  box-shadow: 0 22px 65px rgba(0, 0, 0, .42);
}

.topbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 260px;
  width: 125px;
  height: 100%;
  background: #07101b;
  transform: skewX(-33deg);
}

.brand-block {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 13px;
  align-self: stretch;
  color: #fff;
}

.brand-block::before {
  content: "PFJ";
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  color: var(--blue);
  background: #fff;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: 1px;
  grid-row: 1 / 3;
}

.brand-block h1 { margin: 0; font-size: 22px; letter-spacing: -1px; }
.brand-block p { margin: -7px 0 0; color: rgba(255, 255, 255, .74); font-size: 10px; }

.top-center { display: grid; grid-template-rows: 23px 1fr; align-self: stretch; gap: 5px; padding: 0; }
.notice {
  height: 23px;
  margin: 0;
  border: 0;
  color: #74869b;
  background: transparent;
  font-size: 10px;
}

.layer-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid #285d9d;
  border-radius: 15px;
  background: rgba(9, 18, 30, .92);
}

.tab-button {
  min-width: 0;
  min-height: 28px;
  padding: 5px 4px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  color: #9aabbd;
  background: transparent;
  box-shadow: none;
  font-size: 10px;
  text-overflow: ellipsis;
}
.tab-button.active { color: #fff; background: linear-gradient(135deg, #287cff, #0e56da); box-shadow: 0 8px 24px rgba(23, 105, 255, .32); }

.top-actions { grid-template-columns: 1fr 1fr; gap: 7px; padding: 0; }
.top-actions .ghost-button {
  min-height: 38px;
  padding: 6px 8px;
  border-color: #315071;
  border-radius: 10px;
  background: linear-gradient(180deg, #111d2b, #0b131e);
  font-size: 11px;
}
.top-actions .config-menu-wrap > .ghost-button { border-color: #2878d9; background: linear-gradient(135deg, #1769ff, #0d4dbd); box-shadow: 0 11px 28px rgba(23, 105, 255, .22); }

.app-shell {
  grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--aside-width);
  align-items: start;
  min-height: calc(100vh - var(--top-height) - var(--footer-height));
}

.layer-rail {
  position: sticky;
  z-index: 8;
  top: var(--top-height);
  grid-column: 1;
  grid-row: 1;
  display: flex;
  height: calc(100vh - var(--top-height) - var(--footer-height));
  min-height: 0;
  flex-direction: column;
  gap: 2px;
  padding: 18px 15px;
  overflow: hidden;
  border-right: 1px solid #213249;
  background: linear-gradient(180deg, #09121e, #050a11);
}

.layer-rail::before { content: "16 LAYERS"; margin-bottom: 8px; color: #5e7187; font-size: 9px; font-weight: 900; letter-spacing: 2px; }
.layer-rail-button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  flex: 1;
  min-height: 0;
  padding: 3px 8px;
  border: 0;
  border-radius: 8px;
  color: #7890a8;
  text-align: left;
  background: transparent;
}
.layer-rail-button i { color: #4e739b; font-size: 9px; font-style: normal; font-weight: 900; }
.layer-rail-button span { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.layer-rail-button.active { color: #fff; background: linear-gradient(135deg, #287cff, #1260e8); box-shadow: 0 10px 26px rgba(23, 105, 255, .25); }
.layer-rail-button.active i { color: #fff; }

.workspace { grid-column: 2; grid-row: 1; min-width: 0; overflow: visible; }
.layers { min-height: calc(100vh - var(--top-height) - var(--footer-height)); }
.layer-card {
  position: relative;
  isolation: isolate;
  scroll-margin-top: var(--top-height);
  min-height: calc(100vh - var(--top-height) - var(--footer-height));
  padding: 48px 46px 44px;
  overflow: hidden;
  border-bottom-color: #18283c;
}
.layer-card::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  right: -7%;
  width: 86%;
  height: 46%;
  background: linear-gradient(155deg, rgba(23, 105, 255, .18), rgba(23, 105, 255, .025));
  transform: skewX(-24deg);
  transform-origin: top right;
}
.layer-card::after {
  content: attr(data-layer-number);
  position: absolute;
  z-index: -1;
  right: 3%;
  bottom: -7%;
  color: rgba(65, 109, 167, .13);
  font: 1000 clamp(180px, 24vw, 370px)/.78 "Arial Black", sans-serif;
  letter-spacing: -34px;
}
.layer-kicker { color: var(--blue-bright); font-size: 10px; letter-spacing: 2.4px; }
.layer-title-row { margin-top: 12px; }
.layer-title { display: flex; align-items: center; gap: 15px; font-size: clamp(34px, 3.4vw, 54px); letter-spacing: -2px; }
.layer-symbol { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border: 1px solid #3d8cff; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #1769ff, #0b3b96); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 14px 34px rgba(0,50,130,.25); }
.layer-symbol svg { width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(150,205,255,.28)); }
.toggle-layer { margin-left: 5px; padding: 8px 17px; border: 1px solid #4c6686; border-radius: 8px; color: #fff; background: #0b1420; }
.layer-description { margin: 12px 0 26px; font-size: 13px; }
.group-list { gap: 15px; }
.option-group {
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 16px;
  padding: 17px 20px;
  border-radius: 15px;
  background: rgba(12, 22, 35, .9);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 40px rgba(0,0,0,.15);
}
.group-label-wrap { gap: 6px; }
.group-label { font-size: 13px; }
.group-label::after { border-bottom-width: 2px; border-bottom-color: var(--blue); }
.custom-button { width: 102px; padding: 6px 10px; border: 0; color: #bedaff; background: rgba(23,105,255,.16); box-shadow: none; font-size: 10px; }
.options { gap: 7px; }
.option-button { min-height: 30px; padding: 5px 10px; border: 0; border-radius: 7px; color: #aebdcd; background: rgba(255,255,255,.035); font-size: 11px; }
.option-button.selected { border: 0; color: #fff; background: linear-gradient(135deg, #287cff, #1260e8); box-shadow: 0 8px 22px rgba(23,105,255,.25); }

.output-panel {
  position: sticky;
  top: var(--top-height);
  grid-column: 3;
  grid-row: 1;
  height: calc(100vh - var(--top-height) - var(--footer-height));
  margin: 24px 24px 24px 0;
  overflow: hidden;
  border: 1px solid #284466;
  border-radius: 24px 5px 24px 5px;
  background: linear-gradient(155deg, #132849, #0a121e 58%);
  box-shadow: -42px 34px 90px rgba(0, 0, 0, .42);
}
.output-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; height: 62px; padding: 14px 18px 0; }
.output-mode-tabs button { border: 0; border-bottom: 2px solid transparent; color: #71839b; background: transparent; font-size: 14px; font-weight: 800; }
.output-mode-tabs button.active { border-bottom-color: var(--blue-bright); color: #fff; }
.output-section { height: calc(100% - 62px); }
.prompt-section, .json-section { height: calc(100% - 62px); border-top: 0; }
.output-heading { flex: 0 0 84px; padding: 14px 18px; background: transparent; }
.output-heading small { color: var(--blue-bright); font-size: 9px; }
.output-heading h2 { font-size: 22px; }
.output-heading h2 span, .output-heading h2 em { display: none; }
.copy-button { width: auto; min-width: 70px; padding: 8px 12px; border-color: #47749e; background: transparent; box-shadow: none; }
.output-content { margin: 0 18px 18px; padding: 17px; border: 0; border-radius: 13px; background: rgba(2, 7, 14, .42); font-size: 12px; line-height: 1.8; }
.prompt-token.fixed { color: #fff; }
.prompt-token.dynamic { color: #4ca5ff; }
.json-section .output-content, .json-string { color: #62b2ff; }

.scroll-rail { display: none; }
.footerbar { background: rgba(4, 8, 14, .98); }
.pager-dot { background: #1c2c3d; }
.pager-dot.active { background: var(--blue); }
.footer-note { color: #6f8296; }
.page-indicator { border-color: #294260; }

@media (max-width: 1450px) {
  :root { --aside-width: 380px; --rail-width: 128px; }
  .topbar { grid-template-columns: 280px minmax(500px, 1fr) 360px; gap: 12px; padding-inline: 16px; background: linear-gradient(100deg, #1858c6 0 280px, #07101b 280px, #04080e 68%, #08111e); }
  .topbar::before { left: 225px; }
  .brand-block { grid-template-columns: 50px 1fr; gap: 10px; }
  .brand-block::before { width: 50px; height: 50px; }
  .brand-block h1 { font-size: 18px; }
  .tab-button { font-size: 9px; }
  .top-actions .ghost-button { font-size: 10px; }
  .layer-card { padding-inline: 34px; }
  .output-panel { margin-right: 16px; }
}

@media (max-width: 1180px) {
  body { min-width: 900px; }
  :root { --aside-width: 330px; --rail-width: 110px; }
  .topbar { grid-template-columns: 240px minmax(450px, 1fr) 310px; }
  .brand-block h1 { font-size: 16px; }
  .brand-block p { display: block; }
  .layer-card { padding-inline: 28px; }
  .option-group { grid-template-columns: 100px minmax(0,1fr); padding-inline: 15px; }
}