html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 16px;
}
body {
    background-color: rgb(16, 16, 16);
    color: rgb(218, 218, 218);
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}
h1 {
    font-size: 1.5rem;
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
    margin: 0 0 0 0;
}
h2 {
    margin: 0.5rem 0 0 0;
}
h4{
    margin: 0.5rem 0 0 0;
}
input {
    align-self: flex-start;
    padding: 0.5rem;
    margin: 0.5rem 0 1rem 0;
}
p {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li {
    padding: 0.75rem;
}
.hidden {
    display: none;
}
.need_flex {
    display: flex;
}
#message_box {
    justify-content: center;
    align-items: center;
    position: absolute;
    /* Must out-stack the page's own positioned panels (.vertical_box_layout,
       .upload-container, .dash-panel - all z-index:auto and later in the DOM)
       or an upload/vote error renders behind them. Above #menu_box (1000). */
    z-index: 2000;
    left: 50%;
    background-color: rgba(16, 16, 16, 0.9);
    border: white solid 4px;
    font-size: 1.5rem;
    font-weight: 800;
    box-sizing:border-box;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    text-align: center;
}
#menu_box {
    position: absolute;
    top: 2.75rem;
    right: 0;
    /* F5f: the menu must out-stack positioned page panels (z-index:auto =
       DOM order, and the page content comes after the header). */
    z-index: 1000;
    background-color: rgba(16, 16, 16, 0.75);
    border: white solid 4px;
    font-size: 1.5rem;
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
    box-sizing:border-box;
    width: 100%;
}
#menu_box li {
    text-align: right;
}
/* F5h: account status line - default font, muted and non-interactive so it
   never looks like a menu item. */
#menu_account_label {
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 0.85rem;
    opacity: 0.6;
    padding: 0.75rem 1rem 0.5rem 1rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
    pointer-events: none;
    user-select: none;
}
#menu_box a {
    padding: 1rem;
    color: white;
    display: block;
}
#menu_box li:hover {
    background-color: blue;
}
/* PRD item 47: the log-out menu item is a POST form (never a GET link) -
   the submit button gets the same full-row look as #menu_box a links. */
#menu_box form {
    margin: 0;
}
#menu_box button.menu_log_out_button {
    padding: 1rem;
    color: white;
    display: block;
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    text-align: right;
    cursor: pointer;
}
.video_player {
    display: block;
    width: 100%;
    /* F5c: portrait uploads must not overflow the 40rem-capped container
       (a 9:16 video at width:100% is ~53rem tall) - cap the player box and
       letterbox with object-fit:contain. */
    max-height: 40rem;
    object-fit: contain;
}
.no_decoration {
    text-decoration: inherit;
    color: inherit;
}
.inline {
    display: inline-block;
}
.checkbox {
    width: 2rem;
    height: 2rem;
}
.subtext {
    font-size: 0.75rem;
    font-style: italic;
}
/* Home page only (views/index.ejs): two-line italic subtitle under the main
   header bar, above the video player. Left-aligned to sit flush with the
   header/player column. <p> has zero margins here, so the wrapper supplies
   its own spacing. */
.home_subheader {
    text-align: left;
    line-height: 1.4;
    margin: 0.5rem 0 1rem 0;
}
.max_content_width_container_portrait {
    max-width: 30rem;
    padding: 1rem;
}
.max_content_width_container_landscape {
    max-width: 40rem;
    padding: 1rem;
}
.vertical_box_layout {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1rem;
}
.horizontal_box_layout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
}
.horizontal_space_between_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.horizontal_center {
    margin: auto;
}
.full_width {
    width: 100%;
    box-sizing: border-box;
}
.extra_margin_top {
    margin-top: 2rem;
}
.submit_button {
    appearance: none;
    border: 0 solid rgba(255, 255, 255, 0);
    border-radius: 0.5rem;
    box-sizing: border-box;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    background-color: rgb(36, 102, 163);
}
/* PRD item 80: the tip-result 'Return to video' link is an <a> carrying the
   site's .submit_button look. Anchors need inline-block for the button's
   vertical padding to apply, and no underline so it reads as a button. */
.return_to_video_button {
    display: inline-block;
    text-decoration: none;
}
.button_vote {
    appearance: none;
    border: 0 solid rgba(255, 255, 255, 0);
    border-radius: 0.5rem;
    box-shadow: rgba(27, 31, 35, .1) 0 0 0;
    box-sizing: border-box;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    vertical-align: middle;
}
.button_vote:hover {
    filter: brightness(1.5);
}
.button_vote:disabled {
    background-color: #767676;
    border-color: rgba(27, 31, 35, .1);
    color: rgba(255, 255, 255, .8);
    cursor: default;
}
/* Item 25/F19: disabled vote/tip buttons must not look pressable - the
   :hover brightness filter above would otherwise still fire on them. */
