/* ============================================================================
   工作台 · 质感层（portal.html / workspace.html 共用）
   在排版层之上补「玻璃、光、刻度」：面板厚度、标题亮线、数字高光、表格斑马。
   必须排在 portal-layout.css 之后加载。
   ========================================================================== */

/* ===== 1. 面板：做出玻璃的厚度 ========================================== */
.swin {
  border-color: color-mix(in srgb, var(--lime) 10%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 5%, transparent), transparent 26%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 54%, color-mix(in srgb, var(--surface) 86%, #000) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 30%, transparent),
    0 1px 0 color-mix(in srgb, #000 55%, transparent),
    0 26px 52px -40px rgba(0, 0, 0, 1);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

/* 极淡的磨砂颗粒 + 顶部冷光：纯色面板不再发死 */
.swin::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(120% 78% at 50% -18%, color-mix(in srgb, var(--lime) 9%, transparent), transparent 62%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
  background-size: auto, 140px 140px;
  opacity: .5;
  mix-blend-mode: overlay;
}

.swin:hover {
  border-color: color-mix(in srgb, var(--lime) 32%, var(--line));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 30%, transparent),
    0 0 0 1px color-mix(in srgb, var(--lime) 12%, transparent),
    0 30px 60px -42px rgba(0, 0, 0, 1);
}

/* ===== 2. 标题栏：一条信号条，把面板「点开」 ============================= */
.tbar {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--lime) 5%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-2) 72%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}
.tbar > span:first-child::before {
  content: "";
  flex: none;
  width: 2px; height: 11px; border-radius: 1px;
  background: linear-gradient(180deg, var(--lime), color-mix(in srgb, var(--lime) 22%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--lime) 55%, transparent);
}
.tbar { letter-spacing: .015em; }
.panel-code { color: color-mix(in srgb, var(--ink-3) 86%, var(--lime)); }

/* ===== 3. 视图头：分隔线上压一段信号光 ================================== */
.vhead::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; height: 1px;
  width: min(280px, 46%);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--lime) 88%, transparent),
    color-mix(in srgb, var(--cool) 34%, transparent) 58%,
    transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 42%, transparent);
  pointer-events: none;
}
.vhead-kicker::before {
  width: 34px;
  background: linear-gradient(90deg, transparent, var(--lime));
}
.vhead-kicker::after {
  content: "";
  width: 4px; height: 4px;
  transform: rotate(45deg);
  background: color-mix(in srgb, var(--lime) 82%, transparent);
}
.vhead h2 {
  text-shadow: 0 0 44px color-mix(in srgb, var(--lime) 16%, transparent);
}

/* 视图编号：从 1px 描边改成极淡渐变水印，更像浮雕而不是贴纸 */
.view::after {
  -webkit-text-stroke: 0;
  background-image: linear-gradient(158deg,
    color-mix(in srgb, var(--lime) 30%, transparent) 0%,
    color-mix(in srgb, var(--cool) 14%, transparent) 42%,
    transparent 74%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .55;
}

/* ===== 4. 数字与指标：内高光 + 悬停微亮 ================================= */
.bignum, .stat {
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff 5%, transparent), transparent 62%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
    0 10px 22px -18px rgba(0, 0, 0, .9);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.bignum:hover, .stat:hover {
  border-color: color-mix(in srgb, var(--lime) 26%, var(--line));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--lime) 10%, transparent),
    0 14px 26px -18px rgba(0, 0, 0, .9);
}
.bignum span, .stat span { letter-spacing: .15em; }
.kv b, .bignum b, .stat b, td.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; }

/* ===== 5. 表格：斑马 + 悬停信号条 ======================================= */
thead th {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 96%, transparent),
    color-mix(in srgb, var(--surface) 88%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}
tbody tr:nth-child(even):not(.me-row) td { background: color-mix(in srgb, var(--ink) 1.8%, transparent); }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 color-mix(in srgb, var(--lime) 85%, transparent); }
tr.me-row td {
  background: linear-gradient(90deg, color-mix(in srgb, var(--lime) 11%, transparent), color-mix(in srgb, var(--lime) 4%, transparent));
}
.rank-1 { text-shadow: 0 0 18px color-mix(in srgb, var(--lime) 46%, transparent); }

