body{
  margin:0;min-height:100%;height:100%;
  font-family:var(--font-ui);
  font-size:1rem;line-height:1.45;
  color:var(--tx-1);
  background:var(--ink-1);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent; /* 手机端点选不再出现蓝色高亮框 */
}
body::before{ /* environment artwork */
  content:"";position:fixed;inset:-2%;z-index:0;pointer-events:none;
  /* z 由 -2 改为 0：body 的不透明背景会传播为画布背景，Blink 将其绘制在负 z 元素
     之上——壁纸与阅读纱罩曾因此被 ink-1 画布完全遮盖（红屏实验确认）。z:0 仍低于
     .app(z1) / .login-layer(200) / .modal-layer(300)，不遮挡任何 UI。 */
  background-image:var(--bg-image),linear-gradient(150deg,var(--ink-2),var(--ink-0));
  background-size:cover;background-position:var(--active-bg-position,center center);
  background-repeat:no-repeat;
  filter:blur(var(--bg-blur));
  transform:scale(1.03);
}
body::after{ /* readability veil + vignette — fixed weight now; the 背景遮罩
   slider drives --scrim-scale (region frost) instead of dimming the artwork */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(0,0,0,.34) 100%),
    rgba(var(--overlay-rgb),.16);
}
img,svg,video{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:disabled{cursor:not-allowed}
input,select,textarea,output{font:inherit;color:inherit}
a{color:var(--accent)}
code,kbd{font-family:var(--font-num);font-size:.92em;background:rgba(255,255,255,.06);border:1px solid var(--line-1);border-radius:6px;padding:.05em .4em}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.hidden{display:none!important}

/* thin scrollbars everywhere */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);background-clip:content-box}

/* ---------- shared primitives -------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 18px;
  border-radius:12px;border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  color:var(--tx-1);font-weight:700;font-size:.86rem;letter-spacing:.01em;
  transition:transform var(--t-fast) var(--ease-out),border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast),opacity var(--t-fast);
  user-select:none;white-space:nowrap;
}
.btn:hover:not(:disabled){border-color:var(--line-3);background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.45}
.btn.primary{
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#000));
  border-color:color-mix(in srgb,var(--accent) 70%,#fff 12%);
  color:var(--on-accent);
  box-shadow:0 8px 22px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.primary:hover:not(:disabled){
  /* 悬停时保持反亮的主题底色（通用 .btn:hover 的灰白渐变曾把登录按钮压成黑底） */
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 93%,#fff 7%),color-mix(in srgb,var(--accent) 74%,#000));
  filter:brightness(1.06);box-shadow:0 10px 26px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.3);
}

/* form fields */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>label{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.field .helper,.helper{font-size:.72rem;line-height:1.55;color:var(--tx-3)}
.field.full{grid-column:1/-1}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea{
  width:100%;min-height:42px;padding:9px 12px;
  border-radius:12px;border:1px solid var(--line-2);
  background:rgba(0,0,0,.28);
  color:var(--tx-1);font-weight:600;font-size:.88rem;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
  appearance:none;-webkit-appearance:none;
}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--line-3)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
  background:rgba(0,0,0,.36);
}
select{
  padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-2) 50%),linear-gradient(135deg,var(--tx-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px;background-repeat:no-repeat;
}
select option{background:var(--panel-solid);color:var(--tx-1)}
input:disabled,select:disabled,textarea:disabled{opacity:.5}
textarea{resize:vertical;min-height:90px;line-height:1.55;font-weight:500}
::placeholder{color:var(--tx-3);font-weight:500}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.inline-field{display:flex;gap:10px;align-items:center}
.inline-field>input{flex:1;min-width:0}

/* native checkbox rows */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.switch-row label{font-size:.86rem;font-weight:600;color:var(--tx-1)}
input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:40px;height:22px;border-radius:99px;
  border:1px solid var(--line-2);background:rgba(0,0,0,.35);
  position:relative;cursor:pointer;transition:background var(--t-med),border-color var(--t-med);
}
input[type="checkbox"]::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--tx-2);transition:transform var(--t-med) var(--ease-spring),background var(--t-med);
}
input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
input[type="checkbox"]:checked::after{transform:translateX(18px);background:var(--on-accent)}

/* custom switch markup: <span class="blind-switch"><input><i></i></span> */
.blind-switch,.appearance-table-switch{position:relative;display:inline-flex;flex:none}
.blind-switch input,.appearance-table-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2;width:100%;height:100%}
.blind-switch i,.appearance-table-switch i{
  display:block;width:42px;height:23px;border-radius:99px;position:relative;
  border:1px solid var(--line-2);background:rgba(0,0,0,.35);
  transition:background var(--t-med),border-color var(--t-med);pointer-events:none;
}
.blind-switch i::after,.appearance-table-switch i::after{
  content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--tx-2);transition:transform var(--t-med) var(--ease-spring),background var(--t-med);
}
.blind-switch input:checked+i,.appearance-table-switch input:checked+i{background:var(--accent);border-color:var(--accent)}
.blind-switch input:checked+i::after,.appearance-table-switch input:checked+i::after{transform:translateX(19px);background:var(--on-accent)}
.blind-switch input:focus-visible+i,.appearance-table-switch input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}

/* range inputs (settings) */
input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;margin:0;
}
input[type="range"]::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:rgba(255,255,255,.13)}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;margin-top:-6px;
  background:var(--tx-1);border:3px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform var(--t-fast);
}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type="range"]::-moz-range-track{height:5px;border-radius:99px;background:rgba(255,255,255,.13)}
input[type="range"]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--tx-1);border:3px solid var(--accent)}
.range-readout{display:flex;align-items:center;gap:12px}
.range-readout input{flex:1}
.range-readout output{
  min-width:46px;text-align:center;font-family:var(--font-num);font-size:.78rem;font-weight:600;
  padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.3);border:1px solid var(--line-1);color:var(--tx-2);
}

/* disclosure cards */
details summary{cursor:pointer;list-style:none;user-select:none}
details summary::-webkit-details-marker{display:none}

/* desktop-only widen: follows the font scale above 标准, never below it */
@media (min-width:1001px){:root{--ui-widen:max(1,var(--font-scale))}}