.button_vote:disabled:hover {
    filter: none;
}
/* /about static preview of the vote/tip row: same look as the homepage
   but inert (no index.js and no data-vote-type/data-tip-button attrs, so
   no POST can fire) - also kill the pressable hover/cursor. */
.vote_preview {
    justify-content: center;
}
.vote_preview .button_vote {
    cursor: default;
}
.vote_preview .button_vote:hover {
    filter: none;
}
.button_bg_0 { background-color: #24a36e; }
.button_bg_1 { background-color: #3ba324; }
.button_bg_2 { background-color: #6ea324; }
.button_bg_3 { background-color: #a36c24; }
.button_bg_4 { background-color: #a32424; }
.fixed_width_col { width: 40rem; }
.video_container { max-width: 40rem; max-height: 40rem; }
.video_placeholder {
    width: 100%;
    max-height: 40rem;
    aspect-ratio: 9 / 16;
    background-color: #1f1f1f;
    border: 2px dashed #3a3a3a;
    border-radius: 0.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    padding: 1rem;
}
.video_placeholder_title {
    font-size: 1.25rem;
    font-weight: bold;
}
.video_placeholder_sub {
    color: #9a9a9a;
    font-size: 0.9rem;
}
/* Muted captions under the homepage vote row(s): the placeholder's disabled
   row reads as a placeholder (not a real daily video), and the upload-pool
   counter ("Upload pool: x/365") sits under the vote row in the same quiet
   caption style while the pool is below the draw threshold. */
.placeholder_uploader {
    margin-top: 0.75rem;
}
.placeholder_note {
    color: #9a9a9a;
    font-size: 0.85rem;
}
.placeholder_vote_note,
.upload_pool_note {
    color: #9a9a9a;
    font-size: 0.85rem;
}
.plain_link { text-decoration: none; }
/* F4d: inline tip form, toggled client-side by index.js. Its flex display
   would beat the .hidden class (ID > class), so the hidden rule is explicit. */
#tip_form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* F18: the amount/send/cancel row stays on one line; the fee warning +
       breakdown (width 100% below) wrap onto their own lines UNDER the
       row instead of squeezing in beside it. */
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding: 0.5rem;
    background-color: #1f1f1f;
    border: 2px solid #3a3a3a;
    border-radius: 0.5rem;
}
#tip_form.hidden {
    display: none;
}
#tip_form label {
    font-size: 1rem;
}
#tip_amount {
    width: 5rem;
    padding: 0.5rem;
    margin: 0;
    border-radius: 0.4rem;
    border: 1px solid #3a3a3a;
    background-color: #111111;
    color: #dadada;
    font-size: 1rem;
}
#tip_form .button_vote {
    font-size: 1rem;
    padding: 0.5rem 0.9rem;
}
/* F8a: fee warning + breakdown inside the tip form - filled client-side by
   update_tip_fee_display(). width:100% wraps them below the flex input row;
   the .hidden rules below win (no display set on the IDs). */
#tip_fee_warning {
    width: 100%;
    font-size: 0.85rem;
    color: #f2c14e;
    background-color: #2a2211;
    border: 1px solid #5a4a1a;
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    line-height: 1.35;
}
#tip_fee_warning.hidden {
    display: none;
}
#tip_fee_breakdown {
    width: 100%;
    font-size: 0.85rem;
    color: #9ad6b5;
}
#tip_fee_breakdown.hidden {
    display: none;
}
/* Item 58: the 'Fees' disclosure link under the tip form. Opens the
   tip-fees modal (shared .modal_overlay/.modal_box below). Small + muted
   so it never competes with the Send button. */
#tip_fees_row {
    width: 100%;
    margin-top: 0.25rem;
}
#tip_fees_link {
    color: #9a9a9a;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}
#tip_fees_link:hover {
    color: #dadada;
}
/* Pop-up overlays: signup terms pop-ups (T&C + upload guidelines) and the
   homepage tip-fees modal. Two-class .modal_overlay.hidden beats the
   one-class display rule below. */