/* ===== 6. 主操作：渐变漆面 + 内高光 ===================================== */
#cart-gen, #cart-copy, #tr-go, #tr-copy, #ov-qbtn, #ov-wows-refresh, #ov-qq-gen,
#gacha-btn, #ws-go, #ws-refresh, #mk-buy, #tf-close {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--lime-fill) 84%, #fff),
    var(--lime-fill) 56%,
    color-mix(in srgb, var(--lime-fill) 84%, #000));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent),
    0 12px 26px -18px color-mix(in srgb, var(--lime-fill) 60%, transparent);
}

/* 次级按钮：悬停时描边透出一点信号色 */
button.mini:hover { background: color-mix(in srgb, var(--lime) 8%, var(--surface-2)); }

/* ===== 7. 细节：滚动条 / 选区 / 焦点 ==================================== */
#content::-webkit-scrollbar { width: 10px; }
#content::-webkit-scrollbar-track { background: transparent; }
#content::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 99px;
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--lime) 46%, transparent),
    color-mix(in srgb, var(--cool) 32%, transparent));
}
#content::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--lime) 68%, transparent),
    color-mix(in srgb, var(--cool) 48%, transparent));
}
::selection { background: color-mix(in srgb, var(--lime) 30%, transparent); color: var(--ink); }
:focus-visible { outline: 1px solid color-mix(in srgb, var(--lime) 68%, transparent); outline-offset: 2px; }

/* ===== 8. 浅色：液态玻璃再抬一档（原生规则带 !important，这里必须接住）== */
body[data-ui="light"] .swin {
  background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.40)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255,255,255,.46),
    0 0 0 .5px rgba(12,24,36,.06),
    0 22px 46px -30px rgba(28,45,60,.34) !important;
}
body[data-ui="light"] .swin::after {
  background-image:
    radial-gradient(120% 78% at 50% -18%, rgba(255,255,255,.9), transparent 58%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
  opacity: .34;
  mix-blend-mode: soft-light;
}
body[data-ui="light"] .tbar {
  background:
    linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.2) 48%),
    rgba(255,255,255,.34) !important;
}
body[data-ui="light"] .vhead h2 { text-shadow: 0 1px 0 rgba(255,255,255,.9); }
body[data-ui="light"] .view::after {
  background-image: linear-gradient(158deg, rgba(23,33,51,.16), rgba(23,33,51,.05) 46%, transparent 76%);
  -webkit-background-clip: text; background-clip: text;
  opacity: .55;
}
body[data-ui="light"] .stat,
body[data-ui="light"] .bignum {
  background: rgba(255,255,255,.66) !important;
  box-shadow: inset 0 1px 0 #fff, 0 12px 24px -18px rgba(28,45,60,.42) !important;
}
body[data-ui="light"] tbody tr:nth-child(even):not(.me-row) td { background: rgba(23,33,51,.022); }
body[data-ui="light"] .vhead::after { box-shadow: none; }

/* ===== 9. 动效偏好 ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .swin, .stat, .bignum { transition: none; }
}

/* ============================================================================
   第二轮：纵深与细节
   ========================================================================== */

/* ===== 10. 背景：顶部一片冷光，底部一点回光，页面不再是纯黑 ============== */
#crt::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(78% 40% at 50% -8%, color-mix(in srgb, var(--lime) 12%, transparent), transparent 66%),
    radial-gradient(52% 30% at 86% 104%, color-mix(in srgb, var(--cool) 8%, transparent), transparent 72%);
}

/* ===== 11. 编号更清楚：做成版面里的浮雕，而不是一层灰雾 ================== */
.view::after {
  opacity: .62;
  background-image: linear-gradient(158deg,
    color-mix(in srgb, var(--lime) 40%, transparent) 0%,
    color-mix(in srgb, var(--cool) 17%, transparent) 46%,
    transparent 78%);
}

