.groups-social-nav{display:flex;gap:8px;margin:0 0 22px;padding:5px;background:var(--accent-soft,#f2edff);border-radius:14px;width:fit-content;max-width:100%}
.groups-social-nav .groups-button[aria-current=page]{background:var(--paper,#fff);box-shadow:0 2px 8px #48307712;color:var(--ink,#172342)}
.groups-root{max-width:1080px;margin:auto;color:var(--ink,#172342);padding-bottom:30px}
.groups-root *,.groups-dialog *{box-sizing:border-box}
.groups-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 15px;border:1px solid var(--line,#e2dcee);border-radius:11px;color:var(--ink,#172342);background:var(--paper,#fff);font-size:12px;font-weight:600;line-height:1.4;text-align:center;text-decoration:none}
.groups-button:hover{background:var(--accent-soft,#f0eaff)}
.groups-button.is-primary{background:linear-gradient(120deg,#7447d5,#9253dd);color:white;border-color:transparent}
.groups-button:disabled{opacity:.5;cursor:wait}
.groups-button:focus-visible,.groups-tabs button:focus-visible{outline:3px solid #9d6ceb;outline-offset:3px}
.groups-header,.groups-section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:22px 0}
.groups-header h2{font:600 clamp(24px,3vw,34px)/1.25 Poppins,Inter,sans-serif;letter-spacing:-1px;margin:10px 0}
.groups-header p,.groups-section-heading p{font-size:13px;color:var(--muted,#68718a);line-height:1.7;margin:8px 0}
.groups-header>div{min-width:0}.groups-header h2,.groups-card h3{overflow-wrap:anywhere}
.groups-header>div>span:last-child{font-size:12px;color:var(--muted,#68718a)}
.groups-eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--accent,#8250cb);text-transform:uppercase}
.groups-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.groups-card{display:flex;align-items:flex-start;gap:18px;padding:22px;border:1px solid var(--line,#e2dcee);border-radius:20px;background:var(--paper,#fff)}
.groups-card h3{font-size:18px;margin:12px 0 8px}.groups-card p{font-size:12px;color:var(--muted,#68718a);line-height:1.6}.groups-card small{font-size:11px;color:var(--muted,#68718a)}
.groups-card-star{display:grid;place-items:center;width:70px;height:86px;flex-shrink:0;border-radius:14px;color:#a84bd2;background:linear-gradient(140deg,#f0ddff,#dcecff);font-size:34px}
.groups-book-cover{display:block;width:80px;height:120px;object-fit:contain;border-radius:7px;flex-shrink:0}
.groups-book-placeholder{display:grid;place-items:center;width:90px;height:130px;border-radius:10px;background:var(--accent-soft,#f2edff);font-size:32px;flex-shrink:0}
.groups-card-actions,.groups-settings{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.groups-pill{display:inline-block;border-radius:20px;padding:5px 9px;background:var(--accent-soft,#f0eaff);color:var(--accent,#7240bf);font-size:10px;font-weight:600}
.groups-tabs{display:flex;gap:7px;overflow-x:auto;padding:0 2px 10px;margin:22px 0;scrollbar-width:thin}
.groups-tabs .groups-button{flex-shrink:0;border-color:transparent;background:transparent;white-space:nowrap}
.groups-tabs [aria-current=page]{background:var(--accent-soft,#f0eaff);color:var(--accent,#7240bf);border-color:var(--line,#e2dcee)}
.groups-content{min-width:0}.groups-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.groups-overview-grid>button{padding:26px;border:1px solid var(--line,#e2dcee);border-radius:18px;background:linear-gradient(130deg,var(--accent-soft,#f2edff),var(--paper,#fff));color:var(--ink,#172342);text-align:left}
.groups-overview-grid h3{font-size:21px;margin:14px 0 10px;line-height:1.4}.groups-overview-grid p{font-size:13px;color:var(--muted,#68718a);line-height:1.8}.groups-overview-grid>button>span:last-child{font-size:12px;font-weight:600;color:var(--accent,#7240bf)}
.groups-empty{padding:40px 26px;border:1px dashed var(--line,#ded3ef);border-radius:20px;text-align:center;background:var(--paper,#fff)}
.groups-empty h2,.groups-empty h3{margin:12px 0;color:var(--ink,#172342)}
.groups-empty p{font-size:13px;color:var(--muted,#68718a);line-height:1.8;max-width:540px;margin:12px auto}
.groups-hint{font-size:12px;line-height:1.8;color:var(--muted,#68718a)}
.groups-notice{padding:13px 16px;border:1px solid var(--line,#ded3ef);border-radius:12px;color:var(--ink,#172342);background:var(--accent-soft,#f0eaff);font-size:12px;line-height:1.7}
.groups-notice .groups-button{margin-left:10px;min-height:34px;padding:6px 12px}
.groups-invite-banner{padding:22px;border:1px solid var(--line,#ded3ef);border-radius:20px;background:var(--accent-soft,#f0eaff);display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.groups-invite-banner>div{flex:1;min-width:180px}.groups-invite-banner p{font-size:12px;line-height:1.7}
.groups-book-feature{display:flex;gap:24px;align-items:center;padding:24px;background:var(--accent-soft,#f2edff);border-radius:18px}
.groups-book-feature .groups-book-cover{width:110px;height:165px}.groups-book-feature h3{font-size:23px;margin:12px 0 8px}.groups-book-feature p{font-size:13px;line-height:1.7;color:var(--muted,#68718a)}
.groups-progress-list article{padding:18px 0;border-bottom:1px solid var(--line,#e2dcee)}
.groups-progress-list article>div{display:flex;justify-content:space-between;gap:14px;margin-bottom:10px;font-size:13px}
.groups-progress-list article span{font-size:12px;color:var(--muted,#68718a)}
.groups-root progress{appearance:none;display:block;width:100%;height:7px;border:0;border-radius:10px;background:var(--accent-soft,#eee7f8);overflow:hidden}
.groups-root progress::-webkit-progress-bar{background:var(--accent-soft,#eee7f8);border-radius:10px}.groups-root progress::-webkit-progress-value{background:linear-gradient(90deg,#7b40e7,#d047d4,#32c9e0);border-radius:10px}.groups-root progress::-moz-progress-bar{background:linear-gradient(90deg,#7b40e7,#d047d4,#32c9e0);border-radius:10px}
.groups-member-list article{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 0;border-bottom:1px solid var(--line,#e2dcee)}
.groups-member-list small{display:block;font-size:11px;color:var(--muted,#68718a);margin-top:6px}.groups-member-list article>div:last-child{display:flex;gap:8px;flex-wrap:wrap}
.groups-event{padding:24px;border:1px solid var(--line,#e2dcee);border-radius:20px;margin:20px 0;background:var(--paper,#fff)}
.groups-event>h3{font-size:23px;margin:12px 0}.groups-event>p{font-size:12px;line-height:1.8;color:var(--muted,#68718a)}
.groups-event-clock{color:var(--accent,#7240bf)!important;font-variant-numeric:tabular-nums;font-weight:600}
.groups-leaderboard{list-style:none;padding:0;margin:20px 0}.groups-leaderboard li{display:flex;align-items:center;gap:15px;padding:14px 0;border-bottom:1px solid var(--line,#e2dcee)}
.groups-leaderboard li>div{flex:1;min-width:0}.groups-leaderboard small{display:block;margin:6px 0 10px;font-size:11px;color:var(--muted,#68718a)}
.groups-rank{display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;border-radius:50%;font-size:14px;background:var(--accent-soft,#f0eaff);color:var(--accent,#7240bf)}
.groups-rank.is-podium{background:linear-gradient(145deg,#ffebba,#dfac56);color:#634317}
.groups-post{padding:20px;border:1px solid var(--line,#e2dcee);border-radius:15px;margin:14px 0;background:var(--paper,#fff);overflow-wrap:anywhere}
.groups-post.is-reply{margin-left:28px;border-left:3px solid var(--accent,#8955d3)}
.groups-post header{display:flex;justify-content:space-between;gap:15px;font-size:12px}.groups-post time{font-size:10px;color:var(--muted,#68718a)}
.groups-post-body{white-space:pre-wrap;line-height:1.85;font-size:13px}.groups-post summary{cursor:pointer;padding:14px 0;color:var(--accent,#7240bf);font-size:12px;line-height:1.6}
.groups-post-actions{display:flex;gap:8px;flex-wrap:wrap}.groups-post-actions .groups-button{min-height:34px;font-size:11px;padding:6px 10px}
.groups-dialog{width:min(540px,calc(100% - 28px));max-height:calc(100dvh - 36px);overflow:auto;padding:26px;border:1px solid var(--line,#e2dcee);border-radius:20px;background:var(--paper,#fff);color:var(--ink,#172342);box-shadow:0 18px 70px #180c4c40}
.groups-dialog::backdrop{background:#14122b99;backdrop-filter:blur(4px)}
.groups-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.groups-dialog h2{font-size:23px;margin:0 0 20px;line-height:1.4}.groups-dialog header>button{width:40px;height:40px;border-radius:50%;background:var(--accent-soft,#eee7f8);flex-shrink:0}
.groups-dialog label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600;margin:16px 0}.groups-dialog p{font-size:12px;line-height:1.8}
.groups-dialog input,.groups-dialog select,.groups-dialog textarea{width:100%;padding:12px;border:1px solid var(--line,#d9d3e5);border-radius:10px;background:var(--paper,#fff);color:var(--ink,#172342);font:inherit;font-size:16px;min-width:0}
.groups-dialog .groups-checkbox{flex-direction:row;align-items:center;line-height:1.7}.groups-dialog .groups-checkbox input{width:20px;height:20px}
.groups-form-error{color:var(--accent,#8b45b4);min-height:1em}.groups-dialog form>.groups-button[type=submit]{width:100%}
@media(max-width:650px){.groups-overview-grid{grid-template-columns:1fr}.groups-header,.groups-section-heading{align-items:flex-start;flex-wrap:wrap;gap:12px}.groups-header h2{font-size:26px}.groups-card{padding:18px}.groups-book-feature{padding:18px;gap:16px}.groups-book-feature .groups-book-cover{width:80px;height:120px}.groups-book-feature h3{font-size:19px}.groups-event{padding:18px}.groups-member-list article{align-items:flex-start;flex-wrap:wrap}.groups-progress-list article>div,.groups-post header{flex-wrap:wrap;gap:6px}.groups-dialog{padding:20px}.groups-post.is-reply{margin-left:14px}}
:is(.phone-preview,.app-preview) .groups-overview-grid{grid-template-columns:1fr}
:is(.phone-preview,.app-preview) :is(.groups-header,.groups-section-heading,.groups-member-list article){flex-wrap:wrap;align-items:flex-start;gap:12px}
:is(.phone-preview,.app-preview) .groups-post header{flex-wrap:wrap;gap:6px}
@media(prefers-reduced-motion:no-preference){.groups-card,.groups-overview-grid>button{transition:transform .2s,box-shadow .2s}.groups-overview-grid>button:hover,.groups-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #7747b610}}
#socialView:has(.groups-root){padding:18px clamp(16px,2vw,28px)}
.groups-social-nav .groups-button{background:transparent;border-color:transparent}
.groups-social-nav .groups-button[aria-current=page]{background:var(--paper,#fff);border-color:var(--line,#e2dcee)}
:is(.phone-preview,.app-preview) .groups-book-feature{padding:18px;gap:16px}
:is(.phone-preview,.app-preview) .groups-book-feature .groups-book-cover{width:80px;height:120px}
:is(.phone-preview,.app-preview) .groups-book-feature h3{font-size:19px}
/* Distinct activity colors and compact conversation threads. */
.groups-testing-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;padding:12px 16px;margin-bottom:20px;border:1px solid #d3b5ed;border-radius:13px;background:linear-gradient(110deg,#f2e5ff,#e8f4ff);color:#49346c}
#socialView .groups-testing-bar label{display:inline-flex;flex-direction:row;align-items:center;gap:9px;margin:0;font-size:12px;font-weight:700;cursor:pointer}.groups-testing-bar input{width:17px;height:17px;accent-color:#8650cb}.groups-testing-bar>span{font-size:11px;line-height:1.6;color:#665477}
.groups-header{padding:24px;border-radius:20px;background:linear-gradient(115deg,#5142a8,#8754c1 65%,#ad5eab);box-shadow:0 8px 22px #704bc11a;color:#fff}
.groups-header h2{color:#fff}.groups-header .groups-eyebrow,.groups-header>div>span:last-child{color:#e9d9ff}.groups-header p{color:#eee6fb}
.groups-header>.groups-button.is-primary{background:#fff;color:#6841a5;box-shadow:0 4px 14px #28114b20}
.groups-content{padding:22px;border:1px solid #ddd6ee;border-radius:20px;background:#f7f6fc}
.groups-tabs{gap:8px}.groups-tabs .groups-button{background:#ece8f7;color:#625078;border:1px solid #ddd5ed}
.groups-tabs [data-tab=book]{background:#f8e6ef;color:#99567d}.groups-tabs [data-tab=marathon]{background:#e1f1f0;color:#227e7c}.groups-tabs [data-tab=discussion]{background:#e4edfb;color:#3c68a1}.groups-tabs [data-tab=members]{background:#fff1d9;color:#946a2f}
.groups-tabs [aria-current=page]{background:#7750bd!important;color:#fff!important;border-color:#7750bd;box-shadow:0 4px 12px #7348ae24}
.groups-overview-grid>button:first-child{background:linear-gradient(130deg,#ede2fc,#f8ecfa);border-color:#d6bde9}
.groups-overview-grid>button:last-child{background:linear-gradient(130deg,#dcf1f0,#e9f5ff);border-color:#b7dedc}
.groups-overview-grid>button:last-child .groups-eyebrow,.groups-overview-grid>button:last-child>span:last-child{color:#207a7c}
.groups-book-feature{background:linear-gradient(120deg,#f6e4ee,#eee8fc);border:1px solid #e5c8df}
.groups-card{border-color:#d8cae7;border-top:4px solid #aa79ca;background:linear-gradient(145deg,#fff,#f5effa)}
.groups-event{border-color:#bcdedb;border-top:4px solid #45a9ac;background:linear-gradient(150deg,#fff,#eff8f8)}
.groups-progress-list article{background:#fff;padding:14px;margin:8px 0;border:1px solid #e4dced;border-radius:12px}
.groups-member-list article{padding:13px;margin:8px 0;background:#fff;border:1px solid #e3d9ed;border-radius:12px}
.groups-member-identity{display:flex;gap:10px;align-items:center;min-width:0}.groups-member-identity>div{min-width:0}.groups-member-identity strong{font-size:12px;overflow-wrap:anywhere}
.groups-button.is-danger{color:#a54362;border-color:#e7c7d1;background:#fff5f7}
.groups-thread-list{display:flex;flex-direction:column;gap:12px}
.groups-thread{padding:12px 14px;border:1px solid #ddd5e8;border-left:3px solid #ae85d4;border-radius:13px;background:#fff;min-width:0}
.groups-thread>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.groups-chat-identity{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.groups-chat-identity>strong{font-size:11px;font-weight:650;color:#604286;overflow-wrap:anywhere}
.groups-chat-identity>time{margin-left:auto;font-size:9px;color:#9b8daa;white-space:nowrap}
.groups-chat-avatar{width:30px;height:30px;flex:0 0 30px;border-radius:50%;object-fit:cover;border:1px solid #e1d7eb;background:#e9dcf7}
.groups-avatar-fallback{display:grid;place-items:center;color:#7e55a7;font-size:12px;font-weight:700}
.groups-thread .groups-post-body{font-size:12px;line-height:1.65;margin:8px 0;max-height:150px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:#4a4057}
.groups-replies{max-height:265px;overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 2px 0;margin-top:10px;scrollbar-width:thin;scrollbar-color:#cbb2e2 transparent;border-top:1px solid #f0ebf5}
.groups-reply{padding:9px 0;border-bottom:1px solid #f0ebf5}
.groups-reply:last-child{border-bottom:0}.groups-reply .groups-chat-avatar{width:25px;height:25px;flex-basis:25px}.groups-reply .groups-chat-identity>strong{font-size:10px}
.groups-reply .groups-post-body{font-size:11px;margin:3px 0 5px 33px;max-height:100px}
.groups-reply .groups-post-actions{margin-left:33px}
.groups-reply .groups-post-actions .groups-button{min-height:25px;padding:3px 6px;border:0;background:transparent;font-size:9px;color:#9a86ac}
.groups-spoiler-thread{border-radius:9px;background:#faf4fe;overflow:hidden}
.groups-spoiler-thread>summary{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:11px 12px;color:#8c4ca7;list-style:none}
.groups-spoiler-thread>summary::-webkit-details-marker{display:none}.groups-spoiler-thread>summary>strong{font-size:11px}.groups-spoiler-thread>summary>strong::before{content:'\25B8';margin-right:7px}.groups-spoiler-thread[open]>summary>strong::before{content:'\25BE'}
.groups-spoiler-thread>summary>span{font-size:10px;color:#a17fb1}.groups-spoiler-thread[open]{padding:0 10px 6px}.groups-spoiler-thread[open]>summary{padding-left:0}
.groups-reply details summary{cursor:pointer;color:#8752a6;font-size:10px;padding:5px 0 5px 33px}
.groups-thread-footer{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:10px}.groups-thread-footer>small{font-size:10px;color:#a18cae;margin-right:auto}
.groups-thread-footer>.groups-button{min-height:30px;padding:5px 11px;font-size:10px;border-color:#e2d5ec;background:#f4edf9;color:#8055a1}
.groups-thread-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;padding-top:7px;border-top:1px dashed #eee4f6}
.groups-thread-tools>.groups-button{padding:3px 6px;min-height:26px;border:0;background:transparent;color:#a28aae;font-size:9px}.groups-thread-tools>.groups-button.is-danger{color:#b4758c}
html[data-app-theme=dark] .groups-testing-bar{background:linear-gradient(110deg,#39284b,#20334d);border-color:#68517e;color:#e2d4f5}html[data-app-theme=dark] .groups-testing-bar>span{color:#c8b8d9}
html[data-app-theme=dark] .groups-content{background:#181d2b;border-color:#423750}
html[data-app-theme=dark] :is(.groups-thread,.groups-progress-list article,.groups-member-list article){background:#242537;border-color:#48405a}
html[data-app-theme=dark] .groups-thread .groups-post-body{color:#d9d2e3}html[data-app-theme=dark] .groups-chat-identity>strong{color:#d7b8f5}
html[data-app-theme=dark] .groups-spoiler-thread{background:#34233e}html[data-app-theme=dark] .groups-spoiler-thread>summary{color:#dab4e6}
html[data-app-theme=dark] .groups-book-feature{background:linear-gradient(120deg,#382639,#2c2546);border-color:#5f425c}
html[data-app-theme=dark] .groups-overview-grid>button:first-child{background:linear-gradient(130deg,#352641,#292536);border-color:#59416c}
html[data-app-theme=dark] .groups-overview-grid>button:last-child{background:linear-gradient(130deg,#1e3939,#243042);border-color:#3d6869}
html[data-app-theme=dark] .groups-card{background:#282435;border-color:#64516f}html[data-app-theme=dark] .groups-event{background:#1e3036;border-color:#437174}
@media(max-width:650px){.groups-header{padding:20px}.groups-content{padding:13px}.groups-thread{padding:10px}.groups-chat-identity>time{font-size:8px}.groups-replies{max-height:235px}.groups-chat-identity{gap:6px}.groups-thread-tools>.groups-button{min-height:30px}}
:is(.phone-preview,.app-preview) .groups-content{padding:13px}
:is(.phone-preview,.app-preview) .groups-thread{padding:10px}