/* The pages' own pieces (account, support, documents, polls, download, FAQ), ported to the dark theme. Every rule
   is scoped to #OtPage, the box the page sits in. */

/* the page's text flows as on the portal: the parchment's own size and spacing, no line height of ours */
#OtPage .cl-main.pg-moldura { line-height: normal; }
/* the big stone button lights under the pointer and with the keyboard (the portal does it with a script) */
#OtPage .BigButton > div:hover > .BigButtonOver, #OtPage .BigButton:focus-within .BigButtonOver { visibility: visible; }
#OtPage .BigButton .BigButtonText:focus-visible { outline: 1px dotted var(--gold); outline-offset: -4px; }
/* a button that cannot act now: the portal's grey */
#OtPage .BigButton.is-disabled { pointer-events: none; filter: grayscale(0.8); }
/* a line that waits for the world or tells a failure, inside a box, in the parchment's text */
#OtPage .pg-moldura .OtAviso { padding: 5px; }
#OtPage .pg-moldura .OtAviso.is-erro { color: var(--red); font-weight: bold; }
/* the strip of the section's pages: on a computer the side menu carries the navigation; on a phone, where the side
   menu leaves, the strip stays at the top of the page (owner's trial of 21/09), as a line of the portal's links */
#OtPage .pg-moldura > .portal-nav { display: none; }
@media (max-width: 768.01px) {
  #OtPage .pg-moldura > .portal-nav { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; font-size: .8125rem; }
  #OtPage .pg-moldura > .portal-nav a[aria-current] { color: var(--text); text-decoration: none; }
}
/* the account's panels of a page (guilds, applications): the portal's boxes, 30 px apart as its two line breaks */
#OtPage .pg-moldura .OtPainel { margin-top: 30px; }
#OtPage .pg-moldura .OtPainel .field table td { vertical-align: top; }
#OtPage .pg-moldura .OtPainel .field + .field, #OtPage .pg-moldura .OtPainel .field + .BigButton { margin-top: 4px; }
#OtPage .pg-moldura .OtPainel form > .BigButton, #OtPage .pg-moldura .OtPainel > .BigButton { margin: 6px 0 4px; }
#OtPage .pg-moldura .OtPainel input[type="text"], #OtPage .pg-moldura .OtPainel input[type="password"], #OtPage .pg-moldura .OtPainel select,
#OtPage .pg-moldura .OtPainel textarea { max-width: 100%; }
#OtPage .pg-moldura .OtPainel textarea { width: 100%; box-sizing: border-box; }
/* a label longer than its 150 px column wraps inside it, so every field of a panel starts at the same place */
#OtPage .pg-moldura .OtPainel .field td.LabelV150 { white-space: normal; }
/* a part inside a panel (the guild's logo, the names of its ranks): the same subheading as the support boxes */
#OtPage .pg-moldura .OtPainel h3 { margin: 12px 0 4px; font-size: .875rem; }
/* an applicant's message keeps its lines */
#OtPage .pg-moldura .guild-message { white-space: pre-line; overflow-wrap: anywhere; }
#OtPage .pg-moldura .OtLista { margin: 4px 0 8px; }
/* a message of the account's part: the portal's text, green when done, red when refused */
#OtPage .pg-moldura .OtAviso.is-ok { color: var(--green); font-weight: bold; }
/* an action inside a row of a list: written as the portal's links */
#OtPage .pg-moldura .OtLinkButton { padding: 0; border: 0; background: none; cursor: pointer; font: 600 .875rem var(--ui); color: var(--gold); }
#OtPage .pg-moldura .OtLinkButton:hover { color: var(--gold-bright); text-decoration: underline; }
#OtPage .pg-moldura .OtLinkButton:disabled { color: var(--muted); cursor: default; text-decoration: none; }
#OtPage .pg-moldura .row-actions { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
#OtPage .pg-moldura .actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0; }
#OtPage .pg-moldura details.account-operation { margin: 8px 0; }
#OtPage .pg-moldura details.account-operation > summary { cursor: pointer; font-weight: bold; color: var(--gold); }
#OtPage .pg-moldura .guild-rules { margin: 4px 0 8px; padding-left: 20px; }
/* a row of stone buttons inside a box (hub boxes), and a button whose link is still hidden (the Discord invitation) */
#OtPage .pg-moldura .OtBotoes { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; }
#OtPage .BigButton:has(> div > a.BigButtonText[hidden]) { display: none; }
/* Changelog: the releases 30 px apart (the portal's two line breaks) while the search hides some of them */
#OtPage .pg-moldura .nt-release:not([hidden]) ~ .nt-release:not([hidden]) { margin-top: 30px; }
/* the "» ..." links that close a news item, apart from one another */
#OtPage .pg-moldura .cl-links a + a { margin-left: 12px; }
/* the Wiki's guides: wiki.js stripes the rows it shows (wk-row light, wk-alt dark), as the portal's lists */
#OtPage .pg-moldura tr.wk-row { background-color: var(--surface); }
#OtPage .pg-moldura tr.wk-alt { background-color: var(--surface-2); }
/* a cell of the portal's grid of pictures (library, catalogue shelves): the picture over the name, centred */
#OtPage .pg-moldura .OtCelula { text-align: center; }
#OtPage .pg-moldura .OtCelula .shelf-picture { display: flex; align-items: flex-end; justify-content: center; height: 70px; }
/* Tools: the experience table's rows come from wiki-tools.js; striped and right-aligned as the portal's lists */
#OtPage .pg-moldura #experience-table-body tr:nth-child(odd) { background-color: var(--surface); }
#OtPage .pg-moldura #experience-table-body tr:nth-child(even) { background-color: var(--surface-2); }
#OtPage .pg-moldura #experience-table-body td.numeric { text-align: right; }

