.comet-social-panel { display:grid; grid-template-rows:auto auto minmax(92px,1fr) auto auto auto auto; width:min(430px,calc(100% - 24px)); max-height:min(780px,calc(100% - 24px)); overflow:hidden; }
.comet-social-tabs { display:none; }
.comet-social-tabs button { min-height:38px; border:1px solid #fff9e6; border-radius:14px; color:#365950; background:linear-gradient(#f7f6df,#d4dfd0); box-shadow:inset 0 2px 2px #fff,0 3px 0 #9ca991; font:800 11px system-ui,sans-serif; }
.comet-social-tabs button[data-active="true"] { color:#fff8d9; background:linear-gradient(#eaa64a,#c46720); box-shadow:inset 0 2px 2px #fff6,0 3px 0 #8e421b; }
.comet-social-tabs button:disabled:not([data-active="true"]) { opacity:.58; }
.comet-social-list { min-height:92px; overflow:auto; display:grid; align-content:start; gap:6px; padding:3px 2px 8px; }
.comet-social-overlay[data-state="loading"] .comet-social-empty { padding: 20px 12px; border-radius: 14px; background: linear-gradient(110deg, #e3ead9, #fff9e7, #e3ead9); background-size: 220% 100%; animation: comet-social-loading 1.5s ease-in-out infinite; }
@keyframes comet-social-loading { 50% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .comet-social-overlay[data-state="loading"] .comet-social-empty { animation: none; } }
.comet-social-row { display:grid; grid-template-columns:46px 1fr auto; gap:8px; align-items:center; min-height:42px; padding:0 13px; border-radius:14px; color:#294b43; background:linear-gradient(150deg,#fffdf0,#dbe5d4); box-shadow:inset 0 2px 2px #fff,0 3px 0 #9eaa95; font:700 12px system-ui,sans-serif; }
.comet-social-row[data-player="true"] { border:2px solid transparent; padding:0 11px; color:#233e35; background:linear-gradient(150deg,#fff5c6,#f0d79a) padding-box,linear-gradient(110deg,#d17a28,#fff4bd,#e8a33c,#fff8d4,#d17a28) border-box; background-size:100% 100%,240% 240%; box-shadow:inset 0 2px 2px #fff,0 3px 0 #a46b29,0 0 7px #e6a43b44; animation:comet-leaderboard-self 3.8s ease-in-out infinite; }
@keyframes comet-leaderboard-self { 0%,100% { background-position:0 0,0% 50%; box-shadow:inset 0 2px 2px #fff,0 3px 0 #a46b29,0 0 7px #e6a43b44; } 50% { background-position:0 0,100% 50%; box-shadow:inset 0 2px 2px #fff,0 3px 0 #a46b29,0 0 12px #f2c65b77; } }
@media (prefers-reduced-motion:reduce) { .comet-social-row[data-player="true"] { animation:none; } }
.comet-social-row b { color:#b96722; }
.comet-social-empty { align-self:center; margin:16px; color:#6b6655; text-align:center; font:700 13px/1.4 system-ui,sans-serif; }
.comet-social-pager { display:flex; justify-content:center; align-items:center; margin:0 3px 10px; color:#617069; text-align:center; font:750 10px system-ui,sans-serif; }
.comet-social-player { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:12px 14px; border:2px solid #f3ddb0; border-radius:18px; color:#294b43; background:linear-gradient(145deg,#fff8dd,#e3e4c7); box-shadow:inset 0 2px 3px #fff,0 4px 0 #9d9a79; font:750 12px/1.25 system-ui,sans-serif; }
.comet-social-player > span { color:#526860; }
.comet-social-share { min-height:40px; padding:0 13px; border:2px solid #ffe5a0; border-radius:15px; color:#fff; background:linear-gradient(#ffad43,#eb6a18); box-shadow:inset 0 2px 2px #fff7,0 3px 0 #a3451b; font:850 12px system-ui,sans-serif; }
.comet-social-share:disabled { color:#77817b; border-color:#e7e6d2; background:linear-gradient(#eef0df,#cfd8c8); box-shadow:inset 0 2px 2px #fff,0 3px 0 #9aa899; }
.comet-social-status { min-height:18px; margin:7px 4px 0; text-align:center; color:#6b6655; font:650 10px/1.3 system-ui,sans-serif; }
@media (max-width:520px) { .comet-social-panel { width:calc(100% - 20px); padding:20px 16px; } .comet-social-player { grid-template-columns:auto 1fr; } .comet-social-share { grid-column:1 / 3; } }
.comet-notification-panel { width:min(390px,calc(100% - 30px)); padding:28px 22px; text-align:center; }
.comet-notification-panel h1 { margin:4px 0 12px; color:#28544c; font:900 clamp(24px,6vw,32px)/1.1 Georgia,serif; }
.comet-notification-panel p { margin:0 0 22px; color:#46645d; font:650 14px/1.45 system-ui,sans-serif; }
.comet-notification-actions { display:grid; gap:10px; }
.comet-notification-actions button { min-height:54px; border:2px solid #f6dea5; border-radius:18px; background:linear-gradient(#ffbb58,#e77521); color:#fff; box-shadow:inset 0 2px 2px #fff8,0 4px 0 #9b4a1b; font:850 15px system-ui,sans-serif; }
.comet-notification-actions button + button { border-color:#fff; background:linear-gradient(#fffef0,#dce6d7); color:#315a50; box-shadow:inset 0 2px 2px #fff,0 3px 0 #9cae9f; }