/* ==========================================================================
   reydempto site.css
   Sections below are grouped by concern; each is labeled and, aside from the
   Responsive Overrides section at the end (all @media blocks, consolidated),
   every rule keeps its original relative order to preserve cascade behavior.
   ========================================================================== */

/* ---- Base & Reset ---- */

body {
  margin: 0;
  min-height: 100vh;
  /* Sticky footer: a flex column with main allowed to grow means the
     footer sits at the bottom of the viewport on short pages instead of
     floating right under the content, while still flowing normally
     below tall content that already exceeds the viewport. */
  display: flex;
  flex-direction: column;
  background: #0d1117;
  color: #c9d1d9;
  font-family: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.6;
}
.post-body,
.terminal-article {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #e8ebed;
}
.post-body img,
.terminal-article img,
.ql-editor img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}
* {
  box-sizing: border-box;
}
/* Form controls don't inherit font-size from the page by default and
   fall back to the browser's tiny UA-default size (~13px) — below
   16px, iOS Safari auto-zooms the viewport on focus. No rule anywhere
   in this codebase set an explicit input font-size, so this was
   happening on every text field site-wide. */
input,
select,
textarea {
  font-size: 16px;
  font-family: inherit;
}

/* ---- Header & Navbar ---- */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  height: 50px;
  padding: 0 10px;
  background: rgba(39, 45, 55, 0.98);
  color: #8b949e;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(110, 118, 129, 0.18);
}
.header-left,
.header-right {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0px 8px;
}
.header-separator {
  margin: 0 10px;
  color: #8b949e;
}
header a {
  color: #58a6ff;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
}
.header-dropdown-toggle {
  color: #58a6ff;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
}
.header-left a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: 100%;
}
.header-username {
  line-height: 1;
}
.header-avatar,
.header-avatar-placeholder {
  width: auto;
  height: 30px; /* navbar-specific avatar height */
  max-width: 30px;
  max-height: 30px;
  line-height: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
  border: 1px solid rgba(110, 118, 129, 0.35);
  background: rgba(88, 166, 255, 0.14);
  color: #f0f6fc;
  font-size: 0.75rem;
  font-weight: 600;
}
/* Ensure image elements do not exceed the intended size. The base
   .header-avatar rule's border/background exist for the initial-letter
   placeholder span (it needs a visible boundary/fill) — a real photo
   doesn't, so this overrides them off here rather than on the shared
   rule above. */