/* ---- the account (conta.html) and the other signed-in pages on the kit ---------------------------------------- */
#OtPage .CaptionContainer h2.Text { margin: 0; }
/* a stone button whose own button or link is hidden or waiting */
#OtPage .BigButton:has(> div > .BigButtonText[hidden]) { display: none; }
#OtPage .BigButton:has(> div > .BigButtonText:disabled) { filter: grayscale(0.8); }
#OtPage .BigButton:has(> div > .BigButtonText:disabled) .BigButtonOver { visibility: hidden !important; }
#OtPage button.BigButtonText:disabled { cursor: default; }
/* the rows of a box: a field as the portal's create account (label at 150 px, the control), text and buttons across */
#OtPage .pg-moldura .OtCaixa .InnerTableContainer > table > tbody > tr > td { vertical-align: top; padding-top: 2px; padding-bottom: 2px; }
#OtPage .pg-moldura .OtCaixa small { font-size: .75rem; }
#OtPage .pg-moldura .OtCaixa h3 { margin: 12px 0 4px; font-size: .875rem; }
#OtPage .pg-moldura .OtCaixa p { margin: 4px 0; }
#OtPage .pg-moldura .OtCaixa .BigButton { margin: 4px 0; }
/* a field that stays a block (inside a folded operation): the label on the left at the same 150 px */
#OtPage .pg-moldura div.field { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 4px 0; }
#OtPage .pg-moldura div.field > label { flex: 0 0 150px; font-weight: bold; }
#OtPage .pg-moldura div.field > small { flex-basis: 100%; padding-left: 160px; }
/* the password's eye (ui.js writes .password-wrap and .password-toggle), as the portal's */
#OtPage .pg-moldura .password-wrap { position: relative; display: inline-block; }
/* the field keeps the width of the others (owner, 27/09: E-mail and Senha of different sizes): the eye sits over its
   right end, as the portal's own password field, which adds no room for it */
#OtPage .pg-moldura .password-wrap input { padding-right: 44px; }
#OtPage .pg-moldura .password-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; border: none;
  background: transparent; font-size: 0; color: var(--gold); cursor: pointer; }
