/*
 * Support tickets (round 19, 2026-10-09): the Support page (design B, with topics that scroll
 * sideways), a ticket's conversation, and the staff page (/staff/support), from the canvas
 * "Support tickets". Builds on cosmitePages.css (AC-*, CT-*, PG-*); the staff page also uses
 * cosmiteMarketing.css (MK-*).
 */
.SP-Wrap, .SP-Staff { overflow-wrap: anywhere; }
.SP-Wrap [hidden], .SP-Staff [hidden] { display: none !important; }
.SP-Wrap { max-width: 1120px; margin: 0 auto; }
.SP-Head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
.SP-Head h1 { margin: 0; color: #ffffff; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08; font-weight: 800; }
.SP-Lead { margin: 14px 0 0; max-width: 640px; color: #cdc8e8; font-size: 18px; line-height: 1.6; }
.SP-Grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: 34px; }
.SP-TicketGrid { margin-top: 28px; }
.SP-Section { margin-top: 42px; }
.SP-Section h2 { margin: 0; color: #ffffff; font-size: 21px; font-weight: 800; }
.SP-SectionHead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.SP-SectionHead small { color: #a7a1c8; font-size: 13px; font-weight: 600; }

/* Signed out. */
.SP-Gate { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 560px; margin: 24px auto 0; padding: 44px 28px; border-radius: 24px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); text-align: center; }
.SP-Gate h1 { margin: 0; color: #ffffff; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; font-weight: 800; }
.SP-Gate p { margin: 0; max-width: 440px; color: #cdc8e8; font-size: 16px; line-height: 1.6; }
.SP-GateIcon { width: 52px; height: 52px; border-radius: 16px; }
.SP-Gate .SP-GateNote { color: #a7a1c8; font-size: 14px; }
.SP-GateTitle { margin: 0; color: #ffffff; font-size: 24px; font-weight: 800; }

/* Buttons. */
.SP-Btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: #f5f3ff; color: #16003e; font: 700 15px Montserrat, sans-serif; text-decoration: none; cursor: pointer; }
.SP-Btn:hover { background: #ffffff; color: #16003e; }
.SP-Btn svg { width: 18px; height: 18px; }
.SP-BtnGhost { border: 1px solid rgba(255, 255, 255, 0.32); background: transparent; color: #f5f3ff; }
.SP-BtnGhost:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.SP-BtnSmall { min-height: 40px; padding: 0 16px; font-size: 14px; }
.SP-Btn[disabled] { opacity: 0.6; cursor: progress; }
.SP-Wide { width: 100%; margin-top: 14px; }
.SP-Btn:focus-visible, .SP-ItemLink:focus-visible { outline: 2px solid #9cc0ff; outline-offset: 2px; }

/* Status pills (with cosmitePages.css AC-Pill). */
.SP-PillReply { background: rgba(156, 192, 255, 0.16); color: #b9d2ff; }
.SP-PillWait { background: rgba(167, 161, 200, 0.16); color: #d6d1f0; }
.SP-PillNew { background: rgba(255, 177, 92, 0.16); color: #ffc98a; }
.SP-PillUs { background: rgba(156, 192, 255, 0.16); color: #b9d2ff; }
.SP-PillThem { background: rgba(167, 161, 200, 0.16); color: #d6d1f0; }

/* A person's tickets. */
.SP-List { margin: 14px 0 0; padding: 0; list-style: none; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); }
.SP-List li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.SP-List li:first-child { border-top: 0; }
.SP-ItemLink { box-sizing: border-box; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 16px 22px; color: inherit; text-decoration: none; }
.SP-ItemLink:hover { background: rgba(255, 255, 255, 0.05); color: inherit; }
.SP-Dot { width: 10px; height: 10px; border-radius: 50%; background: #ffb15c; box-shadow: 0 0 0 4px rgba(255, 177, 92, 0.18); }
.SP-NoDot { width: 10px; height: 10px; }
.SP-ItemMain { min-width: 0; }
.SP-ItemMain b { display: block; overflow: hidden; color: #ffffff; font-size: 16.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.SP-ItemMeta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; color: #a7a1c8; font-size: 13px; }
.SP-ItemMeta strong { color: #ffc98a; font-weight: 700; }
.SP-ItemSide { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.SP-ItemSide time { color: #a7a1c8; font-size: 13px; white-space: nowrap; }
.SP-Num { font-family: Consolas, "Cascadia Mono", monospace; color: #cdc8e8; letter-spacing: 0.02em; }
.SP-ListFoot { margin: 12px 0 0; color: #8d88ad; font-size: 12.5px; }

/* Side column. */
.SP-Side { display: flex; flex-direction: column; gap: 14px; }
.SP-Card { box-sizing: border-box; padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); }
.SP-Card h2 { margin: 0; color: #ffffff; font-size: 17px; font-weight: 800; }
.SP-Facts { margin: 14px 0 0; display: flex; flex-direction: column; }
.SP-Facts > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.SP-Facts dt { color: #a7a1c8; font-size: 13px; font-weight: 600; }
.SP-Facts dd { margin: 0; color: #ffffff; font-size: 14px; font-weight: 600; text-align: right; }
.SP-Hint { margin: 12px 0 0; color: #a7a1c8; font-size: 13px; line-height: 1.55; }

/* Topics: one row that scrolls sideways, so more can be added without changing the page. */
.SP-TopicHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; }
.SP-TopicHead h2 { margin: 0; color: #ffffff; font-size: 18px; font-weight: 800; }
.SP-Swipe { display: none; color: #a7a1c8; font-size: 13px; font-weight: 600; }
.SP-Arrows { display: flex; gap: 8px; }
.SP-Arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(11, 8, 34, 0.6); color: #f5f3ff; cursor: pointer; }
.SP-Arrow svg { width: 20px; height: 20px; }
.SP-Arrow:hover { background: rgba(255, 255, 255, 0.08); }
.SP-Arrow[disabled] { opacity: 0.35; cursor: default; }
.SP-Arrow:focus-visible { outline: 2px solid #9cc0ff; outline-offset: 2px; }
.SP-TopicRow { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 42px) / 3.4); gap: 14px; margin-top: 12px; padding: 4px 4px 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
.SP-TopicRow::-webkit-scrollbar { height: 8px; }
.SP-TopicRow::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
.SP-TopicCard { scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 150px; padding: 20px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #ece9fb; font: 500 14px/1.5 Montserrat, sans-serif; text-align: left; cursor: pointer; }
.SP-TopicCard:hover { background: rgba(255, 255, 255, 0.08); }
.SP-TopicCard b { color: #ffffff; font-size: 17px; font-weight: 800; }
.SP-TopicAbout { color: #a7a1c8; }
.SP-TopicCard[aria-pressed="true"] { border-color: rgba(255, 177, 92, 0.65); background: rgba(255, 177, 92, 0.09); box-shadow: 0 0 28px rgba(255, 140, 50, 0.12); }
.SP-TopicCard:focus-visible { outline: 2px solid #9cc0ff; outline-offset: 2px; }

/* The new-ticket form. */
.SP-Form { box-sizing: border-box; margin-top: 26px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: rgba(11, 8, 34, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); }
.SP-FormHead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.SP-FormHead h2 { margin: 0; color: #ffffff; font-size: 22px; font-weight: 800; }
.SP-Field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.SP-Field > label { color: #f5f3ff; font-size: 14px; font-weight: 600; }
.SP-Input, .SP-Textarea, .SP-Select { box-sizing: border-box; width: 100%; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(7, 5, 22, 0.72); color: #f5f3ff; font: 500 16px Montserrat, sans-serif; }
.SP-Input, .SP-Select { height: 48px; padding: 0 14px; }
.SP-Textarea { min-height: 150px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.SP-Input::placeholder, .SP-Textarea::placeholder { color: #8d88ad; }
.SP-Input:focus, .SP-Textarea:focus, .SP-Select:focus { outline: none; border-color: rgba(255, 177, 92, 0.7); box-shadow: 0 0 0 3px rgba(255, 177, 92, 0.18); }
.SP-Bad { border-color: rgba(255, 107, 107, 0.75); }
.SP-Error { margin: 0; color: #ff9b9b; font-size: 13.5px; font-weight: 600; }
#sp-topic-error { margin: -6px 0 16px; }
.SP-FormBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.SP-FormBar p { flex: 1 1 260px; margin: 0; color: #a7a1c8; font-size: 13px; line-height: 1.55; }
.SP-Tip { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: rgba(156, 192, 255, 0.08); border: 1px solid rgba(156, 192, 255, 0.28); color: #d6e3ff; font-size: 14px; line-height: 1.55; }
.SP-Tip svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #9cc0ff; }

/* A ticket's conversation. */
.SP-Back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #cdc8e8; font-size: 14px; font-weight: 700; text-decoration: none; }
.SP-Back:hover { color: #ffffff; }
.SP-Back svg { width: 18px; height: 18px; }
.SP-TicketHead h1 { margin: 6px 0 0; color: #ffffff; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; font-weight: 800; }
.SP-TicketMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; color: #a7a1c8; font-size: 14px; }
.SP-Thread { display: flex; flex-direction: column; gap: 14px; }
.SP-Msg { padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
.SP-MsgSupport { background: rgba(255, 177, 92, 0.06); border-color: rgba(255, 177, 92, 0.32); }
.SP-MsgNote { background: rgba(255, 195, 92, 0.07); border: 1px dashed rgba(255, 195, 92, 0.5); }
.SP-MsgHead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.SP-MsgHead b { color: #ffffff; font-size: 15px; font-weight: 700; }
.SP-MsgHead time { color: #a7a1c8; font-size: 13px; }
.SP-MsgHead small { color: #a7a1c8; font-size: 12.5px; font-weight: 600; }
.SP-New { padding: 2px 9px; border-radius: 999px; background: #ffb15c; color: #2a1405; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.SP-NoteTag { padding: 2px 9px; border-radius: 999px; background: rgba(255, 195, 92, 0.18); color: #ffc98a; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.SP-Ava { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #33215e; color: #fff4e4; font-size: 14px; font-weight: 800; }
.SP-Mark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb15c, #c8711c 50%, #3a1a72 100%); }
.SP-Mark svg { display: block; width: 18px; height: 24px; }
.SP-MsgBody { margin: 10px 0 0; color: #ece9fb; font-size: 15.5px; line-height: 1.65; white-space: pre-line; }
.SP-System { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: #a7a1c8; font-size: 13px; text-align: center; }
.SP-System svg { flex: none; width: 15px; height: 15px; }
.SP-ClosedNote { margin-top: 14px; }
.SP-Composer { margin-top: 18px; padding: 18px; border-radius: 22px; background: rgba(11, 8, 34, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); }
.SP-Composer label { display: block; margin-bottom: 8px; color: #f5f3ff; font-size: 14px; font-weight: 600; }
.SP-Composer .SP-Textarea { min-height: 120px; }
.SP-Composer .SP-Error { margin-top: 8px; }
.SP-ComposerBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 12px; }
.SP-ComposerBar p { flex: 1 1 240px; margin: 0; color: #a7a1c8; font-size: 13px; line-height: 1.5; }
.SP-Buttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* Notices. */
.SP-Notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; font-size: 14px; line-height: 1.55; }
.SP-Notice svg { flex: none; width: 20px; height: 20px; }
.SP-Notice p { flex: 1 1 240px; margin: 0; }
.SP-NoticeWarn { background: rgba(255, 195, 92, 0.08); border: 1px solid rgba(255, 195, 92, 0.35); color: #f5e6cc; }
.SP-NoticeWarn svg { color: #ffc98a; }
.SP-NoticeInfo { background: rgba(156, 192, 255, 0.08); border: 1px solid rgba(156, 192, 255, 0.3); color: #d6e3ff; }
.SP-NoticeInfo svg { color: #9cc0ff; }

/* Staff: the queue and the ticket beside it (with cosmiteMarketing.css). */
.SP-Tabs { margin-top: 24px; }
.SP-Tabs button span { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 12px; }
.SP-Tabs button[aria-pressed="true"] span { background: rgba(22, 0, 62, 0.14); }
.SP-Queue { margin-top: 14px; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); }
.SP-QList { margin: 0; padding: 0; list-style: none; }
.SP-QHead, .SP-QRow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 150px 84px 92px; align-items: center; gap: 12px; padding: 12px 16px; }
.SP-QRow .AC-Pill { white-space: nowrap; }
.SP-QHead { color: #a7a1c8; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.SP-QRow { border-top: 1px solid rgba(255, 255, 255, 0.08); color: #ece9fb; font-size: 14px; }
.SP-QRow.SP-QNote { display: block; color: #a7a1c8; text-align: center; }
.SP-QRow .MK-Person b { display: block; }
.SP-QRow .MK-Person small { display: block; margin-top: 2px; color: #a7a1c8; font-size: 12px; }
.SP-QRowOn { background: rgba(156, 192, 255, 0.09); box-shadow: inset 3px 0 0 #9cc0ff; }
.SP-QMuted { color: #a7a1c8; font-size: 13px; }
.SP-RowBtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 44px; margin: -6px 0; padding: 4px 8px 4px 0; border: 0; background: transparent; color: #ffffff; font: 700 14px/1.4 Montserrat, sans-serif; text-align: left; cursor: pointer; }
.SP-RowBtn b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.SP-RowBtn small { color: #a7a1c8; font-size: 12px; font-weight: 600; }
.SP-RowBtn:hover b { text-decoration: underline; }
.SP-RowBtn:focus-visible { outline: 2px solid #9cc0ff; outline-offset: 2px; }
.SP-Panel { min-width: 0; }
.SP-StaffSplit > .MK-Panel { margin-top: 14px; }
.SP-PanelHead h2 { margin: 0; color: #ffffff; font-size: 21px; line-height: 1.25; font-weight: 800; }
.SP-PanelHead p { margin: 6px 0 0; color: #a7a1c8; font-size: 13px; }
.SP-Controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.SP-Controls label:last-child { grid-column: 1 / -1; }
.SP-Controls label { display: flex; flex-direction: column; gap: 6px; color: #a7a1c8; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.SP-Controls .SP-Select { height: 42px; padding: 0 10px; font-size: 14px; text-transform: none; letter-spacing: 0; }
.SP-Who { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(11, 8, 34, 0.55); border: 1px solid rgba(255, 255, 255, 0.1); }
.SP-Who .MK-PanelFacts { margin-top: 12px; padding-top: 12px; }
/* Round 27: purchases paused after a disputed payment, under the ticket's person. */
.SP-Pay { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.SP-Pay p { margin: 0; color: #d9d4f5; font-size: 13.5px; line-height: 1.5; }
.SP-Pay .AC-Pill { margin-right: 8px; vertical-align: 1px; }
.SP-PayList { margin: 0; padding: 0 0 0 18px; color: #a7a1c8; font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.SP-Pay .SP-Btn { justify-self: start; }
.SP-WhoUid { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: #a7a1c8; font-size: 12px; }
.SP-PanelThread { margin-top: 16px; }
.SP-PanelThread .SP-Msg { padding: 14px 16px; }
.SP-PanelThread .SP-MsgBody { font-size: 14.5px; }
.SP-Mode { margin-top: 16px; }
.SP-Panel .SP-Composer { margin-top: 12px; padding: 14px; }
.SP-PanelError { margin: 12px 0 0; }

@media (max-width: 960px) {
	.SP-Grid { grid-template-columns: minmax(0, 1fr); }
	.SP-Controls { grid-template-columns: minmax(0, 1fr); }
	.SP-TopicRow { grid-auto-columns: calc((100% - 28px) / 2.4); }
}
@media (max-width: 760px) {
	.SP-QHead { display: none; }
	.SP-QRow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ticket status" "person last"; row-gap: 6px; }
	.SP-QRow > :nth-child(1) { grid-area: ticket; }
	.SP-QRow > :nth-child(2) { grid-area: person; }
	.SP-QRow > :nth-child(3) { grid-area: status; justify-self: end; }
	.SP-QRow > :nth-child(4) { display: none; }
	.SP-QRow > :nth-child(5) { grid-area: last; justify-self: end; }
}
@media (max-width: 600px) {
	.SP-TopicRow { grid-auto-columns: 42%; gap: 10px; margin-top: 10px; }
	.SP-TopicCard { min-height: 0; gap: 8px; padding: 14px; border-radius: 18px; font-size: 12.5px; line-height: 1.4; }
	.SP-TopicCard b { font-size: 15px; line-height: 1.25; }
	.SP-TopicCard .PG-Icon { width: 34px; height: 34px; border-radius: 10px; }
	.SP-TopicCard .PG-Icon svg { width: 19px; height: 19px; }
	.SP-Arrows { display: none; }
	.SP-Swipe { display: inline; }
	.SP-ItemLink { grid-template-columns: 12px minmax(0, 1fr); padding: 14px 16px; }
	.SP-ItemSide { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
	.SP-ItemMain b { white-space: normal; }
	.SP-FormBar .SP-Btn, .SP-ComposerBar .SP-Btn { width: 100%; }
}

/* Round 31: a report from the Cosmite app. The staff page's Reported card above who reported it, and the reporter's What you reported above the conversation. */
.SP-CardHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; color: #a7a1c8; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.SP-CardHead .AC-Pill { letter-spacing: 0; text-transform: none; }
.SP-Reported { border-color: rgba(255, 138, 128, 0.32); }
.SP-YouReported { margin: 0 0 6px; }
.SP-YouReported .SP-MsgHead small { color: #a7a1c8; font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; }
.SP-ReportedQuote { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid rgba(255, 255, 255, 0.28); border-radius: 4px 10px 10px 4px; background: rgba(255, 255, 255, 0.05); color: #ece9fb; font-size: 14.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.SP-ReportedQuote b { color: #cdc8e8; font-size: 12.5px; font-weight: 600; white-space: normal; }
.SP-ReportedNote { margin: 8px 0 0; color: #a7a1c8; font-size: 12.5px; line-height: 1.5; }
.SP-ReportedNote a { color: #c9b8ff; font-weight: 600; }
.SP-FactLink { margin-left: 4px; padding: 0; border: 0; background: none; color: #c9b8ff; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.SP-FactLink:focus-visible { outline: 2px solid #9cc0ff; outline-offset: 2px; }

/* Round 34: moderation on the Reported card and the staff account page (staff_moderation.py). */
.SP-Mod { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.SP-Mod .SP-ReportedNote { margin: 0; }
.SP-Mod .AC-Pill { margin-right: 6px; }
.SP-ModActions { display: flex; flex-wrap: wrap; gap: 8px; }
.SP-ModActions .SP-ModButton { margin-top: 0; }
.SP-ModConfirm { margin-top: 0; }
.AC-Confirm .SP-ModChoices { display: inline-flex; margin-top: 6px; }
.AC-Confirm .SP-ModEnds, .AC-Confirm .SP-ModHint { margin-top: 8px; color: #cdc8e8; font-size: 12.5px; }
.SP-ModText { max-width: none; min-height: 72px; padding: 10px 14px; resize: vertical; line-height: 1.5; }
.SP-ModCheck { display: flex; align-items: center; gap: 8px; }
.SP-ModCsam { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 195, 92, 0.08); border: 1px solid rgba(255, 195, 92, 0.45); }
.SP-ModCsam p + p { margin-top: 10px; }
.SP-ModNumber { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.SP-ModNumber .AC-PasswordLabel { flex: 1 0 100%; margin-top: 0; }
.SP-ModNumber .AC-Password { flex: 1 1 160px; margin-top: 0; }
.SP-ModNumber .SP-Error { flex: 1 0 100%; }
.SP-AccountLine { margin: 0; color: #ece9fb; font-size: 14px; line-height: 1.55; }
.SP-AccountQuote { margin-top: 10px; }
.SP-HistoryRow b { display: block; }
.SP-HistoryRow small { display: block; margin-top: 2px; color: #a7a1c8; font-size: 12px; font-weight: 600; }
/* Round 35: an upload alert's card on the staff page (upload_alerts.py). */
.SP-Alert { border-color: rgba(255, 195, 92, 0.4); }
.SP-AlertAbout { margin: 0; color: #ece9fb; font-size: 14px; line-height: 1.55; }
.SP-Alert dd a { color: #c9b8ff; font-weight: 600; }
.SP-Alert dd .MK-Uid { margin-left: 8px; }
.SP-Alert dd { overflow-wrap: anywhere; }
.SP-AlertAccounts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
/* Round 37: the staff upload tools: the account page's Uploads card, /staff/uploads and /staff/uploads/numbers (staff_upload_tools.py). */
.SPU-Card { margin-top: 32px; padding: 28px 28px 24px; border-radius: 20px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(186, 176, 255, 0.16); display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 24px; }
.SPU-Top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.SPU-Head { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 520px; }
.SPU-Title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.SPU-Title h2 { margin: 0; font-size: 22px; font-weight: 700; color: #ffffff; }
.SPU-Why { margin: 0; font-size: 14px; line-height: 1.6; color: #cfc8f2; overflow-wrap: anywhere; }
.SPU-Actions, .SPU-Buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.SPU-Actions button, .SPU-Buttons button, .SPU-Item .AC-Btn { margin-top: 0; }
.SPU-Open:empty { display: none; }
.SPU-Meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.SPU-Meter { padding: 16px; border-radius: 14px; background: rgba(11, 8, 34, 0.6); border: 1px solid rgba(186, 176, 255, 0.14); display: flex; flex-direction: column; gap: 10px; }
.SPU-MeterLabel { margin: 0; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #b9b2e6; }
.SPU-MeterValue { margin: 0; font-size: 20px; font-weight: 700; color: #ffffff; }
.SPU-Bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.SPU-Fill { height: 8px; border-radius: 4px; background: #9cc0ff; }
.SPU-FillHigh { background: #ffb86b; }
.SPU-MeterFoot { margin: 0; font-size: 13px; line-height: 1.5; color: #cfc8f2; }
.SPU-Section { display: flex; flex-direction: column; gap: 10px; }
.SPU-Section h3 { margin: 0; font-size: 16px; font-weight: 700; color: #ffffff; }
.SPU-TableWrap { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(186, 176, 255, 0.14); }
.SPU-Table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 14px; color: #ece9fb; }
.SPU-Table th { padding: 12px 14px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #b9b2e6; }
.SPU-Table td { padding: 12px 14px; border-top: 1px solid rgba(186, 176, 255, 0.12); vertical-align: top; overflow-wrap: anywhere; }
.SPU-Table td a { color: #c9b8ff; font-weight: 600; }
.SPU-When, .SPU-RowButtons { white-space: nowrap; }
.SPU-RowButtons .MK-Copy + .MK-Copy { margin-left: 6px; }
.SPU-Print { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #cfc8f2; }
.SPU-Muted { margin: 0; color: #b9b2e6; font-size: 13px; line-height: 1.55; }
.SPU-Hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.SPU-List { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.SPU-Item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(11, 8, 34, 0.6); border: 1px solid rgba(186, 176, 255, 0.14); }
.SPU-ItemWords { min-width: 0; flex: 1 1 420px; font-size: 14px; line-height: 1.55; color: #ece9fb; overflow-wrap: anywhere; }
.SPU-ItemWords small { color: #b9b2e6; font-size: 13px; }
.SPU-ItemWords a { color: #c9b8ff; font-weight: 600; }
.SPU-Cleared { opacity: 0.65; }
.SPU-Foot { margin: 0; padding-top: 4px; font-size: 13px; line-height: 1.6; color: #b9b2e6; }
.SPU-Quote { margin-top: 12px; }
.AC-Confirm .SPU-Choices { flex-wrap: wrap; }
.SPU-Ticket { max-width: 180px; }
.SPU-FactLink { color: #c9b8ff; font-weight: 600; }
.SPU-Content { display: flex; flex-direction: column; gap: 28px; margin-top: 24px; }
.SPU-Tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.SPU-Tile { padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(186, 176, 255, 0.16); display: flex; flex-direction: column; gap: 8px; }
.SPU-TileValue { margin: 0; font-size: 28px; font-weight: 800; color: #ffffff; }
.SPU-Tile a { color: #c9b8ff; font-weight: 600; }
.SPU-Block { display: flex; flex-direction: column; gap: 12px; min-width: 0; scroll-margin-top: 24px; }
.SPU-BlockTitle { margin: 0; font-size: 20px; font-weight: 700; color: #ffffff; }
.SPU-Chips { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.SPU-Chip { padding: 14px 16px; border-radius: 12px; background: rgba(11, 8, 34, 0.6); border: 1px solid rgba(186, 176, 255, 0.14); font-size: 14px; color: #ece9fb; }
.SPU-Pair { display: flex; flex-wrap: wrap; gap: 24px; }
.SPU-Pair > .SPU-Block { flex: 1 1 420px; }
.SPU-Pair .SPU-Table { min-width: 0; }
.SPU-Mode { padding: 22px 24px; border-radius: 18px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(186, 176, 255, 0.16); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.SPU-ModeWords { min-width: 0; flex: 1 1 520px; display: flex; flex-direction: column; gap: 6px; }
.SPU-ModeWords h2, .SPU-Save h2 { margin: 0; font-size: 18px; font-weight: 700; color: #ffffff; }
.SPU-ModeWords h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.SPU-ModeWords p { margin: 0; font-size: 14px; line-height: 1.6; color: #cfc8f2; }
.SPU-Save { flex-direction: column; align-items: stretch; gap: 12px; }
.SPU-Save .AC-PasswordLabel { margin: 0; }
.SPU-Save .SP-ModText { max-width: none; }
.SPU-InfoGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.SPU-Info { padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(186, 176, 255, 0.16); display: flex; flex-direction: column; gap: 10px; }
.SPU-Info h2 { margin: 0; font-size: 16px; font-weight: 700; color: #ffffff; }
.SPU-Info ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: #ece9fb; }
.SPU-Cell { max-width: 120px; min-height: 36px; margin-top: 0; }
.SPU-CellNumber { max-width: 80px; }
.SPU-CellPair { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.SPU-CellPair .SPU-Cell { max-width: 64px; }