.header-avatar[src] {
  display: block;
  width: auto;
  height: 30px; /* ensure image element matches navbar avatar height */
  max-width: 30px;
  max-height: 30px;
  object-fit: cover;
  border: none;
  background: none;
}
header a:hover,
.header-dropdown-toggle:hover {
  text-decoration: underline;
}
.header-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.header-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
  pointer-events: auto;
  background: transparent;
}
.header-dropdown img {
  height: 30px;
  vertical-align: middle;
}
.header-dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  display: none;
  flex-direction: column;
  min-width: 140px;
  background: rgba(20, 25, 32, 0.98);
  border: 1px solid rgba(110, 118, 129, 0.2);
  border-radius: 10px;
  padding: 10px 0;
  /* box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24); hidden to blend dropdown with navbar */
}
.header-dropdown:hover .header-dropdown-menu,
.header-dropdown:focus-within .header-dropdown-menu {
  display: flex;
  border-radius: 0px 0px 10px 10px;
  border-top: none;
  border-color: #333943;
  background-color: rgba(39, 45, 55, 0.98);
  /* fixed (not absolute) so it's anchored to the actual viewport edge
     at every screen size, ignoring the header's own right padding —
     header's height is a fixed 50px, so top lines up exactly. */
  position: fixed;
  top: 50px;
  right: 0;
  padding: 0px;
}
.header-dropdown-menu a,
.header-dropdown-menu .logout-button {
  display: block;
  width: 100%;
  padding: 10px 18px;
  color: #c9d1d9;
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.header-dropdown-menu a,
.header-dropdown-menu .logout-button {
  transition: background-color 80ms ease-out, color 80ms ease-out;
}
.header-dropdown-menu a:hover,
.header-dropdown-menu .logout-button:hover {
  background: rgba(88, 166, 255, 0.08);
  color: #58a6ff;
}
.header-dropdown-menu .logout-form {
  margin: 0;
}

/* ---- Layout ---- */

main {
  /* Explicit width, not just max-width — in a flex container (see
     body), auto margins on the cross axis suppress the default stretch
     sizing and shrink-to-fit content instead, so without this main's
     width followed whatever tab/content was active instead of always
     filling up to max-width like it did in normal block layout. */
  width: 100%;
  max-width: 860px;
  margin: 40px auto;
  padding: 0 20px;
  /* Establishes a block formatting context so a child's margin-bottom
     (e.g. .tip-page-panel's, compensating for its own relative-position
     top offset) is actually contained within main's own box instead of
     collapsing straight through it and merging with main's own margin
     — which silently ate the intended gap above the footer. */
  display: flow-root;
  /* Grow to fill any leftover vertical space in the flex-column body
     (see body's own comment) so the footer stays pinned to the bottom
     of the viewport on short pages. */
  flex: 1 0 auto;
}
/* Dashboard-specific override: allow dashboard to use wider layout */
.dashboard-page main {
  max-width: none;
  margin: 0;
  padding: 0;
}
.dashboard-page .dashboard-layout { padding-left: 0; }

/* ---- Terminal Panel & Titles ---- */

.terminal-panel {
  background: rgba(20, 25, 32, 0.95);
  border: 1px solid #30363d;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  /* extra top padding to make room for overlapping folder tabs */
  padding: 46px 32px 32px;
  position: relative;
  backdrop-filter: blur(10px);
}
.tip-page-panel {
  top: 41px;
  /* Relative-position offsets don't reserve extra space in normal flow,
     so without this the panel's real (shifted) bottom edge overflows
     41px past where <main> thinks it ends — eating the entire gap that
     was supposed to separate it from the footer below. */
  margin-bottom: 41px;
  border-top-left-radius: 0;
  /* Sound Alerts sits flush at the top-left (hence the radius override
     above); Support now sits flush at the top-right too (see
     .tip-page-panel .dashboard-nav-tabs in tipping.css), so square that
     corner off the same way. */
  border-top-right-radius: 0;
}
.dashboard-page .terminal-panel {
  border-radius: 0px 18px 18px 18px;
}
.terminal-title {
  font-size: 0.95rem;
  color: #8b949e;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}
.terminal-title.terminal-path::before {
  content: "$ ";
  color: #7ee787;
}
.terminal-title.terminal-path::after {
  content: " ";
  display: inline-block;
  width: 0.75ch;
  height: 1em;
  margin-left: 0.35ch;
  background: #8b949e;
  vertical-align: middle;
  transform: translateY(-0.1em);
  animation: blink-cursor 1s steps(1) infinite;
}
@keyframes blink-cursor {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
.terminal-title-post {
  color: #7ee787;
}

/* ---- Base Typography ---- */

h1 {
  font-size: clamp(1.9rem, 2.2vw, 2.6rem);
  margin-top: 0;
  margin-bottom: 18px;
  color: #f0f6fc;
}
p,
li,
dt,
dd {
  font-size: 1rem;
}
.meta {
  color: #8b949e;
  font-size: 0.95rem;
}

/* ---- Blog & Article Content ---- */

.terminal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.terminal-list li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(110, 118, 129, 0.16);
}
.terminal-list li:last-child {
  border-bottom: none;
}
.terminal-list li::before {
  content: "›";
  display: inline-block;
  width: 1em;
  color: #7ee787;
  margin-right: 8px;
}
.terminal-list a {
  color: #58a6ff;
  font-weight: 600;
}
.terminal-article {
  padding-top: 12px;
}
.terminal-article p {
  margin-bottom: 1.25rem;
}
.blog-feed {
  display: grid;
  gap: 26px;
  margin-top: 24px;
  contain: layout style;
}
.blog-feed a,
.post-body a,
.terminal-article a {
  color: #7ee787;
}
.blog-feed a:hover,
.post-body a:hover,
.terminal-article a:hover {
  color: #7ee787;
  text-decoration: underline;
}
.terminal-post {
  background: rgba(14, 19, 26, 0.9);
  border: 1px solid rgba(110, 118, 129, 0.16);
  border-radius: 14px;
  padding: 24px;
  contain: layout style;
}
.terminal-post .terminal-title {
  margin-bottom: 14px;
}
.post-meta {
  color: #8b949e;
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.post-body {
  color: #c9d1d9;
}
.post-body p {
  margin-bottom: 1.2rem;
}
.terminal-empty {
  color: #8b949e;
}

/* ---- Base Links ---- */

a {
  color: #58a6ff;
  text-decoration: none;
}
a:hover,
a:focus-visible {
  text-decoration: underline;
}

/* ---- Forms & Rich Text Editor ---- */

.auth-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.field-row-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.field-inline-label {
  font-size: 0.95rem;
  color: #8b949e;
  white-space: nowrap;
}
.field-inline-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.field-inline-controls .field-hint {
  margin: 0;
  color: #8b949e;
}
.field-row-hidden {
  display: none;
}
.field-row-inline input[type="checkbox"] {
  margin: 0;
}
.field-row label {
  font-size: 0.95rem;
  color: #8b949e;
}
.field-row input,
.field-row select,
.field-row textarea {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #30363d;
  background: #010409;
  color: #c9d1d9;
  border-radius: 10px;
}
.field-row input:focus,
.field-row select:focus,
.field-row textarea:focus {
  outline: 2px solid #58a6ff;
  outline-offset: 2px;
}
#quill-editor {
  min-height: 320px;
  background: #010409;
  border: 1px solid #30363d;
  border-radius: 10px;
  color: #c9d1d9;
}
.ql-toolbar.ql-snow {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 10px 10px 0 0;
}
.ql-container.ql-snow {
  border: 1px solid #30363d;
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: #02040a;
  color: #c9d1d9;
}
.ql-editor {
  min-height: 260px;
  color: #c9d1d9;
}

/* ---- Buttons ---- */

.terminal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 1px solid;
  border-color: rgba(88, 166, 255, 0.3);
  border-radius: 10px;
  background: #161b22;
  color: #58a6ff;
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 80ms ease-out;
  will-change: background-color;
}
.terminal-button:hover,
.terminal-button:focus {
  background: #1c304b;
}
.terminal-button.secondary {
  background: transparent;
  border-color: rgba(88, 166, 255, 0.3);
  color: #58a6ff;
  transition: background-color 80ms ease-out, border-color 80ms ease-out;
}
.terminal-button.danger {
  background: #4f1111;
  border-color: #7b1a1a;
  color: #ffb3b3;
  transition: background-color 80ms ease-out;
}
.terminal-button.danger:hover,
.terminal-button.danger:focus {
  background: #631616;
}

/* ---- Blog Post Status ---- */

.post-status {
  margin-bottom: 18px;
}
.badge-draft {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
  font-size: 0.85rem;
  font-weight: 600;
  margin-right: 0.75rem;
}

/* ---- Dashboard Layout & Navigation ---- */

.dashboard-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  contain: layout style;
}
/* Dashboard two-column layout */
.dashboard-layout {
  /* Use fixed nav plus a main column sized by viewport percentages
     Nav: 20% (fixed to left), Main: 70%, Remaining: 10% for margins */
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.dashboard-nav {
  background: transparent;
  padding: 0;
  margin-bottom: 0;
}
.dashboard-nav-tabs {
  display: flex;
  gap: 6px;
  padding: 0;
  margin: 0 0 0 -33px;
  position: absolute;
  /* lift the tab group slightly so it visually overlaps the panel's rounded top */
  top: -42px;
  left: 50%;
  right: auto;
  /* center the tab group inside the terminal panel and respect panel padding */
  width: calc(100% - 64px);
  max-width: 796px;
  transform: translateX(-50%);
  z-index: 22;
}
/* .dashboard-nav-tabs::before {
  content: '';
  position: absolute;
  left: -10px;
  right: -10px;
  top: 0;
  height: 16px;
  background: rgba(20,25,32,0.98);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  pointer-events: none;
  z-index: -1;
}
*/

.dashboard-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  color: #dfe7f2;
  text-decoration: none;
  border: 1px solid rgba(110,118,129,0.24);
  border-radius: 18px 18px 0px 0px;
  background: rgba(20,25,32,0.95);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
  transform: translateY(0);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  position: relative;
  margin-right: -10px;
  font-size: 0.92rem;
  font-weight: 500;
}
.dashboard-nav-link:focus-visible {
  outline: 2px solid rgba(88,166,255,0.5);
  outline-offset: 2px;
}
.dashboard-nav-link:not(:first-child) {
  min-width: 92px;
  padding-left: 14px;
  padding-right: 14px;
}
.dashboard-nav-link:first-child {
  min-width: 134px;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 700;
}
.dashboard-nav-link:hover {
  background: rgba(25,30,36,0.98);
  /* transform: translateY(3px); */
  box-shadow: 0 14px 24px rgba(0,0,0,0.18);
}
.dashboard-nav-link.active {
  background: rgba(20,25,32,1);
  border-color: #30363d;
  box-shadow: 0 8px 20px rgba(0,0,0,0);
  transform: translateY(0);
  /* Active tab should always float above others */
  z-index: 1000;
  color: #f8fbff;
  border-bottom-color: transparent;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.dashboard-nav-link.active:hover {
  background: rgba(20,25,32,1);
  transform: translateY(0);
}
.dashboard-nav-link::before,
.dashboard-nav-link::after {
  display: none;
}
/* Stacking order helper: leftmost tab is highest, rightmost lowest.
   Use the `.stacked-tabs` class on any tab container to opt-in.
   Existing dashboard navs already use `.dashboard-nav-tabs`, so we
   include that selector for backwards-compatibility. */
.stacked-tabs .dashboard-nav-link,
.stacked-tabs .nav-link,
.dashboard-nav-tabs .dashboard-nav-link {
  z-index: 30;
}
.stacked-tabs .dashboard-nav-link:nth-child(1),
.stacked-tabs .nav-link:nth-child(1),
.dashboard-nav-tabs .dashboard-nav-link:nth-child(1) { z-index: 40; }
.stacked-tabs .dashboard-nav-link:nth-child(2),
.stacked-tabs .nav-link:nth-child(2),
.dashboard-nav-tabs .dashboard-nav-link:nth-child(2) { z-index: 39; }
.stacked-tabs .dashboard-nav-link:nth-child(3),
.stacked-tabs .nav-link:nth-child(3),
.dashboard-nav-tabs .dashboard-nav-link:nth-child(3) { z-index: 38; }
.stacked-tabs .dashboard-nav-link:nth-child(4),
.stacked-tabs .nav-link:nth-child(4),
.dashboard-nav-tabs .dashboard-nav-link:nth-child(4) { z-index: 37; }
.stacked-tabs .dashboard-nav-link:nth-child(5),
.stacked-tabs .nav-link:nth-child(5),
.dashboard-nav-tabs .dashboard-nav-link:nth-child(5) { z-index: 36; }
.stacked-tabs .dashboard-nav-link:nth-child(6),
.stacked-tabs .nav-link:nth-child(6),
.dashboard-nav-tabs .dashboard-nav-link:nth-child(6) { z-index: 35; }
.stacked-tabs .dashboard-nav-link:nth-child(7),
.stacked-tabs .nav-link:nth-child(7),
.dashboard-nav-tabs .dashboard-nav-link:nth-child(7) { z-index: 34; }
.stacked-tabs .dashboard-nav-link:nth-child(8),
.stacked-tabs .nav-link:nth-child(8),
.dashboard-nav-tabs .dashboard-nav-link:nth-child(8) { z-index: 33; }
.stacked-tabs .dashboard-nav-link:nth-child(9),
.stacked-tabs .nav-link:nth-child(9),
.dashboard-nav-tabs .dashboard-nav-link:nth-child(9) { z-index: 32; }
/* Fallback for more tabs: ensure later tabs are lower than earlier ones */
.stacked-tabs .dashboard-nav-link,
.stacked-tabs .nav-link,
.dashboard-nav-tabs .dashboard-nav-link { z-index: 30; }
/* Ensure active tab always sits above any nth-child rules */
.dashboard-nav-tabs .dashboard-nav-link.active { z-index: 1000 !important; }
.stacked-tabs .dashboard-nav-link.active { z-index: 1000 !important; }
.dashboard-main {
  min-width: 0;
  margin: 0;
  width: 100%;
  padding: 0 20px 40px;
}
.dashboard-wide {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}
.dashboard-wide .terminal-panel {
  width: 100%;
  max-width: 860px;
  margin: 70px auto;
}
.dashboard-section.hidden {
  display: none;
}

/* ---- Utilities ---- */

/* Generic hidden utility used across templates */
.hidden { display: none; }
/* Generic spacing utilities (pulled out of one-off inline styles scattered
   across templates in every app — every page loads this file already). */
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-16 { margin-bottom: 16px; }
.ml-8 { margin-left: 8px; }
/* .account-actions already sets margin-top: 20px below; a few auth pages
   need 16px instead. Doubled selector guarantees this wins regardless of
   the two rules' relative order in the file. */
.account-actions.account-actions--tight {
  margin-top: 16px;
}
/* Optimized hidden state for asset cards (uses visibility instead of display for better performance) */
.asset-card.hidden {
  display: none;
  pointer-events: none;
}

/* ---- Dashboard Cards & Tables ---- */

.dashboard-card {
  background: rgba(14, 19, 26, 0.9);
  border: 1px solid rgba(110, 118, 129, 0.16);
  border-radius: 14px;
  padding: 18px;
}
.dashboard-card-title {
  font-size: 0.9rem;
  color: #8b949e;
  margin-bottom: 8px;
}
.dashboard-card-value {
  font-size: 1.8rem;
  color: #f0f6fc;
  font-weight: 700;
}
.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.blog-enabled-form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.dashboard-table-wrap {
  overflow-x: auto;
}
.tips-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.tips-table {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  color: #c9d1d9;
}
.tips-table th,
.tips-table td {
  min-width: 0;
  box-sizing: border-box;
}
.terminal-panel.manage-panel {
    border: none;
    padding: 0px 0px 0px;
    width: 100%;
    box-shadow: none;
    margin-top: 0px;
    background: #141920;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    contain: layout style;
    transform: translateZ(0);
    will-change: transform;
}
.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  color: #c9d1d9;
}
.dashboard-table th,
.dashboard-table td {
  text-align: left;
  padding: 5px 0px 5px 0px;
  border-bottom: 1px solid rgba(110, 118, 129, 0.18);
}
.dashboard-table th {
  color: #8b949e;
  text-align: left;
  font-size: 0.95rem;
}
.dashboard-table td a {
  color: #58a6ff;
}
.dashboard-table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-table-actions .inline-form {
  margin: 0;
}
.tips-date-cell {
  white-space: nowrap;
  min-width: 142px;
}
.tips-col-from {
  width: 150px;
}
.tips-from-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tips-expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: #58a6ff;
  cursor: pointer;
  vertical-align: middle;
}
.tips-expand-toggle:hover,
.tips-expand-toggle:focus-visible {
  color: #79b8ff;
}
.tips-col-amount {
  width: 72px;
}
.tips-col-status {
  width: 64px;
}
.tips-col-date {
  width: 138px;
}
.tips-amount-cell {
  white-space: nowrap;
  text-align: center !important;
}
.tips-status-cell {
  white-space: nowrap;
  text-align: center !important;
  min-width: 64px;
}
.tips-date-cell {
  white-space: nowrap;
  min-width: 138px;
}
.tips-message-cell {
  width: auto;
  min-width: 0;
  overflow: hidden;
  padding-left: 20px !important;
}
.tips-message-preview {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tips-message-full {
  display: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tips-row.expanded .tips-message-preview {
  display: none;
}
.tips-row.expanded .tips-message-full {
  display: -webkit-box;
}
.tips-row {
  vertical-align: top;
}
.tips-status-cell {
  text-align: center !important;
}
.tips-status-cell .status-icon {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  color: #f0f6fc;
  line-height: 1;
}
.status-completed {
  background: #2ea043;
}
.status-pending {
  background: #6e7681;
}
.tips-type-cell,
.tips-anonymous-cell {
  text-align: center !important;
}
.tips-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #8b949e;
  background: rgba(139, 148, 158, 0.12);
}
.tips-type-badge--support {
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
}
.tips-type-badge--anonymous {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.12);
}
.sort-link {
  color: #58a6ff;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}
.sort-link:hover,
.sort-link:focus-visible {
  text-decoration: underline;
  color: #79b8ff;
}
.sort-link.active {
  color: #f0f6fc;
}

/* ---- Sound Asset Modal & Grid ---- */

.asset-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  visibility: hidden;
  opacity: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  z-index: 11000;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.asset-modal.open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.asset-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 20, 0.88);
  backdrop-filter: blur(8px);
}
.asset-modal-panel {
  position: relative;
  width: min(100%, 1000px);
  max-width: calc(100% - 32px);
  max-height: 90vh;
  overflow: hidden;
  background: rgba(15, 20, 28, 0.96);
  border: 1px solid rgba(110, 118, 129, 0.22);
  border-radius: 18px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  z-index: 11001;
}
.asset-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(110, 118, 129, 0.16);
}
.asset-modal-body {
  padding: 24px;
  max-height: calc(90vh - 96px);
  overflow: auto;
}
.sound-asset-selection {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.asset-modal table .terminal-button {
  margin-right: 8px;
}
/* Compact play button for sound asset previews */
.play-button {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #30363d;
  background: #161b22;
  color: #c9d1d9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
}
.play-button:hover,
.play-button:focus {
  background: #21262d;
}
.play-button.playing {
  background: #0b3c18; /* dark green */
  border-color: #7ee787;
  color: #7ee787;
}
.asset-audio { display: none; }
/* Sound asset grid */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  contain: layout style paint;
}
.asset-card {
  position: relative;
  background: #0e1317;
  border: 1px solid rgba(48,54,61,0.6);
  border-radius: 10px;
  padding: 8px;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  contain: layout style;
}
.asset-card-top {
  display: block;
  position: relative;
  padding: 8px 8px 0 8px;
}
.asset-name {
  color: #e8ebed;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  z-index: 1;
}
.asset-actions {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 100ms ease-out, transform 100ms ease-out;
  z-index: 2;
  will-change: opacity, transform;
}
.asset-card:hover .asset-actions,
.asset-card:focus-within .asset-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.asset-actions .terminal-button.small {
  /* ensure buttons sit nicely when centered and don't cause layout shift */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.asset-card:hover .asset-actions,
.asset-card:focus-within .asset-actions {
  opacity: 1;
  transform: translateY(0);
}
.asset-card-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}
.asset-play-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid #30363d;
  background: #161b22;
  color: #c9d1d9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
  transition: background-color 100ms ease-out, color 100ms ease-out;
  will-change: background-color;
}
.asset-play-icon:hover,
.asset-play-icon:focus {
  background-color: #21262d;
}
.asset-play-icon.playing {
  background-color: #165a2b;
  color: #7ee787;
  border-color: #1f4f2a;
}
.asset-card-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6px;
  position: relative;
}
.asset-group {
  color: #8b949e;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-linked-status {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b949e;
  text-decoration: none;
}
.asset-linked-status img {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) invert(70%) sepia(3%) saturate(8%) hue-rotate(170deg) brightness(95%) contrast(90%);
}
.asset-linked-status.linked img {
  filter: brightness(0) invert(42%) sepia(82%) saturate(520%) hue-rotate(96deg) brightness(95%) contrast(95%);
}
.asset-linked-status.unlinked img {
  filter: brightness(0) invert(70%) sepia(3%) saturate(8%) hue-rotate(170deg) brightness(95%) contrast(90%);
}
.asset-linked-status:hover {
  opacity: 0.9;
}
.terminal-button.small { padding: 6px 8px; font-size: 0.85rem; border-radius: 8px; }
button[data-action="replay"] {
  transform: rotate(90deg);
}