#OtPage .pg-moldura .password-toggle::before { content: ""; display: block; width: 24px; height: 20px; margin: auto; background: currentColor; mask: url("icons/general/password-show.svg") center / contain no-repeat; }
#OtPage .pg-moldura .password-toggle[aria-pressed="true"]::before { mask-image: url("icons/general/password-hide.svg"); }
/* the password's requirements with the portal's marks */
#OtPage .pg-moldura .pw-rules { list-style: none; margin: 4px 0 0; padding: 0; font-size: .75rem; }
#OtPage .pg-moldura .pw-rules li { padding-left: 0; }
#OtPage .pg-moldura .pw-rules li::before { content: "○"; display: inline-block; width: 17px; }
#OtPage .pg-moldura .pw-rules li[data-ok="true"]::before { content: "✓"; color: var(--green); }
/* messages: the portal's red error and green success */
#OtPage .pg-moldura .msg { margin: 4px 0; font-size: .8125rem; }
#OtPage .pg-moldura .msg.err { color: var(--red); font-weight: bold; }
#OtPage .pg-moldura .msg.ok { color: var(--green); font-weight: bold; }
/* the account's lists (account-page.js writes rows of two spans) inside the striped block */
#OtPage .pg-moldura .TableContentContainer > .kv { display: table; width: 100%; border-collapse: collapse; }
#OtPage .pg-moldura .kv > div { display: table-row; }
#OtPage .pg-moldura .kv > div:nth-child(odd) { background-color: var(--surface-2); }
#OtPage .pg-moldura .kv > div:nth-child(even) { background-color: var(--surface); }
#OtPage .pg-moldura .kv > div > span { display: table-cell; padding: 2px 5px; border: 1px solid var(--line-soft); vertical-align: middle; font-size: .875rem; }
#OtPage .pg-moldura .kv > div > span:first-child { width: 175px; font-weight: bold; white-space: nowrap; }
#OtPage .pg-moldura .kv .BigButton { display: inline-block; vertical-align: middle; margin: 1px 4px 1px 0; }
/* ---- the account area as the portal's (conta.html, 27/09): the Overview, Manage Account, one page per action ---- */
/* the status box: its three buttons in a column; the benefits of Premium in one line, as the portal's own rule */
#OtPage .pg-moldura .OtStatusButtons { vertical-align: middle; }
#OtPage .pg-moldura .premiumbenefits { display: flex; margin: 0px auto; }
#OtPage .pg-moldura .premiumbenefits > div { display: flex; align-items: center; justify-content: flex-start; flex: 1; }
/* the characters: the portal's list, a row of 56 px; the chosen row in bold with the larger name and its options */
#OtPage .pg-moldura #pn-chars tr.CharacterList { cursor: pointer; }
#OtPage .pg-moldura #pn-chars tr.CharacterList.Odd:hover { background-color: var(--surface-3, #23262b); }
#OtPage .pg-moldura #pn-chars tr.CharacterList.Even:hover { background-color: var(--surface-3, #23262b); }
#OtPage .pg-moldura #pn-chars tr.OtSelecionado { font-weight: bold; cursor: default; }
#OtPage .pg-moldura #pn-chars tr.OtSelecionado .CharacterName { font-size: 1.1rem; }
#OtPage .pg-moldura #pn-chars tr:not(.OtSelecionado) .CharacterOptions > * { display: none; }
#OtPage .pg-moldura #pn-chars .OtPosicao { text-align: center; padding: 2px; padding-top: 4px; }
#OtPage .pg-moldura #pn-chars .CharacterOptions { text-align: center; }
#OtPage .pg-moldura #pn-chars tr:focus-visible { outline: 1px dotted var(--text); outline-offset: -2px; }
#OtPage .pg-moldura .OtPersonagem { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
#OtPage .pg-moldura .OtPersonagemTexto { white-space: nowrap; line-height: 12px; }
#OtPage .pg-moldura .OtPersonagem .outfit-slot { display: inline-grid; place-items: end; flex: none; width: 64px; height: 64px; margin: -22px 0 -10px -6px; }
#OtPage .pg-moldura .OtPersonagem .outfit-slot .sprite { margin: 0; }
#OtPage .pg-moldura .character-pending .CharacterName { color: var(--muted); }
#OtPage .pg-moldura .character-deadline, #OtPage .pg-moldura .character-deadline time { color: var(--red); }
/* an option of a row, "[Editar]" and "[Apagar]": a button for the keyboard, drawn as the portal's link in brackets */
#OtPage .pg-moldura .OtOpcao { padding: 0; border: 0; background: none; cursor: pointer; font: 600 .875rem var(--ui); color: var(--gold); white-space: nowrap; }
#OtPage .pg-moldura .OtOpcao:hover { color: var(--gold-bright); text-decoration: underline; }
#OtPage .pg-moldura .OtOpcao::before, #OtPage .pg-moldura .OtOpcao::after { display: inline-block; font-weight: normal; color: var(--text); }
#OtPage .pg-moldura .OtOpcao::before { content: "["; }
#OtPage .pg-moldura .OtOpcao::after { content: "]"; }
/* Manage Account: the button of each entry on its right (135 px, the portal's), a form on one line, a list inside */
#OtPage .pg-moldura .OtItemButton { float: right; width: 135px; margin-left: 20px; }
#OtPage .pg-moldura .OtSublista { margin-top: 6px; }
#OtPage .pg-moldura .OtFormLinha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; padding: 0; margin: 0; }
#OtPage .pg-moldura .OtFormLinha select { min-width: 180px; }
#OtPage .pg-moldura .OtLinhaBotoes { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
#OtPage .pg-moldura .OtMostrar { padding: 0; border: 0; background: none; cursor: pointer; vertical-align: middle; }
#OtPage .pg-moldura .OtMostrar img { display: block; }
#OtPage .pg-moldura .OtOpcoes { margin: 0; padding: 0; border: 0; }
#OtPage .pg-moldura #tf-setup, #OtPage .pg-moldura #tf-recovery { display: grid; gap: 10px; }
#OtPage .pg-moldura #tf-secret { word-break: break-all; }
/* the account area on a phone (768 px or less, the layout's phone width): the labels wrap, the buttons of Informações
   gerais go in rows, the benefits one under the other, the names wrap; the Status column takes only its words;
   a section reached by a link stops under the layout's fixed bar */
