/* 同一套材料，不同页面的色彩构图：单色、局部浓色与少量双色交替。 */
:root{--ink:#24213b;--muted:#3e3654;--accent:#5044bd;--hair:rgba(57,43,99,.13)}
.phone{background:#f3effa;box-shadow:0 12px 30px #49396b0b,0 1px 3px #49396b12}
.phone:before,.phone:has(.device-stage):before,.phone:has(.scene):before{
  content:"";inset:0;opacity:1;filter:none;transform:none;
  background:none;
}
.phone:after,.phone:has(.device-stage):after,.phone:has(.scene):after{
  content:"";inset:0;opacity:.055;filter:none;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.65'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.phone[data-page=explore]{background:#f0f2fc}
.phone[data-page=explore]:before{background:radial-gradient(ellipse 72% 55% at 12% 60%,#7899f4bd 0%,#adc3f569 45%,transparent 83%)}
.phone[data-page=detail]{background:#f1eef8}
.phone[data-page=detail]:before{background:radial-gradient(ellipse 105% 35% at 85% 95%,#bba5e898 0%,#d0c2ed51 46%,transparent 92%)}
.phone[data-page=capture]{background:#f1ebfa}
.phone[data-page=capture]:before{background:radial-gradient(ellipse 80% 62% at 108% 4%,#b19be4a8 0%,#cdbdec4a 52%,transparent 90%)}
.phone[data-page=tasks]{background:#f7f1f5}
.phone[data-page=tasks]:before{background:radial-gradient(ellipse 88% 39% at 0% 104%,#e7b1cb82 0%,transparent 85%)}
.phone[data-page=receipt]{background:#eef2fb}
.phone[data-page=receipt]:before{background:radial-gradient(ellipse 66% 57% at 108% 51%,#95b2f1a6 0%,#b7cdf650 48%,transparent 90%)}
.phone[data-page=editor]{background:#f8edf5}
.phone[data-page=editor]:before{background:radial-gradient(ellipse 110% 58% at 48% 100%,#ed8dbac7 0%,#f0b2d27d 45%,transparent 90%)}
.phone[data-page=library]{background:#faf3f5}
.phone[data-page=library]:before{background:radial-gradient(ellipse 91% 39% at -4% 4%,#e9b2cc9c 0%,#f1d0de52 49%,transparent 89%)}
.phone[data-page=playback]{background:#eef0fc}
.phone[data-page=playback]:before{background:
  radial-gradient(ellipse 100% 40% at 0% 53%,#7892efc9 0%,#a2b8ef65 44%,transparent 92%),
  radial-gradient(ellipse 97% 30% at 90% 104%,#eeb0d3b3,transparent 94%)}
.phone[data-page=devices]{background:#f1f1fa}
.phone[data-page=devices]:before{background:radial-gradient(ellipse 58% 58% at 105% 30%,#aaaeea85 0%,transparent 86%)}
.status,.topbar,.home{color:var(--ink)}.home{background:#302946}
.glass,.detail-sheet,.controller{
  background:linear-gradient(120deg,#ffffff70 0%,#ffffff36 48%,#ffffff75 100%);
  border:1px solid #ffffffbd;
  box-shadow:inset 0 1px 0 #ffffffe0,0 7px 22px #5144770d;
  backdrop-filter:blur(24px) saturate(125%);
  -webkit-backdrop-filter:blur(24px) saturate(125%);
}
.glass:before{opacity:.09}.detail-sheet{border-radius:25px 25px 20px 20px}
.round-glass{background:#ffffff40;border-color:#ffffffad}
.actiondock{background:linear-gradient(120deg,#ffffff83,#ffffff4d);border-color:#ffffffc9;backdrop-filter:blur(22px) saturate(120%)}
.outline{background:#ffffff36;border-color:#ffffffe0;color:#332b51}
.primary{background:#5044bd;box-shadow:0 3px 9px #5647a51a}
.nav{background:linear-gradient(#ffffff45,#ffffff75);border-top-color:#ffffffab}.nav button{color:#4d4267}.nav button.active{color:#40329c}
.search{background:#ffffff52;border-color:#ffffffa6;box-shadow:inset 0 1px 0 #fff7}.search input::placeholder,.field::placeholder{color:#655c78}
.field,.title-input{background:#ffffff59;border-color:#ffffffb3;box-shadow:inset 0 1px 0 #fff8}
.mode-buttons button{background:#ffffff38;border-color:#ffffffb3}.mode-buttons button.selected{background:#ffffff96;border-color:#ffffffef;box-shadow:inset 0 1px 0 #fff,0 3px 10px #65569a12}
.quiet-secondary{background:#ffffff42;border-color:#ffffffcb}
.line-map{background:#ffffff38;border-color:#ffffffb8;box-shadow:inset 0 1px 0 #fff9}
.map-drawing{mix-blend-mode:multiply;opacity:.88}
.line-map .map-note{background:#ffffff70;color:#514968}.line-map .map-place{background:linear-gradient(120deg,#ffffff85,#ffffff45);border-color:#ffffffd6;backdrop-filter:blur(16px) saturate(130%)}
.line-map .map-pin{background:#ffffffa8;border-color:#ffffffeb;color:#5342af}
.detail-meta,.source-note,.small,.tiny,.helper,.timing,.controller-note,.titleblock p,.play-title p{color:var(--muted)}
.state-text{color:#365d4b}.task-state{color:#493983}.step-list span{background:#ffffff7a}.step-list span.done{background:#8875bc}
.trim-wave{background:#ffffff35}.trim-wave i{background:#7865b0}.output-select{background:#ffffff66;border-color:#ffffffcd;color:#3a3053}
.transport .play-main{background:#ffffff7a;border-color:#ffffffea;box-shadow:inset 0 1px 0 #fff}
.slider-row svg,.slider-row output{color:#514466}.slider-row input,.seek{accent-color:#6852bd}
.photo-option input{accent-color:#6852bd}.scene-caption{background:#40364ccf}