* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #0a0b0d; color: #f2f3f5;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; outline: none; }

.glass { background: rgba(16, 18, 22, 0.55); border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }

#loading { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; background: radial-gradient(circle at 50% 40%, #1a1d22, #07080a); transition: opacity .6s ease; }
#loading.done { opacity: 0; pointer-events: none; }
.ld-ring { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); border-top-color: #fff; animation: spin 1s linear infinite; }
#ld-pct { font-size: 13px; letter-spacing: .2em; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
@keyframes spin { to { transform: rotate(360deg); } }

.brand { position: fixed; top: calc(20px + env(safe-area-inset-top)); left: calc(24px + env(safe-area-inset-left)); z-index: 5; pointer-events: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.brand h1 { font-size: 18px; font-weight: 600; letter-spacing: .22em; }
.brand p { margin-top: 6px; font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.7); }

.summary { position: fixed; z-index: 5; left: calc(24px + env(safe-area-inset-left)); bottom: calc(24px + env(safe-area-inset-bottom));
  padding: 10px 18px; font-size: 13px; letter-spacing: .08em; border-radius: 999px;
  background: rgba(16,18,22,.55); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

.panel { position: fixed; z-index: 6; top: 20px; right: 20px; bottom: 20px; width: 360px; overflow-y: auto; padding: 22px 20px;
  background: rgba(16, 18, 22, 0.55); border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.panel section + section { margin-top: 24px; }
.panel h2 { font-size: 12px; font-weight: 500; letter-spacing: .24em; color: rgba(255,255,255,.55); margin-bottom: 12px; }

.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.chip { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: inherit; cursor: pointer;
  font: inherit; font-size: 12px; color: rgba(255,255,255,.75); min-height: 44px; }
.chip .sw { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.25), inset 0 4px 8px rgba(255,255,255,.18); transition: transform .2s, box-shadow .2s; overflow: hidden; }
.chip span.nm { line-height: 1.25; text-align: center; }
.chip:hover .sw { transform: scale(1.06); }
.chip.on { color: #fff; }
.chip.on .sw { box-shadow: 0 0 0 2px #0d0f12, 0 0 0 3.5px #fff, 0 0 16px 3px rgba(255,255,255,.35); }
.chip input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }
.chip .sw.custom { background: conic-gradient(#f44, #fd4, #4f8, #4df, #84f, #f4c, #f44); }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills button, .seg button { font: inherit; font-size: 13px; color: rgba(255,255,255,.8); cursor: pointer; min-height: 40px; padding: 0 16px;
  border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: all .2s; }
.pills button:hover, .seg button:hover { background: rgba(255,255,255,.12); }
.pills button.on { background: #fff; color: #0b0c0e; border-color: #fff; box-shadow: 0 0 18px rgba(255,255,255,.35); }

.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.seg { background: #1a1d22; }
.seg button { border: 0; background: #1a1d22; min-height: 44px; transition: none; color: #e6e8eb; }
.seg button:hover { background: #262a30; }
.seg button.on, .seg button[aria-pressed="true"] { background: #fff; color: #0b0c0e; box-shadow: 0 0 18px rgba(255,255,255,.3); }

@media (max-width: 900px) {
  .brand { top: calc(14px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left)); }
  .brand h1 { font-size: 15px; }
  .summary { left: 50%; transform: translateX(-50%); bottom: auto; top: calc(66px + env(safe-area-inset-top)); white-space: nowrap; font-size: 12px; padding: 8px 14px; }
  .panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 42vh; border-radius: 18px 18px 0 0; border-bottom: 0;
    padding: 18px calc(16px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    -webkit-overflow-scrolling: touch; }
  .panel section + section { margin-top: 18px; }
  .chips { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}