@media (max-width: 768.01px) {
  #OtPage .pg-moldura #pn-account td.LabelV, #OtPage .pg-moldura .OtSecao td.LabelV { white-space: normal; }
  #OtPage .pg-moldura #pn-account td { overflow-wrap: anywhere; }
  #OtPage .pg-moldura .AccountShowButtons, #OtPage .pg-moldura .AccountShowButtons tbody { display: block; }
  #OtPage .pg-moldura .AccountShowButtons tr { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  #OtPage .pg-moldura .AccountShowButtons td { display: block; padding: 0; }
  #OtPage .pg-moldura .premiumbenefits { flex-direction: column; align-items: flex-start; gap: 4px; }
  #OtPage .pg-moldura #pn-chars .OtPersonagemTexto { white-space: normal; }
  #OtPage .pg-moldura .OtColunaStatus, #OtPage .pg-moldura #pn-chars .OtStatus { width: auto !important; }
  #OtPage .pg-moldura .OtSublista .kv > div > span:first-child { width: auto; white-space: normal; }
  #OtPage .pg-moldura .OtSecao { scroll-margin-top: 80px; }
}
/* the packs of Ot Coins: one stone each, the coins over the price */
#OtPage .pg-moldura .coins-packs { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.Content #OtPage .pg-moldura .coins-packs .btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: auto; min-width: 140px; padding: 9px 16px; line-height: 1.25; }
.Content #OtPage .pg-moldura .coins-packs .btn strong { font-size: 13px; font-weight: bold; }
.Content #OtPage .pg-moldura .coins-packs .btn small { font-size: 11px; color: var(--text); }
/* the download page (27/09): a card for each client side by side, as the portal's blocks (frame and shadow), the
   same rows in each; the requirements in two columns; the features in two columns; one column on a phone */
#OtPage .pg-moldura .dl-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 8px; }
#OtPage .pg-moldura .dl-card { flex: 1 1 300px; min-width: 0; padding: 10px; background-color: var(--surface); border: 1px solid var(--line-strong);
   text-align: center; }