/* ---- Notifications Feed ---- */

.notifications-page header {
  display: none;
}
.notifications-page main {
  margin: 0;
  padding: 0;
}
.notifications-page .terminal-panel {
  /* This page is embedded as a small "browser source" tab (e.g. inside
     the Stream Buddy Android app) just as often as viewed in a normal
     browser window, and can end up far narrower than any breakpoint
     below was written for — a flat 32px padding ate a large chunk of
     that width as pure margin. clamp() scales it down continuously
     instead of needing to guess a Stream Buddy-specific breakpoint. */
  max-width: none;
  width: 100%;
  margin: 0;
  border-radius: 0;
  padding: clamp(10px, 4vw, 32px);
}
.notifications-queue-controls {
  display: flex;
  gap: clamp(6px, 2vw, 10px);
  margin-bottom: clamp(12px, 4vw, 20px);
}
.queue-control-button {
  flex: 1;
  height: clamp(40px, 10vw, 52px);
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notifications-pending-review {
  display: grid;
  gap: clamp(8px, 3vw, 14px);
  margin-bottom: clamp(12px, 4vw, 20px);
  padding: clamp(10px, 3.5vw, 16px);
  border: 1px solid rgba(240, 136, 62, 0.4);
  border-radius: 14px;
  background: rgba(240, 136, 62, 0.06);
}
.notifications-pending-review-title {
  font-weight: 700;
  color: #f0883e;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.notification-item-pending {
  border-color: rgba(240, 136, 62, 0.35);
}
.notification-rejected-badge {
  margin-left: 0.5rem;
  color: #8b949e;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}
.notification-filtered-badge {
  margin-left: 0.5rem;
  color: #f0883e;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}
.notifications-feed {
  display: grid;
  gap: clamp(8px, 3vw, 14px);
}
.notification-item {
  border: 1px solid rgba(110, 118, 129, 0.16);
  background: rgba(14, 19, 26, 0.9);
  border-radius: 14px;
  padding: clamp(10px, 3.5vw, 16px);
}
.notification-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.notification-title {
  font-weight: 700;
  color: #f0f6fc;
}
.notification-amount {
  color: #8b949e;
  margin-right: 0.35rem;
  font-weight: 600;
}
.notification-meta-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.notification-time {
  color: #8b949e;
  font-size: 0.9rem;
  white-space: nowrap;
}
.notification-body {
  color: #c9d1d9;
  margin-bottom: 8px;
}

/* ---- Account Actions & Profile ---- */

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  align-items: center;
}
.account-actions form {
  margin: 0;
}

/* ---- Login page ---- */
.login-page main {
  /* Only this page centers its panel vertically — main's default
     flow-root/top-anchored layout (see the shared `main` rule above)
     stays untouched everywhere else. */
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-panel {
  text-align: center;
  /* .terminal-panel reserves 46px of top padding for overlapping folder
     tabs (dashboard-style pages) — this panel has none, so that space
     is just dead air above the heading. */
  padding-top: 32px;
}
.login-heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: #f0f6fc;
  margin: 0 0 20px;
}
.login-actions {
  /* Grid instead of the base .account-actions flex row — two explicit
     equal-fr columns guarantee both buttons render the same width
     (sized to whichever is naturally wider), which flex-grow alone
     can't promise once the panel itself is shrink-to-fit rather than a
     fixed width. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
}
.login-button {
  gap: 10px;
  font-weight: 700;
  width: 100%;
}
.login-button-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.login-button-icon--kick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.8rem;
  font-weight: 800;
}
.login-button--twitch,
.login-button--twitch:hover,
.login-button--twitch:focus {
  border-color: #9147ff;
  color: #9147ff;
  background: rgba(145, 71, 255, 0.12);
}
.login-button--twitch:hover,
.login-button--twitch:focus {
  background: rgba(145, 71, 255, 0.22);
}
.login-button--kick,
.login-button--kick:hover,
.login-button--kick:focus {
  border-color: #53fc18;
  color: #53fc18;
  background: rgba(83, 252, 24, 0.12);
}
.login-button--kick:hover,
.login-button--kick:focus {
  background: rgba(83, 252, 24, 0.22);
}

.profile-panel {
  padding: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.profile-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}
.profile-avatar-card {
  width: 120px;
  min-width: 120px;
  aspect-ratio: 1;
  border-radius: 28px;
  background: rgba(28, 33, 41, 0.9);
  border: 1px solid rgba(110, 118, 129, 0.24);
  display: grid;
  place-items: center;
}
.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(88, 166, 255, 0.25);
}
.profile-avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  font-weight: 700;
  color: #f0f6fc;
  background: rgba(88, 166, 255, 0.16);
}
.profile-summary {
  /* Grid items default to min-width: auto (their content's min-content
     size), which ignores word-wrap and forces .profile-header wider than
     the viewport on a long, unbroken display name. min-width: 0 lets it
     actually shrink so overflow-wrap below can do its job. */
  min-width: 0;
}
.profile-summary h1 {
  margin: 0;
  font-size: clamp(1.9rem, 2.5vw, 2.6rem);
  color: #f0f6fc;
  min-width: 0;
  overflow-wrap: break-word;
}
.profile-subtitle {
  margin: 8px 0 12px;
  color: #8b949e;
}
.profile-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.profile-card {
  background: rgba(14, 19, 26, 0.95);
  border: 1px solid rgba(110, 118, 129, 0.18);
  border-radius: 18px;
  padding: 22px;
}
.profile-card-wide {
  grid-column: 1 / -1;
}
.profile-card-title {
  margin: 0 0 16px;
  color: #8b949e;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}
.profile-details {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
}
.profile-details div {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.profile-details dt {
  color: #8b949e;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.profile-details dd {
  margin: 0;
  color: #e8ebed;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.profile-details-horizontal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.profile-details-horizontal div {
  min-width: 0;
}

/* ---- Footer ---- */

.site-footer {
  background: transparent;
  margin-top: 40px;
  padding: 0px 14px;
  text-align: right;
  color: #6e7681;
  font-size: 10px;
  flex-shrink: 0;
}
.site-footer a {
  color: #6e7681;
  text-decoration: none;
}
.site-footer a:hover {
  color: #8b949e;
  text-decoration: underline;
}
.site-footer-separator {
  margin: 0 8px;
}

/* ---- Background Decoration ---- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top left, rgba(56, 139, 253, 0.08), transparent 24%),
              radial-gradient(circle at bottom right, rgba(111, 66, 255, 0.08), transparent 24%);
}

/* ---- Image Lightbox ---- */

.image-lightbox {
  pointer-events: none;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 100ms ease-out, visibility 100ms ease-out;
  z-index: 1000;
  will-change: opacity, visibility;
}
.image-lightbox.open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
.image-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 20, 0.88);
  backdrop-filter: blur(8px);
}
.image-lightbox-img {
  position: relative;
  max-width: calc(100% - 48px);
  max-height: calc(100% - 48px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(32px) scale(0.95);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}
.image-lightbox.open .image-lightbox-img {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.terminal-article img,
.post-body img {
  cursor: auto;
}

/* ---- Responsive Overrides ---- */

@media (max-width: 880px) {
  /* 8 dashboard tabs with per-tab min-widths overflow the tab bar's
     max-width before the panel itself gets this narrow. */
  .dashboard-nav-tabs { overflow-x: auto; }
}
@media (max-width: 820px) {
  .profile-grid {
    /* plain 1fr (unlike the base rule's minmax(0, 1fr)) reintroduces
       grid's implicit min-width: auto, letting unbroken long text (e.g.
       an email in the description) blow the card wider than the
       viewport. */
    grid-template-columns: minmax(0, 1fr);
  }
  .profile-details-horizontal {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  main {
    margin: 24px auto;
    padding: 0 14px;
  }
  .terminal-panel {
    padding: 24px;
  }
}
@media (max-width: 480px) {
  /* compress the navbar so "tip | blog | View as user | <name> [avatar]"
     stays on one line like desktop instead of wrapping, even with the
     admin-only "View as user" toggle present. */
  header {
    padding: 0 6px;
    font-size: 0.72rem;
  }
  .header-left,
  .header-right {
    padding: 0 4px;
  }
  .header-separator {
    margin: 0 5px;
  }
  header a,
  .header-dropdown-toggle,
  .header-left a {
    padding: 0 4px;
    gap: 4px;
  }
  .header-avatar,
  .header-avatar-placeholder {
    height: 22px;
    max-width: 22px;
    max-height: 22px;
  }
  /* shrink the profile-page avatar so the name/badges/subscription text
     next to it (kept side-by-side, not stacked, at every width) has room
     to wrap without feeling cramped. */
  .profile-header {
    gap: 16px;
  }
  .profile-avatar-card {
    width: 72px;
    min-width: 72px;
    border-radius: 18px;
  }
  .profile-avatar,
  .profile-avatar-placeholder {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
  }
  .profile-summary h1 {
    font-size: 1.5rem;
  }
  .dashboard-summary {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  /* .tips-from-cell already ellipsis-truncates, so narrowing these
     columns doesn't lose information the way it would elsewhere. */
  .tips-col-from {
    width: 110px;
  }
  .tips-col-date {
    width: 100px;
  }
  /* the base rule's min-width: 138px + white-space: nowrap fought the
     narrower column above, squeezing the date into the message column;
     letting it wrap to two lines fits cleanly instead. */
  .tips-date-cell {
    min-width: 0;
    white-space: normal;
  }
}