/* 标题：光晕收紧，字口更利 */
.vhead h2 {
  text-shadow:
    0 0 24px color-mix(in srgb, var(--lime) 20%, transparent),
    0 1px 0 color-mix(in srgb, #000 40%, transparent);
}

/* ===== 12. 顶栏：菱形标志常驻微光 ====================================== */
.fleet-mark {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--lime) 20%, transparent),
    0 0 22px color-mix(in srgb, var(--lime) 16%, transparent);
}

/* ===== 13. 状态栏：顶部一条会缓慢流动的信号线 ========================== */
.statusbar::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--lime) 58%, transparent) 26%,
    color-mix(in srgb, var(--cool) 44%, transparent) 58%,
    transparent);
  background-size: 180% 100%;
  opacity: .8;
  animation: statusFlow 11s linear infinite;
}
@keyframes statusFlow {
  0% { background-position: 120% 0; }
  100% { background-position: -80% 0; }
}

/* ===== 14. 卡片：标题栏与内容区之间压一道内阴影，层次更实 ================ */
.swin > .wbody { box-shadow: inset 0 1px 0 color-mix(in srgb, #000 24%, transparent); }

/* ===== 15. 分段 tab：选中态带一点外发光 ================================= */
.tab.on {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    0 8px 20px -14px color-mix(in srgb, var(--lime) 70%, transparent);
}

/* ===== 16. 「最大数量」是辅助键，不该和「买入」同一个漆面 ================ */
#mk-qty-max {
  color: var(--ink);
  background-image: none;
  background-color: var(--surface-2);
  border-color: var(--line-2);
  clip-path: none;
  box-shadow: none;
}
#mk-qty-max:hover {
  color: var(--lime);
  border-color: color-mix(in srgb, var(--lime) 52%, var(--line-2));
}

/* ===== 17. 浅色：光和暗调都得收住，否则会脏 ============================ */
body[data-ui="light"] #crt::before {
  background:
    radial-gradient(78% 40% at 50% -8%, rgba(255,255,255,.9), transparent 62%),
    radial-gradient(52% 30% at 86% 104%, rgba(151,206,255,.22), transparent 72%);
}
body[data-ui="light"] .view::after {
  background-image: linear-gradient(158deg, rgba(23,33,51,.18), rgba(23,33,51,.06) 46%, transparent 78%);
}
body[data-ui="light"] .vhead h2 { text-shadow: 0 1px 0 #fff; }
body[data-ui="light"] .fleet-mark {
  box-shadow: 0 0 0 1px rgba(95,125,23,.18), 0 0 18px rgba(95,125,23,.12);
}
body[data-ui="light"] .swin > .wbody { box-shadow: inset 0 1px 0 rgba(23,33,51,.05); }
body[data-ui="light"] .statusbar::before { opacity: .35; }

/* ===== 18. 入场：从模糊里浮出来，比单纯位移更"高级" ===================== */
@keyframes viewRise {
  from { opacity: 0; transform: translateY(14px) scale(.994); filter: blur(6px); }
  62% { opacity: 1; }
  to { opacity: 1; transform: none; filter: none; }
}

/* 积分数字：用亮一档的信号色，和下面的标签拉开 */
.bignum b { color: var(--lime-hi); }
body[data-ui="light"] .bignum b { color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .view.on > * { animation: none !important; }
}

/* ===== 19. 浅色：把 mesh 的饱和度收下来，玻璃才显得干净 ================= */
body[data-ui="light"]::before {
  filter: saturate(108%) brightness(1.015);
}

/* ===== 20. 关键数字：一层金属渐变，比纯色更有"读数屏"的味道 ============ */
.bignum b:not(.up):not(.down) {
  background-image: linear-gradient(180deg, #ffffff 0%, var(--lime-hi) 40%, var(--lime) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
body[data-ui="light"] .bignum b:not(.up):not(.down) {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: var(--lime);
}

/* ===== 21. 层序：颗粒层留在背景，正文永远压在它上面 ===================== */
.swin > .tbar,
.swin > .wbody,
.swin > .scroll,
.swin > .arsenal-ship-catalog { position: relative; z-index: 1; }