#OtPage .pg-moldura .dl-card[hidden] { display: none; }
#OtPage .pg-moldura .dl-icon { display: block; margin: 0 auto 4px; }
#OtPage .pg-moldura .dl-name { margin: 0; font-size: .95rem; font-weight: bold; }
#OtPage .pg-moldura .dl-sub { margin: 2px 0 8px; font-size: .8125rem; }
#OtPage .pg-moldura .dl-button .BigButton { display: inline-block; }
#OtPage .pg-moldura .dl-below { min-height: 1.4em; margin: 6px 0 8px; font-size: .8125rem; }
#OtPage .pg-moldura .dl-card .TableContentContainer { height: auto; text-align: left; }  /* the portal's height: 100% would run out of the card */
#OtPage .pg-moldura .dl-req td:nth-child(2), #OtPage .pg-moldura .dl-req td:nth-child(3) { width: 40%; }
#OtPage .pg-moldura .dl-features { columns: 2; column-gap: 24px; }
#OtPage .pg-moldura .dl-features li { break-inside: avoid; }
@media (max-width: 768.01px) { #OtPage .pg-moldura .dl-features { columns: 1; } }
/* a poll's page (27/09): the question as the first line of its box, the link to comment on the right, as the portal's */
#OtPage .pg-moldura .poll-question { margin: 0 0 4px; font-weight: bold; }
#OtPage .pg-moldura .poll-comment { margin: 0 0 6px; text-align: right; font-weight: bold; }
/* the steps of "Como funciona" and the lost-account paths: the portal's plain lists */
#OtPage .pg-moldura .steps { margin: 6px 0 0; padding-left: 20px; }
#OtPage .pg-moldura .steps li { margin-bottom: 6px; }
#OtPage .pg-moldura .steps p { margin: 2px 0 0; }
#OtPage .pg-moldura .lost-path { display: block; margin: 4px 0; padding: 5px; background-color: var(--surface); border: 1px solid var(--line-soft); }
#OtPage .pg-moldura label.check { display: block; margin: 4px 0; }
/* deleting a character: the warning as the portal's attention box, the conditions as a plain list */
#OtPage .pg-moldura .dc-warning { position: relative; margin: 4px 0 8px; padding: 8px 10px 8px 43px; background-color: var(--surface-2); border: 1px solid var(--line-strong); color: var(--red); }
#OtPage .pg-moldura .dc-warning::before { content: ""; position: absolute; top: 6px; left: 8px; width: 30px; height: 26px; background: none no-repeat; }
#OtPage .pg-moldura .dc-warning b { font-weight: bold; }
#OtPage .pg-moldura .dc-warning p { margin: 2px 0 0; color: var(--text); }
#OtPage .pg-moldura .dc-conditions { margin: 4px 0; padding-left: 20px; color: var(--text); }
#OtPage .pg-moldura input[aria-invalid="true"] { outline: 1px solid red; }
/* boxes that follow one another (support pages, account views): 30 px apart, as the portal's two line breaks */
#OtPage .pg-moldura .OtCaixa:not([hidden]) ~ .OtCaixa:not([hidden]) { margin-top: 30px; }
/* the support pages' text inside a box */
#OtPage .pg-moldura .OtCaixa ul, #OtPage .pg-moldura .OtCaixa ol { margin: 4px 0; padding-left: 20px; }
#OtPage .pg-moldura .OtCaixa li { margin-bottom: 2px; }
#OtPage .pg-moldura .OtCaixa .sp-note { font-style: italic; }
#OtPage .pg-moldura .OtCaixa .sp-cards { display: flex; flex-wrap: wrap; gap: 10px 20px; }
#OtPage .pg-moldura .OtCaixa .sp-card { flex: 1 1 360px; min-width: 0; }
#OtPage .pg-moldura .OtCaixa .sp-card h3 { margin: 6px 0 4px; }
/* the portal gives its content container "height: 100%" (there it always sits in a table cell, where that does
   nothing); in a card of a flex row it would take the card's whole height and run out of the box, so it keeps its own */
#OtPage .pg-moldura .OtCaixa .sp-card .TableContentContainer { height: auto; }
#OtPage .pg-moldura .OtCaixa details > summary { cursor: pointer; }
/* documents (terms, privacy, rules, purchases and their frozen copies): the version line, the contents, the
   numbered sections as the portal's bold headings, the note that a copy was replaced */
#OtPage .pg-moldura .OtCaixa h2:not(.Text), #OtPage .pg-moldura .OtCaixa h1:not(.Text) { margin: 14px 0 4px; font-size: .875rem; font-weight: bold; }
#OtPage .pg-moldura .sp-docmeta, #OtPage .pg-moldura .OtCaixa > .TableContainer .meta { font-size: .75rem; }
#OtPage .pg-moldura .sp-docmeta { margin: 0 0 8px; }
#OtPage .pg-moldura .sp-toc { margin: 4px 0 10px; padding: 5px 10px; background-color: var(--surface); border: 1px solid var(--line-soft);  }
#OtPage .pg-moldura .sp-toc > p { margin: 0 0 4px; font-weight: bold; }
#OtPage .pg-moldura .sp-toc ul { columns: 2; margin: 0; padding: 0; list-style: none; }
#OtPage .pg-moldura .archive-note { margin: 0 0 8px; padding: 5px 8px; background-color: var(--surface-2); border: 1px solid var(--line-strong); }
#OtPage .pg-moldura .sp-prev { margin-top: 14px; }
@media (max-width: 768.01px) { #OtPage .pg-moldura .sp-toc ul { columns: 1; } }
/* a line under a name in a list (the documents' description) */
#OtPage .pg-moldura .sp-sub-text { display: block; font-size: .8125rem; }
#OtPage .pg-moldura td.sp-num { white-space: nowrap; }

/* ---- what the support scripts draw (support.js, team.js) with their own classes, in the portal's pieces ------ */
/* a table: the striped block (the frame with its shadow, rows of the portal's two colours, header as LabelH) */
#OtPage .pg-moldura .sp-scroll { position: relative; margin: 0 7px 5px 0; background-color: var(--surface-2); border: 1px solid var(--line-strong);  overflow-x: auto; }
#OtPage .pg-moldura table.sp-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line-soft); }
#OtPage .pg-moldura table.sp-table th, #OtPage .pg-moldura table.sp-table td { padding: 2px 5px; border: 1px solid var(--line-soft); font-size: .875rem; color: var(--text); text-align: left; vertical-align: top; }
#OtPage .pg-moldura table.sp-table thead th { background-color: var(--surface-2); font-weight: bold; white-space: nowrap; }
#OtPage .pg-moldura table.sp-table tbody tr:nth-child(odd) { background-color: var(--surface); }
#OtPage .pg-moldura table.sp-table tbody tr:nth-child(even) { background-color: var(--surface-2); }
#OtPage .pg-moldura table.sp-kv tbody tr:nth-child(odd) { background-color: var(--surface-2); }
#OtPage .pg-moldura table.sp-kv tbody tr:nth-child(even) { background-color: var(--surface); }
#OtPage .pg-moldura table.sp-kv th { width: 175px; font-weight: bold; white-space: nowrap; }
#OtPage .pg-moldura .sp-num { white-space: nowrap; }
#OtPage .pg-moldura .sp-state[data-state="open"] { color: var(--gold-bright); font-weight: bold; }
#OtPage .pg-moldura .sp-state[data-state="answered"] { color: var(--green); font-weight: bold; }
#OtPage .pg-moldura .sp-state[data-state="closed"] { color: var(--muted); }
@media (max-width: 640px) { #OtPage .pg-moldura .sp-hide-narrow { display: none; } }
/* a message of a conversation: its bar as a caption (who and when), the text on the parchment */
#OtPage .pg-moldura .sp-msg { margin: 8px 7px 8px 0; background-color: var(--surface); border: 1px solid var(--line-strong);  }
#OtPage .pg-moldura .sp-msg[data-author="staff"] { background-color: var(--surface-2); }
#OtPage .pg-moldura .sp-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 3px 6px; background-color: var(--line-strong); color: var(--text); }
#OtPage .pg-moldura .sp-msg-head h2 { margin: 0; font-size: .875rem; font-weight: bold; color: var(--text); }
#OtPage .pg-moldura .sp-tag { padding: 0 4px; background-color: var(--surface-2); font-size: .7rem; font-weight: bold; color: var(--text); }
#OtPage .pg-moldura .sp-when { margin-left: auto; font-size: .75rem; }
#OtPage .pg-moldura .sp-msg-text { margin: 0; padding: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* pictures of a conversation: thumbnails that open to the full width on a click; the ones chosen before sending */
#OtPage .pg-moldura .sp-msg-images { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 6px; }
#OtPage .pg-moldura .sp-img { display: block; max-width: 220px; max-height: 160px; border: 1px solid var(--line-strong); background: var(--surface2); cursor: zoom-in; }
#OtPage .pg-moldura .sp-img.sp-img-full { max-width: 100%; max-height: none; cursor: zoom-out; }
#OtPage .pg-moldura .sp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
/* the file field itself stays reachable by keyboard and screen readers; its button is the label */
#OtPage .pg-moldura .sp-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#OtPage .pg-moldura .sp-file-btn { display: inline-block; padding: 2px 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--gold); font-weight: bold; cursor: pointer; }
#OtPage .pg-moldura .sp-file-btn:hover { background: var(--surface-2); }
#OtPage .pg-moldura .sp-file:focus-visible + .sp-file-btn { outline: 2px solid var(--gold); outline-offset: 2px; }
#OtPage .pg-moldura .sp-thumb { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .75rem; }
#OtPage .pg-moldura .sp-thumb img { max-width: 120px; max-height: 90px; border: 1px solid var(--line-strong); background: var(--surface2); }
/* a button the scripts write as .sp-btn: the portal's blue stone; an action written as a link */
#OtPage .pg-moldura a.sp-btn, #OtPage .pg-moldura button.sp-btn { display: inline-block; width: 135px; height: 25px; padding: 0; border: 0; vertical-align: middle;
  background: none no-repeat; font: 600 .8125rem/25px var(--ui); color: var(--gold); text-align: center;
  text-decoration: none;  cursor: pointer; }
#OtPage .pg-moldura a.sp-btn:hover, #OtPage .pg-moldura button.sp-btn:hover { background-image: none; color: var(--gold); text-decoration: none; }
#OtPage .pg-moldura .sp-linkbtn { padding: 0; border: 0; background: none; cursor: pointer; font: 600 .875rem var(--ui); color: var(--gold); }
#OtPage .pg-moldura .sp-linkbtn:disabled { color: var(--muted); cursor: default; }
/* the ticket page's lines: filters, counts, page numbers, actions */
#OtPage .pg-moldura .sp-bar, #OtPage .pg-moldura .sp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 4px 0; }
#OtPage .pg-moldura .sp-actions { justify-content: flex-start; }
#OtPage .pg-moldura .sp-center { justify-content: center; text-align: center; }
#OtPage .pg-moldura .sp-pager { display: flex; gap: 8px; font-size: .8125rem; font-weight: bold; }
/* the new ticket's form: label at 150 px as the portal's forms, the subjects as a list of choices */
#OtPage .pg-moldura .sp-row { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0; }
#OtPage .pg-moldura .sp-label { flex: 0 0 150px; font-weight: bold; }
#OtPage .pg-moldura .sp-field { flex: 1 1 300px; min-width: 0; }
#OtPage .pg-moldura .sp-field input, #OtPage .pg-moldura .sp-field textarea, #OtPage .pg-moldura .sp-field select { max-width: 100%; }
#OtPage .pg-moldura .sp-field textarea { width: 100%; box-sizing: border-box; }
#OtPage .pg-moldura .sp-cats { flex: 1 1 300px; display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
#OtPage .pg-moldura .sp-cat { display: block; padding: 4px 6px; background-color: var(--surface); border: 1px solid var(--line-soft); cursor: pointer; }
#OtPage .pg-moldura .sp-cat small { display: block; margin-left: 20px; font-size: .75rem; }
#OtPage .pg-moldura .sp-count { font-size: .75rem; }
/* the portal paints every th grey with white text; a label of a support table is the portal's LabelV on its row */
#OtPage .pg-moldura table.sp-kv th { background-color: transparent; color: var(--text); }
/* polls: the options and the results inside the poll's box, the results with the portal's percentage bars */
#OtPage .pg-moldura .poll > .portal-updated { margin: 0 0 6px; font-size: .75rem; }
#OtPage .pg-moldura .poll-options, #OtPage .pg-moldura .poll-results { margin: 4px 0; padding: 0; list-style: none; }
#OtPage .pg-moldura .poll-options li { padding: 2px 5px; }
#OtPage .pg-moldura .poll-options li:nth-child(odd), #OtPage .pg-moldura .poll-results li:nth-child(odd) { background-color: var(--surface); }
#OtPage .pg-moldura .poll-options li:nth-child(even), #OtPage .pg-moldura .poll-results li:nth-child(even) { background-color: var(--surface-2); }
#OtPage .pg-moldura .poll-results li { display: grid; grid-template-columns: minmax(0, 1fr) auto 200px; gap: 4px 10px; align-items: center; padding: 2px 5px; }
#OtPage .pg-moldura .poll-count { font-size: .8125rem; white-space: nowrap; }
#OtPage .pg-moldura .poll-bar { display: block; height: 10px; background-color: var(--surface-3, #23262b); border: 1px solid var(--line-strong); }
#OtPage .pg-moldura .poll-bar > span { display: block; height: 100%; background-color: var(--line-strong); }
#OtPage .pg-moldura .poll-form fieldset { margin: 4px 0; padding: 0; border: 0; }
#OtPage .pg-moldura .poll-form legend { padding: 0; font-weight: bold; }
#OtPage .pg-moldura .poll-form label { display: block; padding: 2px 5px; }
#OtPage .pg-moldura .poll-form label:nth-of-type(odd) { background-color: var(--surface); }
#OtPage .pg-moldura .poll-form label:nth-of-type(even) { background-color: var(--surface-2); }
@media (max-width: 640px) { #OtPage .pg-moldura .poll-results li { grid-template-columns: minmax(0, 1fr) auto; } #OtPage .pg-moldura .poll-bar { grid-column: 1 / -1; } }
/* phones: a table wider than the screen scrolls inside its own box (the box keeps the screen's width, 30 px apart),
   with a second scroll bar above it (moldura.js), as the portal does on phones; pictures never pass the screen */
@media (max-width: 768.01px) {
  #OtPage .TableContainer .InnerTableContainer { max-width: calc(100vw - 30px); }
  #OtPage .TableContainer .TableScrollbarWrapper { width: calc(100vw - 30px); }
  #OtPage .BoxContent img { max-width: calc(100vw - 20px); }
}

/* Ajuda as the portal's FAQ (suporte.html, support-faq.js, 28/09): the search line, six topics with their emblem, the two
   columns of questions, and the answer shown with its path */
#OtPage .pg-moldura [data-faq-hub][hidden], #OtPage .pg-moldura [data-faq-all][hidden], #OtPage .pg-moldura [data-faq-view][hidden] { display: none; }
#OtPage .pg-moldura .rv-faq-search { margin: 2px 0 8px; }
#OtPage .pg-moldura .rv-faq-search input[type=search] { width: 100%; box-sizing: border-box; }
#OtPage .pg-moldura .rv-faq-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin: 10px 0 16px; }
#OtPage .pg-moldura .rv-faq-topic { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px; color: var(--text); font-size: .875rem; font-weight: bold; text-align: center; text-decoration: none; }
#OtPage .pg-moldura .rv-faq-topic:hover span:last-child { text-decoration: underline; }
#OtPage .pg-moldura .rv-faq-emblem { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #484a54, #23262b 62%, #16171a);
  border: 3px solid var(--gold-deep); box-shadow: 0 0 0 2px var(--line-strong), 2px 3px 4px rgba(0, 0, 0, .45), inset 0 2px 3px rgba(255, 255, 255, .25); }
#OtPage .pg-moldura .rv-faq-emblem svg { fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#OtPage .pg-moldura .rv-faq-topic:hover .rv-faq-emblem { border-color: var(--gold); filter: brightness(1.12); }
#OtPage .pg-moldura .rv-faq-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 6px; }
#OtPage .pg-moldura .rv-faq-block { border: 2px solid var(--line-strong);  background: var(--surface); }
#OtPage .pg-moldura .rv-faq-block-head { padding: 7px 8px; background: var(--surface-2); border-bottom: 2px solid var(--line-strong); color: var(--text); font-size: 1.05rem; font-weight: bold; text-align: center; }
#OtPage .pg-moldura .rv-faq-block ul { margin: 0; padding: 0; list-style: none; }
#OtPage .pg-moldura .rv-faq-block li { padding: 9px 10px; text-align: center; font-weight: bold; border-top: 1px solid var(--line-soft); }
#OtPage .pg-moldura .rv-faq-block li:nth-child(even) { background: var(--surface-2); }
#OtPage .pg-moldura .rv-faq-block li:first-child { border-top: 0; }
#OtPage .pg-moldura .rv-faq-crumbs { margin: 4px 0 10px; font-weight: bold; }
#OtPage .pg-moldura .rv-faq-title { margin: 6px 0 10px; padding: 0 0 6px; font-size: 1.05rem; border-bottom: 1px solid var(--line-strong); }
#OtPage .pg-moldura .rv-faq-answer p, #OtPage .pg-moldura .rv-faq-entry p { margin: 0 0 8px; }
#OtPage .pg-moldura .rv-faq-list { margin: 0 0 10px; padding-left: 20px; }
#OtPage .pg-moldura .rv-faq-list li { margin: 0 0 5px; font-weight: bold; }
#OtPage .pg-moldura .rv-faq-more { margin: 14px 0 2px; padding: 6px 0 0; border-top: 1px dotted var(--line-strong); }
#OtPage .pg-moldura .rv-faq-group > h2 { margin: 8px 0 6px; font-size: .95rem; }
#OtPage .pg-moldura .rv-faq-entry { margin: 0 0 10px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--line-soft); }
#OtPage .pg-moldura .rv-faq-entry > h3 { margin: 0 0 4px; font-size: .875rem; }
.world-icons { float: right; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 4px 8px 16px; }
.world-icon img { display: block; width: 48px; height: 48px; object-fit: contain; }
.characters-page #OtPage #portal-form .ThreeColumnsForm { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.vip-access { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:24px; margin:0 0 24px; border:1px solid var(--line-strong); border-radius:5px; background:var(--surface); }
.vip-access > div:first-child { flex:1 1 290px; }
#OtPage .vip-access h2 { margin:0 0 10px; color:var(--gold); font:400 1.35rem var(--heading,Georgia,serif); }
.vip-access p { color:var(--ink-soft); font:.875rem/1.7 var(--ui); margin:0; }
.vip-access-actions { display:flex; flex-wrap:wrap; gap:10px; }
.vip-access-actions .btn { min-height:44px; justify-content:center; box-sizing:border-box; text-align:center; white-space:normal; }
@media (max-width:600px) { .vip-access { padding:18px; gap:18px; }.vip-access-actions { width:100%; }.vip-access-actions .btn { flex:1 1 100%; } }
@media (max-width:600px) { #OtPage .vip-benefits table { table-layout:fixed; }#OtPage .vip-benefits table th { width:35%; white-space:normal; overflow-wrap:anywhere; } }
.characters-page #OtPage #portal-form .ThreeColumnsFormCell { width: auto; min-width: 0; margin: 0; }
.characters-page #OtPage #portal-form input[name="name"] { width: 100%; height: 42px; box-sizing: border-box; }
.characters-page #OtPage .pg-moldura .TableContent td { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .characters-page #OtPage #portal-form .ThreeColumnsForm { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .characters-page #OtPage .pg-moldura .TableContent { table-layout: fixed; }
  .characters-page #OtPage .pg-moldura .TableContent .LabelV175 { width: 110px; white-space: normal; }
}
@media (max-width: 768.01px) {
  #OtPage .pg-moldura .rv-faq-topics { grid-template-columns: repeat(2, 1fr); }
  #OtPage .pg-moldura .rv-faq-blocks { grid-template-columns: 1fr; }
}