.greet { margin: 6px 4px 16px; color: var(--muted); font-size: 14px; }
.big-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.big-card { position: relative; overflow: hidden; border: 0; text-align: left; cursor: pointer; min-height: 168px; padding: 18px; border-radius: 26px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  background: var(--surface); color: var(--fg); box-shadow: var(--shadow); transition: transform .18s var(--ease), box-shadow .2s; }
.big-card:active { transform: scale(.97); }
.big-card::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -46px; top: -54px; opacity: .55; }
.big-card.watch::after { background: radial-gradient(circle, #FFD3DF, transparent 70%); }
.big-card.cam::after { background: radial-gradient(circle, #D9D2FF, transparent 70%); }
.dark .big-card::after { opacity: .18; }
.big-card b { font-size: 21px; letter-spacing: .04em; position: relative; z-index: 1; }
.big-card span { font-size: 13px; color: var(--muted); position: relative; z-index: 1; }
.bc-ic { position: absolute !important; left: 18px; top: 18px; width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; color: #fff !important; z-index: 1; }
.watch .bc-ic { background: linear-gradient(135deg, #FFB3C7, #F2709A); box-shadow: 0 10px 20px -10px #F2709A; }
.cam .bc-ic { background: linear-gradient(135deg, #9483F2, #5A49C6); box-shadow: 0 10px 20px -10px #5A49C6; }
.bc-ic svg { width: 28px; height: 28px; }
@media (max-width: 360px) { .big-card { min-height: 150px; padding: 14px; } .big-card b { font-size: 18px; } .bc-ic { left: 14px; top: 14px; } }

.sp-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-ink); position: relative; }
.sp-ic svg { width: 24px; height: 24px; }
.sp-ic .live { position: absolute; right: -2px; top: -2px; width: 13px; height: 13px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 3px var(--surface); animation: blink 1.6s infinite; }
.row .icon-btn { box-shadow: none; background: transparent; color: var(--muted); }
.row-ic { width: 22px; height: 22px; color: var(--accent-ink); flex: none; }
.row-chev { width: 18px; height: 18px; color: var(--muted); flex: none; }

.empty { text-align: center; padding: 30px 20px 26px; }
.empty img { width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 22px; opacity: .95; }
.empty b { display: block; font-size: 16px; margin-bottom: 4px; }
.empty p { margin: 0; font-size: 13px; color: var(--muted); }

.theme-card { padding: 16px; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.swatch { border: 0; cursor: pointer; border-radius: 18px; min-height: 76px; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; font-weight: 700; font-size: 14px;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.06); transition: transform .15s var(--ease), box-shadow .2s; position: relative; }
.swatch:active { transform: scale(.96); }
.swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.06), 0 0 0 3px var(--surface), 0 0 0 5.5px var(--accent); }
.swatch .ck { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: none; place-items: center; }
.swatch[aria-pressed="true"] .ck { display: grid; }
.swatch .ck svg { width: 14px; height: 14px; }
.custom-color { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; min-height: 60px; border-radius: 18px; background: var(--surface-2); cursor: pointer; position: relative; }
.custom-color .grow { display: flex; flex-direction: column; flex: 1; font-size: 14px; }
.custom-color .grow .muted { font-size: 12px; }
.custom-color input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; }
.sw-dot { width: 36px; height: 36px; border-radius: 12px; background: conic-gradient(#ffb3c7, #ffe29a, #b9f0d0, #a9d8ff, #cdbcff, #ffb3c7); flex: none; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.08); }
.custom-color[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--accent); }

.space-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.space-head h2 { flex: 1; margin: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mem-row:last-child { border-bottom: 0; }
.mem-row .grow { flex: 1; min-width: 0; }
.mem-row .t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-row .s { font-size: 12px; color: var(--muted); }
.pick-list { display: grid; gap: 8px; margin-top: 8px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 18px 0 10px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }