:root {
  --bg0: #0d0f14;
  --bg1: #1b1f29;
  --fg: #f2f3f6;
  --fg2: #a9afbd;
  --glass: rgba(20, 23, 31, 0.62);
  --line: rgba(255, 255, 255, 0.12);
  --accent: #ffcc33;
  --accent2: #6fd3ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg0); color: var(--fg); overflow: hidden;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif; }
#app { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
#c { display: block; width: 100%; height: 100%; touch-action: none; }

#loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: var(--bg0); transition: opacity .5s; z-index: 5; }
#loading.done { opacity: 0; pointer-events: none; }
#loading p { color: var(--fg2); font-size: 14px; margin-top: 14px; }
.spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.ui { position: absolute; z-index: 3; }
#top { top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px 16px 0; pointer-events: none; }
#top > * { pointer-events: auto; }
.brand h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.brand h1 span { color: var(--accent); font-weight: 400; margin: 0 2px; }
.brand p { margin: 4px 0 0; font-size: 12px; color: var(--fg2); letter-spacing: 2px; }

.chip { appearance: none; border: 1px solid var(--line); background: var(--glass); color: var(--fg);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chip.on { background: var(--accent); color: #1a1400; border-color: var(--accent); font-weight: 700; }

#dock { left: 0; right: 0; bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
#dock > * { pointer-events: auto; }
#views { display: flex; gap: 6px; padding: 6px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#views::-webkit-scrollbar { display: none; }
#views button { appearance: none; border: 0; background: transparent; color: var(--fg2); font: inherit; font-size: 13px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
#views button.on { background: rgba(255,255,255,.14); color: var(--fg); }

#panel { width: min(560px, 100%);
  background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 10px 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#panel .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#panel .row + .row { margin-top: 8px; }
#panel .lbl { font-size: 12px; color: var(--fg2); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.swatches button.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,204,51,.35); }
.toggles { gap: 6px !important; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.busy { font-size: 12px; color: var(--accent); }
.hint { margin: 8px 0 0; font-size: 11px; color: var(--fg2); text-align: center; }

dialog#info { max-width: min(560px, calc(100% - 32px)); max-height: 80vh; overflow: auto; background: #151821; color: var(--fg);
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
dialog#info::backdrop { background: rgba(0,0,0,.55); }
dialog#info h2 { margin: 0 0 8px; font-size: 18px; }
dialog#info h3 { margin: 16px 0 6px; font-size: 14px; color: var(--accent); }
dialog#info p, dialog#info li { font-size: 13px; line-height: 1.6; color: #d4d8e2; }
dialog#info ul { padding-left: 18px; margin: 0; }
dialog#info a { color: var(--accent2); word-break: break-all; }
dialog#info .x { position: absolute; right: 12px; top: 8px; background: none; border: 0; color: var(--fg2); font-size: 22px; cursor: pointer; }

body.shot .ui, body.shot #loading { display: none !important; }

@media (max-width: 600px) {
  .brand h1 { font-size: 18px; }
  #dock { bottom: 10px; gap: 6px; padding: 0 10px; }
  #views button { padding: 6px 10px; font-size: 12px; }
  #panel .row + .row { margin-top: 6px; }
  .swatches button { width: 22px; height: 22px; }
  .hint { display: none; }
  #panel { padding: 8px 10px; }
  .chip { padding: 6px 11px; font-size: 12px; }
}