@font-face {
  font-family: "PhotoToolbox Noto";
  src: url("fonts/notosanssc-ui.woff?v=20261023o") format("woff");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* 照片工具箱 · 基础样式与设计令牌
   主色与小程序图标、小程序 UI 保持一致（#1A6BC4） */

:root {
  --bg:#F2F5F6;--card:#FFFFFF;--primary:#087F75;--primary-dark:#05665E;--primary-light:#E9F6F2;
  --text:#172B3A;--text-2:#526574;--text-3:#637584;--border:#DCE5E8;--danger:#B42318;
  --radius:18px;--radius-sm:10px;--shadow:0 6px 24px rgba(23,43,58,.045);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "PhotoToolbox Noto", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 顶栏 */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  font-size: 18px;
  color: var(--text);
}
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background:var(--primary);
  position: relative;
  flex: 0 0 auto;
}
.brand-mark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  width: 16px;
  height: 12px;
  border-radius: 3px;
  background: #fff;
}

/* 语言切换 */
.lang {
  display: flex;
  gap: 6px;
}
.lang button {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.lang button.on {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* 卡片 */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 20px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { background: #B9C7D6; cursor: not-allowed; }
.btn-ghost {
  background: var(--card);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-block { width: 100%; }

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

.footer {
  margin: 48px 0 32px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}

button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 3px solid #1A6BC4; outline-offset: 3px; }

/* Photo workbench: quiet surfaces, visible actions and semantic red notices. */
.topbar {background:#fff;border-bottom:1px solid var(--border)}
.topbar-inner {padding-top:18px;padding-bottom:18px}.brand{letter-spacing:-.02em}
.lang {padding:3px;background:#F1F5F5;border-radius:10px;gap:2px}.lang button{border-color:transparent;background:transparent;border-radius:7px;padding:5px 12px;min-height:34px}.lang button.on{background:#fff;border-color:#DCE5E8;color:var(--primary-dark);box-shadow:0 1px 3px #172B3A0D}
.card {padding:24px;border-color:#E1E8EB;box-shadow:var(--shadow)}
.btn {font-weight:650;min-height:46px;transition:background .15s,border-color .15s,color .15s;}
.btn-primary {box-shadow:0 3px 7px #087F7514}.btn-primary:hover{background:var(--primary-dark)}
.btn-primary:disabled{background:#B6C9C6;box-shadow:none}.btn-ghost{color:var(--text);border-color:#CDDADF}.btn-ghost:disabled{color:#687A85}
button:disabled{opacity:.65}.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,[role="button"]:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.footer{color:var(--text-2)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Precision photo workspace: dark instrument panels, cyan actions, unfiltered photos. */
:root{color-scheme:dark;--bg:#09111F;--card:#111D30;--primary:#65E2FF;--primary-dark:#9AEEFF;--primary-light:#15384B;--text:#EDF4FF;--text-2:#BCCBDD;--text-3:#9BAFC7;--border:#2D405A;--danger:#FF9CA4;--radius:16px;--radius-sm:9px;--shadow:0 12px 35px #00000018}
body{background-color:var(--bg);background-image:linear-gradient(#76ADDC09 1px,transparent 1px),linear-gradient(90deg,#76ADDC09 1px,transparent 1px);background-size:56px 56px}
.topbar{background:#0B1525;border-bottom-color:#28405B}.brand{color:#EDF4FF}.brand-mark{background:var(--primary);border-radius:7px}.brand-mark::after{background:#0B2033}.lang{background:#121F33;border:1px solid #293E58}.lang button{color:#A8BBD0}.lang button.on{background:#1C3549;border-color:#3C7895;color:#AAEDFF;box-shadow:none}
.card{background:var(--card);border-color:#2A3B53;box-shadow:var(--shadow)}.btn-primary{background:#65E2FF;color:#071C2E;box-shadow:0 3px 15px #65E2FF15}.btn-primary:hover{background:#9AEEFF;color:#071C2E}.btn-primary:disabled{background:#293C50;color:#8A9CB1;opacity:.75}.btn-ghost{background:#17273B;border-color:#3E5673;color:#DAE8F9}.btn-ghost:hover{background:#1D3B50;border-color:#75DFF9;color:#B2F2FF}.footer{color:#A7B9CC}