/* KOLMAR skin gallery */
.skin-gallery { display: grid; gap: 12px; margin: 16px 0 4px; }
.skin-gallery-head { display: grid; gap: 4px; }
.skin-gallery-head strong { font-size: 15px; }
.skin-gallery-head small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.skin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.skin-card { position: relative; display: grid; gap: 8px; min-height: 112px; padding: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: var(--panel-2); cursor: pointer; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.skin-card:hover { border-color: var(--purple); transform: translateY(-1px); }
.skin-card:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(139,92,246,.2); }
.skin-card:has(input:checked) { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(139,92,246,.2); }
.skin-card:has(input:disabled) { cursor: not-allowed; opacity: .62; }
.skin-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.skin-preview { position: relative; display: flex; align-items: end; gap: 5px; height: 76px; padding: 35px 8px 8px; overflow: hidden; border-radius: 10px; background: #0b0b10; }
.skin-preview { isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.skin-preview::before { content: ''; position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.88); box-shadow: 34px 4px 0 -8px rgba(255,255,255,.45); }
.skin-preview::after { content: ''; position: absolute; top: 9px; right: 8px; width: 23px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.55); box-shadow: 0 11px 0 -1px rgba(255,255,255,.28); }
.skin-preview i { display: block; height: 10px; border-radius: 4px; background: rgba(255,255,255,.88); }
.skin-preview i { position: relative; z-index: 1; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.skin-preview i:first-child { width: 42%; }
.skin-preview i:nth-child(2) { width: 27%; opacity: .45; }
.skin-preview i:last-child { width: 16%; margin-left: auto; background: #a970ff; }
.skin-preview.classic { background: linear-gradient(135deg, #0b0b10, #25163d); }
.skin-preview.light { background: linear-gradient(135deg, #fff, #e9def8); }
.skin-preview.light i { background: #3b2850; }
.skin-preview.light i:last-child { background: #7544c1; }
.skin-preview.sunshine { background: linear-gradient(135deg, #fffdf7 0%, #fff2cf 52%, #ff9f2d 100%); }
.skin-preview.sunshine::before { background: #fff3a6; box-shadow: 34px 4px 0 -8px rgba(255,154,44,.55); }
.skin-preview.sunshine::after { background: rgba(236,108,24,.55); box-shadow: 0 11px 0 -1px rgba(236,108,24,.3); }
.skin-preview.sunshine i { background: #251b12; }
.skin-preview.sunshine i:last-child { background: #ef721e; }
.skin-preview.graphite { background: linear-gradient(135deg, #11171b, #2f4245); }
.skin-preview.graphite i:last-child { background: #62d3bd; }
.skin-preview.lavender { background: linear-gradient(135deg, #21152f, #593b79); }
.skin-preview.lavender i:last-child { background: #ff9dca; }
.skin-preview.aurora { background: linear-gradient(135deg, #0e3335, #286a66 48%, #553b83); }
.skin-preview.aurora i:last-child { background: #76f0c8; }
.skin-preview.gold { background: linear-gradient(135deg, #2d2111, #7a5720 48%, #c99a3b); }
.skin-preview.gold i:last-child { background: #ffe08a; }
.skin-preview.locked { background: repeating-linear-gradient(135deg, #25232b 0 8px, #302b36 8px 16px); }
.skin-card-copy { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.skin-card-copy strong { font-size: 12px; }
.skin-card-copy small { color: var(--muted); font-size: 10px; text-align: right; }
.skin-card-copy .skin-selected { color: #b98cff; }
.skin-coming { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid rgba(190,145,255,.25); border-radius: 12px; background: linear-gradient(135deg, rgba(94,54,145,.16), rgba(255,166,207,.08)); }
.skin-coming strong { font-size: 12px; }
.skin-coming span { color: var(--muted); font-size: 11px; line-height: 1.4; }
body.skin-graphite {
  --purple: #47c8b2;
  --purple-2: #2d9b8b;
  --purple-dark: #2d9b8b;
  --line: #2d4043;
  --panel-2: #172125;
  --muted: #9eb1b0;
  --bg: #0b1012;
  --panel: #121a1d;
}
body.skin-graphite .primary-btn, body.skin-graphite .nav-btn.active::before { background: linear-gradient(135deg, #2c9e90, #5bd7bd); }
body.skin-graphite .action-btn:hover, body.skin-graphite .action-btn.liked { color: #5bd7bd; background: rgba(71,200,178,.13); }
body.skin-graphite .skin-card:has(input:checked) { box-shadow: 0 0 0 2px rgba(71,200,178,.22); }
body.skin-lavender {
  --purple: #e48bb7;
  --purple-2: #ba6591;
  --purple-dark: #ba6591;
  --line: #4c365c;
  --panel-2: #291d35;
  --muted: #c2adc9;
  --bg: #120d18;
  --panel: #1d1425;
}
body.skin-lavender .primary-btn { background: linear-gradient(135deg, #ae5f91, #ef9fc6); }
body.skin-lavender .action-btn:hover, body.skin-lavender .action-btn.liked { color: #f2a7cc; background: rgba(228,139,183,.13); }
body.skin-lavender .skin-card:has(input:checked) { box-shadow: 0 0 0 2px rgba(228,139,183,.22); }
body.skin-sunshine {
  color-scheme: light;
  --purple: #ffad5c;
  --purple-2: #f39a45;
  --purple-dark: #df8532;
  --pink: #ffd45f;
  --line: #ffd6a3;
  --panel-2: #fff8ef;
  --muted: #6b5542;
  --bg: #fffaf3;
  --panel: #ffffff;
  --text: #17110c;
}
body.skin-sunshine .app-shell, body.skin-sunshine .content { background: var(--bg); }
body.skin-sunshine .auth-screen { background: radial-gradient(circle at 50% -15%, #ffe36c 0, transparent 43%), var(--bg); }
body.skin-sunshine .auth-card { border-color: var(--line); background: rgba(255,255,255,.95); box-shadow: 0 24px 70px rgba(180,92,18,.14); }
body.skin-sunshine .brand-mark, body.skin-sunshine .primary-btn { background: linear-gradient(135deg, #f59b22, #e65312); }
body.skin-sunshine .nav-btn { color: #765f48; }
body.skin-sunshine .nav-btn:hover, body.skin-sunshine .nav-btn.active { color: var(--text); background: #fff2d3; }
body.skin-sunshine .nav-btn.active { box-shadow: inset 3px 0 0 #ef721e; }
body.skin-sunshine .field input, body.skin-sunshine .field textarea, body.skin-sunshine .chat-input,
body.skin-sunshine .video-url-input, body.skin-sunshine .comment-form input, body.skin-sunshine .search-form input { color: var(--text); background: #fffdf8; border-color: var(--line); }
body.skin-sunshine .secondary-btn, body.skin-sunshine .icon-btn { color: var(--text); background: #fff7e6; border-color: var(--line); }
body.skin-sunshine .secondary-btn:hover, body.skin-sunshine .icon-btn:hover { border-color: #ef9a32; background: #ffedc4; }
body.skin-sunshine .text-btn, body.skin-sunshine .attach-control, body.skin-sunshine .message-btn, body.skin-sunshine .follow-btn { color: #c74d11; }
body.skin-sunshine .story { color: var(--muted); }
body.skin-sunshine .post-content, body.skin-sunshine .profile-bio, body.skin-sunshine .comment-row p,
body.skin-sunshine .bubble, body.skin-sunshine .empty-state strong, body.skin-sunshine .trend strong { color: var(--text); }
body.skin-sunshine .bubble { background: #fff1d2; }
body.skin-sunshine .action-btn:hover, body.skin-sunshine .action-btn.liked { color: #d95412; background: #fff0d0; }
body.skin-sunshine .channel-hero { background: linear-gradient(135deg, #fff7e6, #ffe5a6); }
body.skin-sunshine .channel-join-callout, body.skin-sunshine .notification-item:hover, body.skin-sunshine .notification-item.unread { background: #fff5dc; }
body.skin-sunshine .channel-card-main:hover strong { color: #d95412; }
body.skin-sunshine .mobile-bottom-nav { background: rgba(255,255,255,.98); box-shadow: 0 -10px 30px rgba(180,92,18,.12); }
body.skin-sunshine .mobile-bottom-nav .nav-btn { color: #806a52; }
body.skin-sunshine .mobile-bottom-nav .nav-btn.active, body.skin-sunshine .mobile-bottom-nav .nav-btn.active .nav-icon { color: var(--text); }
body.skin-sunshine .skin-card:has(input:checked) { border-color: #ef721e; box-shadow: 0 0 0 2px rgba(239,114,30,.2); }
body.skin-sunshine .skin-card-copy .skin-selected { color: #d95412; }
body.skin-sunshine .skin-coming { border-color: rgba(239,114,30,.28); background: linear-gradient(135deg, #fff2ce, #fff); }
body.skin-sunshine .skin-preview.sunshine { box-shadow: inset 0 0 0 2px rgba(239,114,30,.42), 0 0 18px rgba(255,193,48,.22); }
body.skin-sunshine .spark-badge, body.skin-sunshine .spark-balance { color: #a34a0b; background: #fff0c7; border-color: #efbd56; }
body.skin-sunshine .spark-card { background: linear-gradient(135deg, #fff0bd, #fff); border-color: #efc86c; }
body.skin-sunshine .spark-card-head small, body.skin-sunshine .spark-card p, body.skin-sunshine .analytics-hint, body.skin-sunshine .permission-copy { color: #765f48; }
body.skin-sunshine .spark-progress { background: #f7dfaa; }
body.skin-sunshine .spark-progress span { background: linear-gradient(90deg, #ef721e, #ffd447); }
body.skin-sunshine .channel-type-label { color: #c74d11; }
body.skin-sunshine .playlist-chip.active { color: #fff; background: #ef721e; }
body.skin-sunshine .playlist-tag { color: #a34a0b; background: #fff0c7; }
body.skin-sunshine .story-mask.active { color: #fff; }
body.skin-sunshine .media-preview, body.skin-sunshine .upload-zone { background: #fffaf0; }
body.skin-sunshine .channel-analytics { background: linear-gradient(135deg, #fff0bd, #fff); border-color: #efc86c; }
body.skin-sunshine .analytics-stats > div { background: rgba(255,255,255,.72); border-color: #efd39a; }
body.skin-sunshine .analytics-stats span { color: #765f48; }
body.skin-sunshine .permission-state { color: #6d4d25; background: #fff1d2; }
body.skin-sunshine .permission-warning { color: #91441d; background: #fff0e8; }

/* Sunshine keeps channel names readable over light cards and uploaded banners. */
body.skin-sunshine .primary-btn {
  color: #24170b;
  background: linear-gradient(135deg, #ffd08a, #ffad5c);
  border-color: #f3a04d;
}
body.skin-sunshine .primary-btn:hover { background: linear-gradient(135deg, #ffd99f, #ffbd73); }
body.skin-sunshine .channel-hero,
body.skin-sunshine .channel-card {
  color: var(--text);
  background: linear-gradient(135deg, #fff8ee, #ffdcae);
}
body.skin-sunshine .channel-hero.has-banner::before {
  background: linear-gradient(110deg, rgba(255,250,243,.96), rgba(255,215,166,.82)), var(--channel-banner) center / cover;
  opacity: 1;
}
body.skin-sunshine .channel-identity h2,
body.skin-sunshine .channel-identity p,
body.skin-sunshine .channel-identity .muted,
body.skin-sunshine .channel-card-main strong,
body.skin-sunshine .channel-card-main small,
body.skin-sunshine .channel-card-main em {
  color: var(--text) !important;
  text-shadow: none;
}
body.skin-sunshine .channel-type-label { color: #c96f20 !important; }
body.skin-sunshine .channel-card-main:hover strong { color: #b85e12 !important; }
@media (min-width: 560px) { .skin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Sunshine: the create-clip panel keeps the light orange identity too. */
body.skin-sunshine .short-video-composer {
  color: var(--text);
  border-color: #f3c27b;
  background: linear-gradient(135deg, #fff9ef, #ffe8bd);
  box-shadow: 0 12px 30px rgba(188, 105, 22, .10);
}
body.skin-sunshine .short-video-composer-head small,
body.skin-sunshine .short-video-upload-preview {
  color: #765f48;
}
body.skin-sunshine .shorts-symbol {
  color: #3b220e;
  background: linear-gradient(135deg, #ffe29d, #ffb86b);
  box-shadow: 0 6px 16px rgba(239, 114, 30, .18);
}
body.skin-sunshine .short-caption-input {
  color: var(--text);
  background: #fffdf8;
  border-color: #f3c27b;
}
body.skin-sunshine .short-caption-input:focus {
  border-color: #ef9a32;
  box-shadow: 0 0 0 3px rgba(239, 154, 50, .16);
}
body.skin-sunshine .short-video-composer .attach-control {
  color: #9b4d12;
  background: #fff5df;
  border-color: #f3c27b;
}
body.skin-sunshine .short-video-composer .attach-control:hover {
  background: #ffedc8;
  border-color: #ef9a32;
}
body.skin-sunshine .short-video-composer-footer .primary-btn {
  color: #3b220e;
  background: linear-gradient(135deg, #ffd08a, #ffad5c);
}