.modal_overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.modal_overlay.hidden {
    display: none;
}
.modal_box {
    background-color: #1f1f1f;
    border: 2px solid #3a3a3a;
    border-radius: 0.5rem;
    padding: 1.25rem;
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}
.modal_box ul {
    padding-left: 1.25rem;
    line-height: 1.5;
}
/* F2d: homepage session banner, filled client-side by index.js. Its flex
   display would beat .hidden (ID > class), so the hidden rule is explicit
   or the empty box would show on every load. */
#user_status_banner {
    border: 2px solid #3a3a3a;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: #1f1f1f;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}
#user_status_banner.hidden {
    display: none;
}
.user_status_title {
    font-size: 1.1rem;
    font-weight: bold;
}
.user_status_sub {
    color: #9a9a9a;
    font-size: 0.9rem;
    /* Admin-entered text (rejection reasons) is multi-line: keep its line
       breaks so point-form reasons render as a list. */
    white-space: pre-wrap;
    word-break: break-word;
}
.user_status_warn {
    color: #e0a32a;
}
.user_status_link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #24a36e;
    color: white;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: bold;
}
/* F7a: selected-user banner (header.ejs, all pages except the homepage).
   Countdown + dismiss wired by header.js; server-rendered only when it
   should show, so it starts visible (class-based, .hidden would win). */
.selection_banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background-color: #14331f;
    border: 2px solid #24a36e;
    border-radius: 0.5rem;
}
.selection_banner_title {
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}
.selection_banner_sub {
    font-size: 0.9rem;
    color: #9fe0c0;
    margin: 0 0 0.5rem 0;
}
.selection_banner_deadline {
    font-weight: bold;
    color: #ffffff;
}
.selection_banner_link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #24a36e;
    color: white;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: bold;
}
.selection_banner_dismiss {
    appearance: none;
    border: 0;
    background: transparent;
    color: #9fe0c0;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
    flex-shrink: 0;
}
.selection_banner_dismiss:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.default_icon {
    width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
}
/* F19: owner notice under the disabled vote buttons while the viewer's own
   video is live. */
.own_video_notice {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #9a9a9a;
    text-align: center;
}
/* F16: homepage 'you sent a tip' confirmation. */
.my_tip_notice {
    margin-top: 1rem;
    padding: 0.75rem 1.25rem;
    background-color: #14331f;
    border: 2px solid #24a36e;
    border-radius: 0.5rem;
    text-align: center;
}
.my_tip_notice p {
    margin: 0.25rem 0;
    color: #dadada;
}
.my_tip_notice b {
    color: #ffffff;
}
/* F6a: tips-payout block on the Settings page - balance + the same
   PAYOUT_INSTRUCTIONS steps the F1e payout email renders (they cannot
   drift apart). Green-tinted like the other money notices. */
.payout_block {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background-color: #14331f;
    border: 2px solid #24a36e;
    border-radius: 0.5rem;
}
.payout_block h3 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
}
.payout_block h4 {
    margin: 1rem 0 0.25rem 0;
    color: #9fe0c0;
    font-size: 0.95rem;
}
.payout_block p {
    margin: 0.25rem 0;
    color: #dadada;
}
.payout_block ol {
    margin: 0.25rem 0 0 1.25rem;
    padding: 0;
    color: #dadada;
}
.payout_block li {
    margin: 0.35rem 0;
}
.payout_block .subtext {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #9fe0c0;
}
/* Item 56: tip-jar payout-breakdown table on the Settings payout block. It
   mirrors the rotation payout math (6% cut + PayPal sender fee 2% / $0.25
   minimum on the item sent), so the page shows exactly what a payout would
   send. Figures are labelled estimates - PayPal fees vary with funding
   source, currency and destination. */
.payout_table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0 0 0;
    font-size: 0.9rem;
}
.payout_table td {
    padding: 0.32rem 0;
    color: #dadada;
    border-bottom: 1px solid #245a3c;
    vertical-align: top;
}
.payout_table td.amount {
    text-align: right;
    white-space: nowrap;
}
.payout_table .payout_title td {
    color: #ffffff;
    font-weight: bold;
    font-size: 0.95rem;
    border-bottom: 2px solid #24a36e;
}
.payout_table .payout_fee td.amount {
    color: #e89a9a;
}
.payout_table .payout_note td {
    color: #9fe0c0;
    font-size: 0.8rem;
    border-bottom: none;
    padding-top: 0.6rem;
}
.payout_table .payout_total td {
    color: #ffffff;
    font-weight: bold;
    border-bottom: none;
    padding-top: 0.6rem;
}
.payout_table .payout_total td.amount {
    font-size: 1.3rem;
}
.payout_hint {
    color: #9fe0c0;
    font-size: 0.82rem;
    font-weight: normal;
}
.payout_state_note {
    margin: 0.6rem 0 0 0;
    font-size: 0.9rem;
    color: #dadada;
}
.payout_state_note.warn {
    color: #e8c36a;
}
.payout_hint.est_note {
    display: block;
    margin: 0.6rem 0 0 0;
}
/* F9a: admin<->user message thread. Admin messages green-tinted, replies
   neutral; both sides are user-typed text escaped by EJS. */
