/* CLINED — Teman & Duel (v2) */
#socialPage .ub-head, #duelPage .ub-head { padding: 6px 8px; }
.soc-body { display: grid; gap: 12px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.soc-card { padding: 14px !important; display: grid; gap: 12px; }
.soc-card h3 { margin: 0; font-size: 17px; }
.soc-card h4 { margin: 0 0 6px; font-size: 12px; font-weight: 900; opacity: .65; text-transform: uppercase; letter-spacing: .05em; }
.soc-title { display: flex; align-items: center; gap: 10px; }
.soc-title > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(28,176,246,.14); font-size: 19px; }
.soc-body button { min-height: 48px; font-size: 14px; font-weight: 900; border-radius: 14px; padding: 0 14px; white-space: nowrap; }
.soc-body select, .soc-body input[type=text] { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 16px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--line, #e5e7eb); background: var(--surface, #f4f6f7); color: inherit; font-family: inherit; }
.soc-hint, .soc-empty { margin: 0; font-size: 12.5px; font-weight: 700; opacity: .7; line-height: 1.45; }
.soc-big { width: 100%; min-height: 52px !important; font-size: 15px !important; }

/* pengaturan duel */
.soc-setup { background: linear-gradient(180deg, rgba(28,176,246,.10), transparent 55%), var(--card, #fff); }
.soc-opt-row { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: center; }
.soc-lab { font-size: 13px; font-weight: 900; line-height: 1.2; } .soc-lab small { display: block; font-weight: 700; opacity: .6; font-size: 10.5px; }
.soc-seg { display: grid; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface, #f4f6f7); border: 2px solid var(--line, #e5e7eb); }
.soc-seg.n3 { grid-template-columns: repeat(3, 1fr); } .soc-seg.n5 { grid-template-columns: repeat(5, 1fr); }
.soc-seg button { min-height: 42px !important; padding: 0 !important; border-radius: 10px; background: transparent; border: 0; box-shadow: none; color: inherit; font-size: 14px; }
.soc-seg button.on { background: #1cb0f6; color: #fff; box-shadow: 0 3px 0 #1186bd; }
.soc-join { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.soc-join [data-soc-code] { text-transform: uppercase; text-align: center; letter-spacing: .3em; font-weight: 900; }

/* duel berjalan & undangan */
.soc-lives { display: grid; gap: 8px; }
.soc-live { display: grid !important; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 8px 12px !important; border: 2px solid #ff9600 !important; border-bottom-width: 4px !important; background: rgba(255,150,0,.12) !important; color: inherit; }
.soc-live-ico { font-size: 24px; text-align: center; } .soc-go { font-size: 12.5px; color: #e07b00; }
.soc-invite { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 18px; border: 2px solid #58cc02; border-bottom-width: 4px; background: rgba(88,204,2,.12); }
.soc-invite .soc-btns { flex: none; }

/* teman */
.soc-sec { display: grid; gap: 8px; }
.soc-friend { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 16px; border: 2px solid var(--line, #e5e7eb); background: var(--card, #fff); }
.soc-av { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #1cb0f6, #7c5cff); color: #fff; font-size: 14px; font-weight: 950; }
.soc-av.opp { background: linear-gradient(135deg, #ff9600, #ff4b4b); }
.soc-av.on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #58cc02; border: 2px solid var(--card, #fff); }
.soc-who { min-width: 0; display: grid; gap: 2px; }
.soc-who b { font-size: 14px; overflow-wrap: anywhere; } .soc-who small { font-size: 12px; font-weight: 700; opacity: .7; }
.soc-on { color: #46a302; opacity: 1; font-weight: 900; }
.soc-btns { display: flex; gap: 8px; } .soc-btns button { min-height: 44px; }
.soc-fight { min-height: 44px !important; }
.soc-more { grid-column: 1 / -1; margin: -2px 0 0; }
.soc-more summary { cursor: pointer; list-style: none; text-align: center; font-size: 13px; font-weight: 900; opacity: .55; min-height: 28px; line-height: 28px; }
.soc-more summary::-webkit-details-marker { display: none; }
.soc-more .soc-btns { margin-top: 4px; } .soc-more .soc-btns > * { flex: 1; }
.soc-danger { color: #d33a3a !important; border-color: rgba(255,75,75,.5) !important; }
.soc-dot { position: absolute; top: 6px; right: 6px; margin: 0; font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 99px; background: #ff4b4b; color: #fff; font-size: 11px; font-weight: 900; box-shadow: 0 0 0 2px var(--card, #fff); }
.soc-dot[hidden] { display: none; }
#socialBtn { position: relative; }

/* ruang duel */
.soc-center { text-align: center; justify-items: center; }
.soc-center p { margin: 0; font-weight: 700; opacity: .8; }
.soc-emoji { font-size: 46px; line-height: 1; }
.soc-pulse { animation: socPulse 1.4s ease-in-out infinite; }
@keyframes socPulse { 50% { transform: scale(1.12); opacity: .75; } }
.soc-code { font-size: 36px; font-weight: 950; letter-spacing: .26em; padding: 10px 12px 10px 22px; border-radius: 18px; background: rgba(28,176,246,.12); color: #0b7cb4; border: 2px dashed #1cb0f6; user-select: all; }
:root.dark .soc-code { color: #7cd3ff; }
.soc-btns2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.soc-vs-av { display: flex; align-items: center; gap: 12px; } .soc-vs-av .soc-av { width: 56px; height: 56px; font-size: 18px; } .soc-vs-av b { font-size: 18px; }
.soc-count { font-size: 88px; font-weight: 950; line-height: 1; color: #1cb0f6; animation: socPulse 1s ease-in-out infinite; }

.duel-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.duel-side { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 10px 10px 14px; border-radius: 16px; border: 2px solid var(--line, #e5e7eb); background: var(--card, #fff); min-width: 0; }
.duel-side .soc-av { width: 34px; height: 34px; font-size: 12px; }
.duel-side b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-side span { font-size: 11.5px; font-weight: 800; opacity: .8; }
.duel-side i { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 6px; border-radius: 99px; background: var(--line, #e5e7eb); overflow: hidden; }
.duel-side i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: #58cc02; border-radius: inherit; transition: width .3s; }
.duel-side.opp i::after { background: #ff9600; }
.duel-vs { display: grid; place-items: center; align-content: center; gap: 2px; } .duel-vs span { font-weight: 950; font-size: 14px; color: #ff4b4b; }
.duel-vs small { font-weight: 800; font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }

.soc-qtimer { position: relative; height: 26px; border-radius: 99px; background: var(--line, #e5e7eb); overflow: hidden; }
.soc-qtimer i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #58cc02, #1cb0f6); border-radius: inherit; transition: width .2s linear, background .3s; }
.soc-qtimer i[data-low="1"] { background: linear-gradient(90deg, #ff4b4b, #ff9600); }
.soc-qtimer b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 950; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.soc-qn { font-weight: 900; opacity: .6; }
.soc-q { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.5; }
.soc-opts { display: grid; gap: 8px; }
.soc-opt { display: grid !important; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left; white-space: normal !important; min-height: 56px !important; padding: 8px 12px !important; border: 2px solid var(--line, #e5e7eb); border-bottom-width: 4px; background: var(--card, #fff); color: inherit; font-weight: 700 !important; line-height: 1.4; }
.soc-opt:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.soc-l { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--surface, #eef1f2); font-weight: 950; }
.soc-opt:disabled { opacity: 1; }
.soc-opt.ok { border-color: #58cc02; background: rgba(88,204,2,.16); } .soc-opt.ok .soc-l { background: #58cc02; color: #fff; }
.soc-opt.bad { border-color: #ff4b4b; background: rgba(255,75,75,.12); } .soc-opt.bad .soc-l { background: #ff4b4b; color: #fff; }
.soc-fb { padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; } .soc-fb p { margin: 6px 0 0; font-weight: 700; }
.soc-fb.ok { background: rgba(88,204,2,.14); } .soc-fb.bad { background: rgba(255,75,75,.12); }

.soc-result.win { border-color: #58cc02 !important; background: linear-gradient(180deg, rgba(88,204,2,.14), transparent 60%), var(--card, #fff); }
.soc-result.lose { border-color: #ff9600 !important; }
.soc-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.soc-score { display: grid; gap: 2px; padding: 10px; border-radius: 14px; background: var(--surface, #f4f6f7); }
.soc-score.me { background: rgba(28,176,246,.14); }
.soc-score b { font-size: 30px; line-height: 1.1; } .soc-score b em { font-style: normal; font-size: 14px; opacity: .6; }
.soc-score small, .soc-score span { font-size: 12px; font-weight: 800; opacity: .75; }
.soc-rev { border-top: 2px solid var(--line, #e5e7eb); padding: 8px 0; }
.soc-rev summary { cursor: pointer; display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; font-weight: 800; min-height: 40px; }
.soc-rn { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface, #eef1f2); font-size: 12px; }
.soc-rn.ok { background: #58cc02; color: #fff; } .soc-rn.bad { background: #ff4b4b; color: #fff; }
.soc-rev ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.soc-rev li.ok { color: #2f7a00; font-weight: 800; } :root.dark .soc-rev li.ok { color: #a8f060; }
.soc-rev em { font-style: normal; font-size: 10.5px; font-weight: 900; padding: 1px 7px; border-radius: 99px; background: #1cb0f6; color: #fff; margin-left: 4px; } .soc-rev em.opp { background: #ff9600; }
.soc-pemb { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; opacity: .8; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .soc-pulse, .soc-count { animation: none; } }

/* tab & status */
.soc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 16px; background: var(--surface, #f4f6f7); border: 2px solid var(--line, #e5e7eb); grid-column: 1 / -1; }
.soc-tabs button { min-height: 44px; border-radius: 12px; background: transparent; border: 0; box-shadow: none; color: inherit; font-size: 13.5px; }
.soc-tabs button.on { background: #1cb0f6; color: #fff; box-shadow: 0 3px 0 #1186bd; }
.soc-feed { display: grid; gap: 10px; }
.soc-post { display: grid; gap: 8px; padding: 12px; border-radius: 18px; border: 2px solid var(--line, #e5e7eb); background: var(--card, #fff); }
.soc-post.own { border-color: rgba(28,176,246,.55); background: linear-gradient(180deg, rgba(28,176,246,.07), transparent), var(--card, #fff); }
.soc-post-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.soc-mood { font-size: 28px; line-height: 1; }
.soc-post-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.soc-post-chips span { font-size: 11.5px; font-weight: 900; padding: 3px 10px; border-radius: 99px; background: rgba(28,176,246,.14); color: #0b7cb4; }
:root.dark .soc-post-chips span { color: #7cd3ff; }
.soc-post-msg { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.soc-post-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.soc-reacts { display: flex; gap: 6px; flex-wrap: wrap; }
.soc-body .soc-react { min-height: 38px; padding: 0 10px; border-radius: 99px; font-size: 16px; border: 2px solid var(--line, #e5e7eb); border-bottom-width: 3px; background: var(--card, #fff); display: inline-flex; align-items: center; gap: 4px; }
.soc-react i { font-style: normal; font-size: 11.5px; font-weight: 900; opacity: .75; }
.soc-body .soc-react.on { border-color: #1cb0f6; background: rgba(28,176,246,.16); }
.soc-body .soc-del { min-height: 38px; width: 38px; padding: 0; border-radius: 12px; background: transparent; border: 0; box-shadow: none; opacity: .6; }
.soc-emptybox { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 24px 12px; border: 2px dashed var(--line, #e5e7eb); border-radius: 18px; }
.soc-emptybox p { margin: 0; font-size: 13px; font-weight: 700; opacity: .7; max-width: 300px; line-height: 1.5; }

/* dialog tulis status */
.stc-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stc-chips span, .stc-score { font-size: 12.5px; font-weight: 900; padding: 5px 12px; border-radius: 99px; background: rgba(28,176,246,.14); color: #0b7cb4; display: inline-flex; align-items: center; gap: 6px; }
.stc-score input { width: 18px; height: 18px; }
.stc-moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.stc-moods button { min-height: 62px; padding: 4px 0; border-radius: 14px; border: 2px solid var(--line, #e5e7eb); border-bottom-width: 4px; background: var(--card, #fff); color: inherit; display: grid; place-items: center; gap: 0; }
.stc-moods button span { font-size: 24px; line-height: 1.1; } .stc-moods button small { font-size: 10.5px; font-weight: 900; opacity: .75; }
.stc-moods button.on { border-color: #1cb0f6; background: rgba(28,176,246,.16); }
#stcMsg { width: 100%; box-sizing: border-box; min-height: 100px; padding: 12px 14px; font-size: 16px; border-radius: 14px; border: 2px solid var(--line, #e5e7eb); background: var(--surface, #f4f6f7); color: inherit; font-family: inherit; resize: vertical; }
.stc-count { text-align: right; font-weight: 800; opacity: .55; margin-top: -4px; }
.soc-body .soc-react { padding: 0 8px; gap: 3px; min-width: 40px; justify-content: center; }
.soc-reacts { gap: 5px; flex-wrap: nowrap; }

/* komentar status */
.soc-cbtn { justify-self: start; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 2px solid var(--line, #e5e7eb); border-bottom-width: 3px; background: var(--card, #fff); color: inherit; font-size: 12.5px; font-weight: 900; }
.soc-cbtn.on { border-color: #1cb0f6; background: rgba(28,176,246,.12); }
.soc-cpanel { display: grid; gap: 8px; padding-top: 10px; border-top: 2px dashed var(--line, #e5e7eb); }
.soc-cmt { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: start; }
.soc-cmt .soc-av { width: 34px; height: 34px; font-size: 12px; }
.soc-cmt-body { padding: 8px 12px; border-radius: 14px; background: var(--surface, #f4f6f7); min-width: 0; }
.soc-cmt.own .soc-cmt-body { background: rgba(28,176,246,.12); }
.soc-cmt-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .soc-cmt-head b { font-size: 13px; } .soc-cmt-head small { font-size: 11px; font-weight: 700; opacity: .6; }
.soc-cmt p { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.soc-body .soc-cdel { margin-left: auto; min-height: 30px; width: 30px; padding: 0; border-radius: 10px; background: transparent; border: 0; box-shadow: none; font-size: 12px; opacity: .55; }
.soc-cform { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.soc-cform input { min-height: 46px; font-size: 16px; }
.soc-cform .primary { min-height: 46px; padding: 0 18px; }
.soc-dot.inline { position: static; display: inline-grid; margin-left: 4px; box-shadow: none; vertical-align: middle; }
.soc-friend.quick { grid-template-columns: 42px minmax(0, 1fr) auto; }

/* v94 status publik */
.soc-compose { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 14px; border-radius: 16px; border: 2px solid var(--line, #e5e7eb); border-bottom-width: 3px; background: var(--surface, #f4f6f7); color: inherit; text-align: left; font-size: 14px; font-weight: 800; opacity: .95; box-shadow: none; }
.soc-compose span:last-child { opacity: .6; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-compose-ico { font-size: 20px; }
.soc-filter { width: 100%; }
.soc-seg.n2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.soc-avwrap { position: relative; display: inline-flex; width: 42px; height: 42px; }
.soc-avwrap .soc-av { width: 42px; height: 42px; }
.soc-avwrap .soc-mood { position: absolute; right: -6px; bottom: -6px; font-size: 17px; background: var(--card, #fff); border-radius: 99px; padding: 1px; line-height: 1; box-shadow: 0 0 0 2px var(--line, #e5e7eb); }
.soc-post-head { grid-template-columns: 42px minmax(0, 1fr) auto; }
.soc-who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-tag { font-style: normal; font-size: 11px; font-weight: 900; padding: 3px 9px; border-radius: 99px; }
.soc-tag.me { background: rgba(28,176,246,.16); color: #0b7cb4; }
.soc-tag.fr { background: rgba(88,204,2,.18); color: #3d8c00; }
:root.dark .soc-tag.me { color: #7cd3ff; } :root.dark .soc-tag.fr { color: #9be15a; }
.soc-post-foot { gap: 8px; }
.soc-body .soc-del { width: auto; min-width: 38px; padding: 0 10px; display: inline-flex; align-items: center; gap: 4px; }
.soc-del small { font-size: 11px; font-weight: 900; }
.stc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stc-pub { font-weight: 800; opacity: .7; font-size: 12px; }
.soc-emptybox .secondary { margin-top: 6px; }
.soc-body .soc-cbtn { min-height: 38px; padding: 0 12px; font-size: 12.5px; }
.soc-body .soc-compose { min-height: 48px; }
.soc-filter button { min-height: 38px !important; font-size: 13px; }
.soc-post { gap: 10px; }

/* v96 editor soal */
.qe-card { max-height: 88vh; display: flex; flex-direction: column; }
.qe-body { overflow-y: auto; display: grid; gap: 8px; min-height: 0; }
.qe-lab { font-weight: 900; font-size: 13px; margin-top: 6px; } .qe-lab small { font-weight: 700; opacity: .65; }
.qe-body textarea, .qe-body input[type=text] { width: 100%; box-sizing: border-box; border: 2px solid var(--line, #e5e7eb); border-radius: 12px; padding: 8px 10px; font: inherit; font-size: 14px; background: var(--card, #fff); color: inherit; }
.qe-opt { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; }
.qe-key { display: grid; justify-items: center; gap: 2px; padding-top: 6px; font-weight: 900; }
.qe-opt-fields { display: grid; gap: 6px; }
.qe-note { margin: 0; font-size: 12px; }
.admin-mentor-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.admin-mentor-toggle input { width: 18px; height: 18px; }


.soc-tabs.three { grid-template-columns: repeat(3, 1fr); }
.soc-tabs.three button { font-size: 12.5px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.soc-warn { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(255,150,0,.14); border: 2px solid rgba(255,150,0,.5); font-size: 12.5px; font-weight: 700; line-height: 1.45; }