/* Appearance card (Auto / Light / Dark) - identical copy in both apps. See js/appearance.js. */
.ap-card { display: block; min-width: 0; }
.ap-title b { display: block; font-size: 15.5px; color: var(--ink, #0f172a); }
.ap-title span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted, #64748b); margin-top: 3px; }
.ap-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ap-opt {
  display: block; width: 100%; min-width: 0; padding: 7px 7px 9px; text-align: center; cursor: pointer; font: inherit;
  background: var(--card, #fff); color: var(--ink, #0f172a); border: 2px solid var(--line, #e3e8f4); border-radius: 16px;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, box-shadow .15s;
}
.ap-opt.is-on { border-color: #3b63e8; box-shadow: 0 0 0 4px rgba(59, 99, 232, .16); }
.ap-opt:focus-visible { outline: 2px solid #3b63e8; outline-offset: 2px; }
.ap-mini { display: block; position: relative; height: 70px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line, #e3e8f4); }
.ap-mini i { position: absolute; display: block; border-radius: 4px; }
.ap-mini .a { left: 8px; top: 8px; width: 24px; height: 6px; }
.ap-mini .b { left: 8px; top: 20px; right: 8px; height: 18px; border-radius: 5px; }
.ap-mini .c { left: 8px; top: 44px; right: 28px; height: 6px; }
.ap-mini .d { left: 8px; top: 55px; right: 8px; height: 10px; border-radius: 5px; }
.ap-mini.light { background: #f4f7fc; } .ap-mini.light .a { background: #c9d3f5; } .ap-mini.light .b { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); } .ap-mini.light .c { background: #cbd5e1; } .ap-mini.light .d { background: #3b63e8; }
.ap-mini.dark { background: #0b1230; } .ap-mini.dark .a { background: #33407a; } .ap-mini.dark .b { background: #18214a; } .ap-mini.dark .c { background: #33407a; } .ap-mini.dark .d { background: #6f90ff; }
.ap-mini.auto { background: linear-gradient(115deg, #f4f7fc 50%, #0b1230 50%); } .ap-mini.auto .a { background: #8190c4; } .ap-mini.auto .b { background: linear-gradient(115deg, #fff 50%, #18214a 50%); } .ap-mini.auto .c { background: #8190c4; } .ap-mini.auto .d { background: #3b63e8; }
.ap-lbl { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 8px; font-size: 13.5px; font-weight: 800; }
.ap-lbl svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ap-opt small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted, #64748b); }
@media (max-width: 360px) { .ap-opts { gap: 6px; } .ap-opt { padding: 5px 5px 7px; } .ap-lbl { font-size: 12.5px; } .ap-lbl svg { display: none; } .ap-opt small { font-size: 10.5px; } }

.sheet-appear { display: block; padding: 12px 14px; cursor: default; }