.message_thread {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background-color: #1f1f1f;
    border: 2px solid #3a3a3a;
    border-radius: 0.5rem;
}
.message_thread h3 {
    margin: 0 0 0.6rem 0;
    color: #ffffff;
}
.message {
    margin: 0.4rem 0;
    padding: 0.45rem 0.7rem;
    border-radius: 0.4rem;
    background-color: #161616;
    border: 1px solid #333;
}
.message_admin {
    background-color: #14331f;
    border-color: #24a36e;
}
.message_who {
    margin: 0 0 0.15rem 0;
    font-size: 0.75rem;
    color: #999;
}
.message_admin .message_who {
    color: #9fe0c0;
}
.message_body {
    margin: 0;
    color: #dadada;
    white-space: pre-wrap;
    word-break: break-word;
}
.message_reply {
    margin-top: 0.6rem;
}
.message_reply textarea {
    width: 100%;
    box-sizing: border-box;
    background-color: #111111;
    color: #dadada;
    border: 1px solid #3a3a3a;
    border-radius: 0.4rem;
    padding: 0.5rem;
    resize: vertical;
    min-height: 3rem;
    font-family: inherit;
}
.settings_banner {
    margin: 0.75rem 0 0 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 0.9rem;
}
.settings_banner.ok {
    background-color: #143f2c;
    color: #7ae0a8;
}
.settings_banner.err {
    background-color: #4a1616;
    color: #f08888;
}
/* Item 35: payout-email 'verification pending' state - amber, neither the
   green 'all good' nor the red 'error' tone (the address is saved, it just
   has not been confirmed yet). */
.settings_banner.pending {
    background-color: #3d3012;
    color: #e8c36a;
}
/* F1c: resend-verification button next to 'Account email verified: No'. */
#resend_verification_button {
    appearance: none;
    border: 1px solid #3a3a3a;
    border-radius: 0.4rem;
    background-color: #1f1f1f;
    color: #dadada;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    margin: 0 0 0 0.5rem;
    vertical-align: middle;
}
#resend_verification_button:hover {
    background-color: #2a2a2a;
}
#resend_verification_button:disabled {
    opacity: 0.6;
    cursor: default;
}
/* F21: change-password section. Neutral card (a plain account action, not
   a money notice). */
.password_block {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background-color: #1f1f1f;
    border: 2px solid #3a3a3a;
    border-radius: 0.5rem;
}
.password_block h3 {
    margin: 0 0 0.4rem 0;
    color: #ffffff;
}
.password_block .subtext {
    margin: 0 0 0.75rem 0;
    color: #9a9a9a;
    font-size: 0.85rem;
    font-style: normal;
}
.password_block label h4 {
    color: #dadada;
    font-size: 0.9rem;
}
.reset_code_button {
    appearance: none;
    border: 1px solid #24a36e;
    border-radius: 0.4rem;
    background-color: #14331f;
    color: #9fe0c0;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.45rem 0.9rem;
}
.reset_code_button:hover {
    background-color: #1a4a2c;
}
.reset_code_button:disabled {
    opacity: 0.6;
    cursor: default;
}
#password_reset_form.hidden {
    display: none;
}
.breathing {
  animation: breathe 2s ease-in-out infinite;
}
@keyframes breathe {
  0% { transform: scale(1); background-color: #24a36e; }
  50% { transform: scale(1.05); background-color: #2ecc71; }
  100% { transform: scale(1); background-color: #24a36e; }
}
/* PRD item 83: the upload page's share-text preview box carries the SAME
   breathing pulse as the top-bar upload button (.breathing), but as a glow
   instead of a scale/background pulse so the textarea and button inside it
   stay fully legible. Same colours + 2s ease-in-out cadence. */
.breathing_highlight {
  animation: breathe_highlight 2s ease-in-out infinite;
}
@keyframes breathe_highlight {
  0% { box-shadow: 0 0 0 2px #24a36e; }
  50% { box-shadow: 0 0 14px 4px #2ecc71; }
  100% { box-shadow: 0 0 0 2px #24a36e; }
}