/* ── Cloudscape (dark mode) design tokens ── */
:root {
  --bg-page:        #0f1b2a;
  --bg-container:   #161d26;
  --bg-header:      #000716;
  --bg-subtle:      #1b2734;
  --bg-row-hover:   #1f2c3a;
  --bg-input:       #161d26;
  --bg-tag:         #232f3e;

  --text-default:   #c6c6cd;
  --text-strong:    #e9ebed;
  --text-secondary: #b4b4bb;
  --text-muted:     #8c8c94;
  --text-onDark:    #ffffff;
  --text-link:      #42b4ff;
  --text-link-h:    #75cfff;

  --border-card:    #424650;
  --border-input:   #656871;
  --border-divider: #2a3441;
  --border-focus:   #42b4ff;

  --action-primary:   #42b4ff;
  --action-primary-h: #75cfff;
  --action-onPrimary: #000716;

  --status-info-bg:    #001129;
  --status-info-bd:    #42b4ff;
  --status-success-bg: #001401;
  --status-success-tx: #2bb534;
  --status-warning-bg: #191100;
  --status-warning-tx: #fbd332;
  --status-error-bg:   #1f0000;
  --status-error-tx:   #ff7a7a;

  --r-card: 16px;
  --r-input: 8px;
  --r-button: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--text-default);
  background: var(--bg-page);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body { display: flex; flex-direction: column; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-h); text-decoration: underline; }

.clear { clear: both; }
.hide { display: none; }

/* ── Top header ── */
.top-header {
  background: var(--bg-header);
  color: var(--text-onDark);
  height: 40px;
  display: flex;
  font-size: 14px;
  border-bottom: 1px solid #1a2332;
  flex-shrink: 0;
}
.top-header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
}
.top-header .brand {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-onDark);
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-right: 24px;
  text-decoration: none;
}
.top-header .brand:hover { text-decoration: none; color: var(--text-onDark); }
.top-header .brand .mark {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.top-header .brand .name { font-weight: 700; }
.top-header .brand .name span { font-weight: 400; opacity: 0.85; }

.top-header .util {
  margin-left: auto;
  display: flex; align-items: center; gap: 4px;
}
.top-header .util a, .top-header .util .link-btn {
  color: var(--text-onDark);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.top-header .util a:hover, .top-header .util .link-btn:hover {
  background: rgba(255,255,255,0.08);
  text-decoration: none;
  color: var(--text-onDark);
}
.top-header .util .sep { width: 1px; height: 18px; background: rgba(255,255,255,0.18); margin: 0 4px; }
/* Member quick links (My Pastes / My Media): link-blue so they read as clickable. */
.top-header .util a.util-link { color: var(--text-link); }
.top-header .util a.util-link:hover { color: var(--text-link-h); text-decoration: underline; }

/* ── App layout (sidenav + main) ── */
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  padding: 0 24px 24px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
}

/* Side navigation */
.sidenav {
  background: var(--bg-container);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
  padding: 20px 0;
  margin-top: 16px;
  margin-right: 16px;
  height: fit-content;
  position: sticky;
  top: 16px;
}
.sidenav-section {
  padding: 0 20px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-strong);
  margin-bottom: 8px;
  letter-spacing: -0.1px;
}
.sidenav ul { list-style: none; padding: 0; margin: 0 0 16px; }
.sidenav li a, .sidenav li .nav-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 20px;
  color: var(--text-link);
  font-size: 14px;
  font-family: inherit;
  border: none;
  border-left: 4px solid transparent;
  background: none;
  cursor: pointer;
}
.sidenav li a:hover, .sidenav li .nav-btn:hover {
  background: var(--bg-row-hover);
  text-decoration: none;
}
.sidenav li.active a,
.sidenav li.active .nav-btn {
  color: var(--text-strong);
  font-weight: 700;
  border-left-color: var(--action-primary);
  background: var(--bg-row-hover);
}
.sidenav li .nav-btn-danger { color: var(--status-error-tx); }
.sidenav li .nav-btn-danger:hover { background: rgba(255, 122, 122, 0.08); color: var(--status-error-tx); }
.sidenav hr {
  border: none;
  border-top: 1px solid var(--border-divider);
  margin: 8px 20px 12px;
}

/* Main content column */
.main { padding-top: 16px; min-width: 0; }

.page-head { margin: 4px 0 16px; }
.page-head h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.page-head .desc {
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ── Flashbar (info banner) ── */
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--status-info-bg);
  border-left: 4px solid var(--status-info-bd);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-strong);
  margin-bottom: 16px;
}
.flash.success { background: var(--status-success-bg); border-left-color: var(--status-success-tx); }
.flash.warning { background: var(--status-warning-bg); border-left-color: var(--status-warning-tx); }
.flash.error   { background: var(--status-error-bg);   border-left-color: var(--status-error-tx);   }
.flash .ico {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--action-primary);
  color: var(--action-onPrimary);
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.flash.success .ico { background: var(--status-success-tx); color: #001401; }
.flash.warning .ico { background: var(--status-warning-tx); color: #191100; }
.flash.error   .ico { background: var(--status-error-tx);   color: #1f0000; }
.flash .body strong { font-weight: 700; }

/* ── Container ── */
.container {
  background: var(--bg-container);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 16px;
}
.container .container-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-divider);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.container .container-head h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--text-strong);
}
.container .container-head .sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.container .container-body { padding: 20px; }
.container .container-body.flush { padding: 0; }
.container .container-foot {
  padding: 16px 20px;
  border-top: 1px solid var(--border-divider);
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-subtle);
  flex-wrap: wrap;
}
.container .container-foot .spacer { flex: 1; }

.container-narrow { max-width: 480px; margin: 24px auto 0; }

/* ── Form fields ── */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-strong);
  margin-bottom: 4px;
}
.field .label-optional { color: var(--text-secondary); font-weight: 400; }
.field .hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.input, .select, textarea.input {
  width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--border-input);
  border-radius: var(--r-input);
  background: var(--bg-input);
  color: var(--text-strong);
  font-family: inherit;
  font-size: 14px;
  line-height: 22px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder, textarea.input::placeholder {
  color: var(--text-muted);
}
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(66, 180, 255, 0.25);
}
.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23b4b4bb' d='M4 6l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 32px;
}

/* Password field with text-security dots */
.input.password-masked { -webkit-text-security: disc; }

/* Two-column layout inside form */
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) { .cols { grid-template-columns: 1fr; } }

/* ── Code editor textarea (paste content) ── */
.code-area {
  width: 100%;
  min-height: 300px;
  padding: 12px 14px;
  border: 1px solid var(--border-input);
  border-radius: var(--r-input);
  background: var(--bg-input);
  font-family: Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-strong);
  outline: none;
  resize: vertical;
  display: block;
}
.code-area:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(66, 180, 255, 0.25);
}
.code-area::placeholder { color: var(--text-muted); }

/* ── BBCode toolbar (attached above textarea) ── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--border-input);
  border-bottom: none;
  border-radius: var(--r-input) var(--r-input) 0 0;
  background: var(--bg-subtle);
  flex-wrap: wrap;
}
.toolbar + .code-area {
  border-top: none;
  border-radius: 0 0 var(--r-input) var(--r-input);
}
.tb-btn, .rte-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 26px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-strong);
  transition: background 0.1s, border-color 0.1s;
  user-select: none;
  position: relative;
}
.tb-btn:hover, .rte-menu:hover {
  background: var(--bg-container);
  border-color: var(--border-card);
}
.tb-btn b, .tb-btn i, .tb-btn u, .tb-btn s { font-size: 13px; }
.toolbar .div { width: 1px; height: 18px; background: var(--border-divider); margin: 0 4px; }

/* BBCode menu dropdowns */
.rte-menu-span {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--bg-container);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  padding: 8px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  display: none;
  min-width: 180px;
}
.rte-menu-span.show { display: block; }
.rte-menu-color { cursor: pointer; padding: 0; }
.rte-menu-color div {
  width: 18px; height: 18px;
  border: 1px solid var(--border-divider);
  margin: 1px;
  border-radius: 2px;
}
.rte-menu-color div:hover { border-color: var(--text-onDark); }
#rte-menu-colors table { border-collapse: collapse; }
.rte-menu-item {
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text-strong);
  border-radius: 4px;
}
.rte-menu-item:hover { background: var(--bg-row-hover); }

/* ── Buttons ── */
.btn, .btn-primary, .btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 20px;
  border-radius: var(--r-button);
  border: 2px solid var(--action-primary);
  background: var(--action-primary);
  color: var(--action-onPrimary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover, .btn-primary:hover, .btn-submit:hover {
  background: var(--action-primary-h);
  border-color: var(--action-primary-h);
  color: var(--action-onPrimary);
  text-decoration: none;
}
.btn.secondary {
  background: transparent;
  color: var(--action-primary);
}
.btn.secondary:hover {
  background: rgba(66, 180, 255, 0.1);
  color: var(--action-primary-h);
}
.btn.ghost {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--border-input);
}
.btn.ghost:hover {
  background: var(--bg-row-hover);
  color: var(--text-strong);
  border-color: var(--border-input);
}
.btn.danger, .btn-danger {
  background: transparent;
  color: var(--text-strong);
  border: 2px solid var(--border-input);
}
.btn.danger:hover, .btn-danger:hover {
  background: rgba(255, 122, 122, 0.08);
  color: var(--status-error-tx);
  border-color: var(--status-error-tx);
}
.btn.small, .btn-sm { height: 24px; padding: 0 14px; font-size: 13px; border-width: 2px; }

/* Meta delete (inline link-style button for view page) */
.meta-delete {
  background: none;
  border: none;
  color: var(--status-error-tx);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 0;
  text-decoration: underline;
}
.meta-delete:hover { color: #ff9999; }
.meta-edit {
  background: none;
  border: none;
  color: var(--link-color, #5ea9ff);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 0;
  text-decoration: underline;
  margin-right: 8px;
}
.meta-edit:hover { filter: brightness(1.2); }

/* ── Chips / badges ── */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--bg-tag);
  color: var(--text-secondary);
  font-weight: 600;
}
.chip.success { background: var(--status-success-bg); color: var(--status-success-tx); }
.chip.success::before { content: "●"; font-size: 8px; }
.chip.error { background: var(--status-error-bg); color: var(--status-error-tx); }
.chip.error::before { content: "●"; font-size: 8px; }
.banned { color: var(--status-error-tx); font-weight: 700; }

/* ── Tables ── */
.tbl-wrap { overflow: auto; }
table.tbl, table.paste-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.tbl th, table.tbl td,
table.paste-table th, table.paste-table td {
  text-align: left;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border-divider);
  vertical-align: middle;
  color: var(--text-strong);
}
table.tbl th, table.paste-table th {
  background: var(--bg-subtle);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-strong);
  white-space: nowrap;
}
table.tbl tbody tr:hover,
table.paste-table tbody tr:hover {
  background: var(--bg-row-hover);
}
table.tbl td a, table.paste-table td a { color: var(--text-link); }
.sort-link { color: var(--text-strong); text-decoration: none; }
.sort-link:hover { color: var(--action-primary); text-decoration: none; }
.sort-active { font-weight: 700; color: var(--action-primary); }

/* ── Pagination ── */
.pagination, .pager {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-divider);
  background: var(--bg-subtle);
  justify-content: center;
  font-size: 13px;
  flex-wrap: wrap;
}
.pagination .page-link, .pager a, .pager button {
  background: transparent; border: 1px solid transparent;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  display: inline-grid; place-items: center;
  border-radius: 4px; color: var(--text-strong); cursor: pointer; font: inherit;
  text-decoration: none;
}
.pagination .page-link:hover, .pager a:hover, .pager button:hover {
  background: var(--bg-row-hover);
  text-decoration: none;
}
.pagination .page-link.page-active,
.pager .active {
  border-color: var(--action-primary);
  color: var(--action-primary);
  font-weight: 700;
}
.pagination .page-link.disabled {
  color: var(--text-muted);
  cursor: default;
}
.pagination .page-link.disabled:hover { background: transparent; }
.page-ellipsis { color: var(--text-muted); padding: 0 4px; }

/* ── Stat cards (admin) ── */
.stat-row, .admin-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .stat-row, .admin-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .stat-row, .admin-stats { grid-template-columns: repeat(2, 1fr); } }
.stat-card, .stat-box {
  background: var(--bg-container);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
  padding: 16px 20px;
  text-align: left;
}
.stat-card .lbl, .stat-box {
  font-size: 13px; color: var(--text-secondary); font-weight: 600;
}
.stat-card .num, .stat-box strong {
  font-size: 28px; font-weight: 700; color: var(--text-strong);
  margin-top: 4px; letter-spacing: -0.4px; line-height: 1.1;
  display: block;
}

/* Search form */
.search-form {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.search-input {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid var(--border-input);
  border-radius: var(--r-input);
  background: var(--bg-input);
  color: var(--text-strong);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.search-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(66, 180, 255, 0.25);
}

/* User info card (admin user page) */
.user-info p { margin-bottom: 4px; color: var(--text-strong); }
.user-info form { margin-top: 10px; }

/* ── Paste view page ── */
.paste-meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.paste-meta strong { color: var(--text-strong); font-weight: 600; }
.meta-sep { color: var(--text-muted); margin: 0 4px; }

.paste-content {
  background: #17181a;
  color: var(--text-strong);
  padding: 16px 20px;
  border-top: 1px solid var(--border-divider);
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  min-height: 160px;
  overflow-y: auto;
  overflow-x: auto;
  outline: none;
}
.paste-content a { color: var(--text-link); }
.paste-content .code-block {
  background: var(--bg-subtle);
  border: 1px solid var(--border-divider);
  padding: 10px;
  margin: 8px 0;
  border-radius: 4px;
}
.paste-content .quote-block {
  border-left: 3px solid var(--status-success-tx);
  padding: 8px 12px;
  margin: 8px 0;
  background: var(--bg-subtle);
}
.paste-content .video-embed { margin: 10px 0; }
.paste-content .paste-img { max-width: 100%; height: auto; margin: 5px 0; }

/* ── Terms / prose containers ── */
.prose h2 { font-size: 20px; font-weight: 700; color: var(--text-strong); margin: 16px 0 8px; }
.prose h3 { font-size: 16px; font-weight: 700; color: var(--text-strong); margin: 14px 0 6px; }
.prose p, .prose li { color: var(--text-default); font-size: 14px; line-height: 1.6; margin-bottom: 10px; }
.prose ul, .prose ol { padding-left: 24px; margin-bottom: 10px; }
.prose hr { border: none; border-top: 1px solid var(--border-divider); margin: 20px 0; }
.prose a { color: var(--text-link); }
.prose strong { color: var(--text-strong); }
.prose .dmca-banner {
  border: 1px solid var(--status-error-tx);
  background: var(--status-error-bg);
  color: var(--status-error-tx);
  padding: 12px 16px;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 8px;
}
.prose .dmca-banner h2, .prose .dmca-banner a { color: var(--status-error-tx); margin: 0; }

/* ── Turnstile overlay ── */
.cf-turnstile { margin: 8px 0; }
#turnstile-overlay { display: none; }
.turnstile-backdrop {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,7,22,0.7); z-index: 9998;
}
.turnstile-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--bg-container);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 24px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  text-align: center;
  color: var(--text-strong);
}
.turnstile-modal p { color: var(--text-strong); margin-bottom: 12px; font-size: 14px; }
.turnstile-cancel {
  margin-top: 12px;
  background: transparent;
  border: 2px solid var(--border-input);
  padding: 4px 16px;
  border-radius: var(--r-button);
  cursor: pointer;
  color: var(--text-strong);
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
}
.turnstile-cancel:hover { background: var(--bg-row-hover); }

/* ── Our own modal (audio-keep prompt; replaces native confirm) ── */
.cc-modal-backdrop {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,7,22,0.7); z-index: 9998;
}
.cc-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(92vw, 380px);
  background: var(--bg-container);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 24px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  text-align: center;
  color: var(--text-strong);
}
.cc-modal-title { color: var(--text-strong); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.cc-modal-text { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin-bottom: 18px; }
.cc-modal-actions { display: flex; gap: 10px; justify-content: center; }
.cc-modal-actions .btn { flex: 1 1 0; }

/* ── App footer ── */
.app-footer {
  border-top: 1px solid var(--border-divider);
  background: var(--bg-header);
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.app-footer-inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.app-footer-inner .spacer { flex: 1; min-width: 16px; }
.app-footer a { color: var(--text-link); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; padding: 0 12px 12px; }
  .sidenav { display: none; }
  .top-header-inner { padding: 0 12px; }
  .app-footer-inner { padding: 14px 12px; }
}
@media (max-width: 600px) {
  .top-header-inner { padding: 0 12px; }
  .top-header .util a { padding: 6px 6px; font-size: 12px; }
  .container .container-head { flex-direction: column; align-items: flex-start; }
}

/* ── Media uploads (drop zone + view pages) ── */
.dropzone {
  border: 2px dashed var(--border-input);
  border-radius: var(--r-input);
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-subtle);
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus, .dropzone.drag {
  border-color: var(--border-focus);
  background: var(--bg-row-hover);
  outline: none;
}
.dz-label strong { color: var(--text-strong); display: block; margin-bottom: 4px; }
.dz-label span { color: var(--text-muted); font-size: 13px; }

#upload-list { margin-top: 12px; }
.up-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border-divider);
  border-radius: var(--r-input); margin-bottom: 8px; background: var(--bg-subtle);
}
.up-name { color: var(--text-strong); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-status { color: var(--text-muted); font-size: 13px; }
.up-status.up-ok { color: var(--status-success-tx); }
.up-status.up-ok a { word-break: break-all; }
.up-status.up-err { color: var(--status-error-tx); }
.up-bar { flex: 1 1 120px; height: 6px; background: var(--bg-tag); border-radius: 3px; overflow: hidden; }
.up-fill { height: 100%; width: 0%; background: var(--action-primary); transition: width .2s; }

/* Spinner shown while the browser scans a file (NSFW pre-filter) before upload.
   Larger videos take a few seconds here, so the motion signals work in progress. */
@keyframes up-spin { to { transform: rotate(360deg); } }
.up-spinner {
  flex: 0 0 auto; width: 16px; height: 16px;
  border: 2px solid var(--border-divider);
  border-top-color: var(--action-primary);
  border-radius: 50%;
  animation: up-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .up-spinner { animation-duration: 2s; } }

/* ── Dedicated fullwidth pages (/pastebig, /uploadbig). Extra specificity:
   .home-grid-single (max-width) and .paste-panel .code-area (min-height)
   appear later in this file and would win a plain single-class rule. ── */
.home-grid-single.big-grid { max-width: none; }
.big-grid .paste-panel .code-area { min-height: 380px; }
.big-grid .home-upload .sp-drop { min-height: 260px; }
.staged-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.staged-bar.hide { display: none; }
.staged-bar .spacer, .up-row .spacer { flex: 1; }
.staged-count { color: var(--text-secondary); font-size: 13px; }
.up-remove {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px;
  color: var(--text-muted); padding: 2px 6px;
}
.up-remove:hover { color: var(--status-error-tx); }

/* Combined skipped-files notice: informational, never blocks the upload. */
.up-notice {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--status-warning-bg);
  color: var(--status-warning-tx);
  border: 1px solid var(--status-warning-tx);
  border-radius: var(--r-input);
  padding: 10px 14px;
  margin: 12px 0 8px;
  font-size: 13px;
}
.up-notice-text { flex: 1; }
.up-notice-x {
  background: none; border: none; cursor: pointer;
  color: inherit; font-size: 16px; line-height: 1; padding: 0 2px;
}

.media-banner {
  background: var(--status-warning-bg);
  color: var(--status-warning-tx);
  border: 1px solid var(--status-warning-tx);
  border-radius: var(--r-input);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}
.media-body { text-align: center; }
.media-file {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-input);
  background: var(--bg-subtle);
}
.media-foot { margin-top: 12px; font-size: 13px; }
.media-report { color: var(--text-muted); }
.media-report:hover { color: var(--status-error-tx); }
.album-item { margin: 0 0 18px; }
.album-item-link {
  display: block; text-align: left; font-size: 13px;
  color: var(--text-muted); margin-bottom: 4px;
}

.dash-thumb {
  height: 40px; width: 40px; object-fit: cover;
  border-radius: 4px; background: var(--bg-subtle); display: inline-block;
}
.dash-thumb-empty {
  line-height: 40px; text-align: center; color: var(--text-muted); font-size: 16px;
}
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

/* ── Splash homepage (ControlC Splash design) ── */
@keyframes splashIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.sp-splash {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 28px; animation: splashIn 320ms ease-out;
}
.sp-hero { max-width: 620px; text-align: center; }
.sp-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: #6d829a;
}
.sp-headline { margin: 14px 0 12px; font-size: 40px; line-height: 1.1; font-weight: 700; color: #ffffff; letter-spacing: -0.02em; }
.sp-sub { margin: 0; font-size: 16px; line-height: 1.55; color: #93a4b4; }

.sp-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: 100%; max-width: 880px;
  margin-top: 52px; background: #1c2b37; border: 1px solid #1c2b37; border-radius: 16px; overflow: hidden;
}
.sp-cards-single { grid-template-columns: 1fr; max-width: 460px; }
.sp-card {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; cursor: pointer;
  min-height: 300px; padding: 34px 32px 30px; border: 0; background: #101d28; color: inherit;
  font-family: inherit; transition: background 160ms ease, box-shadow 160ms ease;
}
.sp-card:hover, .sp-card:focus-visible { background: #12222f; }
.sp-card-blue:hover, .sp-card-blue:focus-visible { box-shadow: inset 0 3px 0 0 #3b8fd8; }
.sp-card-green:hover, .sp-card-green:focus-visible { box-shadow: inset 0 3px 0 0 #7cc82f; }
.sp-card-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.sp-card-blue .sp-card-eyebrow, .sp-card-blue .sp-card-cta { color: #58a6ff; }
.sp-card-green .sp-card-eyebrow, .sp-card-green .sp-card-cta { color: #7cc82f; }
.sp-card-title { margin-top: 26px; font-size: 32px; font-weight: 700; color: #ffffff; letter-spacing: -0.025em; line-height: 1.1; }
.sp-card-desc { margin-top: 12px; font-size: 15px; line-height: 1.55; color: #90a2b2; max-width: 30ch; }
.sp-card-cta {
  margin-top: auto; padding-top: 18px; width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; border-top: 1px solid #1c2b37; font-size: 14px; font-weight: 700;
}
.sp-arrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; }

.sp-hint { margin-top: 30px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: #6d829a; }
.sp-hint-tight { margin-top: 20px; gap: 9px; }
.sp-hint-keys { display: flex; align-items: center; gap: 7px; }
.sp-kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; padding: 4px 8px;
  border-radius: 5px; background: #16242f; border: 1px solid #2c4152; color: #cfdae4;
}

.sp-task { flex: 1; padding: 6px 0 40px; }
.sp-crumbs { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #93a4b4; margin-bottom: 20px; }
.sp-crumb-sep { color: #3a4b5a; }
#crumb-here { color: #dfe7ee; }

.sp-task-grid { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 26px; align-items: start; }
.sp-aside { border: 1px solid #1c2b37; border-radius: 12px; background: #0e1a24; padding: 12px 0; overflow: hidden; }
.sp-aside-title { padding: 10px 20px; font-weight: 700; color: #ffffff; }
.sp-nav {
  display: block; width: 100%; text-align: left; padding: 10px 20px 10px 17px; font-size: 15px;
  font-family: inherit; cursor: pointer; background: transparent; border: 0;
  border-left: 3px solid transparent; color: #a9b8c6;
}
.sp-nav:hover { color: #ffffff; }
.sp-nav.active { background: #16242f; font-weight: 700; color: #ffffff; }
.sp-nav-blue.active { border-left-color: #3b8fd8; }
.sp-nav-green.active { border-left-color: #7cc82f; }
.sp-aside-div { height: 1px; background: #1c2b37; margin: 12px 0; }
.sp-aside-link { display: block; padding: 9px 20px; font-size: 14px; }
.sp-aside-btn { width: 100%; text-align: left; background: none; border: 0; font-family: inherit; cursor: pointer; color: var(--text-link); }
.sp-aside-btn:hover { color: var(--text-link-h); text-decoration: underline; }

.sp-panel { border: 1px solid #1c2b37; border-radius: 12px; background: #0e1a24; overflow: hidden; }
.sp-panel-head { padding: 32px 28px; border-bottom: 1px solid #1c2b37; }
.sp-panel-head h2 { margin: 0; font-size: 25px; line-height: 1.3; font-weight: 700; color: #ffffff; letter-spacing: -0.01em; }
.sp-panel-head p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #8fa1b1; }

/* Paste header and optional title field above the writing surface. */
.paste-head { display: flex; align-items: flex-start; }
.paste-head-main { min-width: 0; }
.paste-title-field { display: flex; flex-direction: column; gap: 7px; width: 300px; max-width: 100%; flex: 0 1 auto; }
.paste-title-field label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #8fa1b1;
}
.paste-title-field .label-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-muted); }
.paste-title-field .input { height: 40px; }
/* Narrow widths: let the title field drop under the heading and go full-width. */
@media (max-width: 620px) {
  .paste-title-field { width: 100%; }
}
.sp-panel-body { padding: 26px 28px 28px; }
.sp-panel-foot { display: flex; align-items: center; gap: 12px; padding: 18px 28px; background: #0c1721; border-top: 1px solid #1c2b37; }
.sp-submit {
  padding: 11px 26px; border-radius: 999px; border: 0; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 700; color: #06121b;
}
.sp-submit-blue { background: #3b8fd8; }
.sp-submit-blue:hover { background: #58a6ff; }

.sp-drop {
  width: 100%; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 64px 24px; border-radius: 10px;
  border: 1px dashed #2c4152; background: #171e26; transition: border-color 160ms ease, background 160ms ease;
}
.sp-drop:hover, .sp-drop:focus-visible, .sp-drop.drag { border-color: #4a7a33; background: #101f16; outline: none; }
.sp-drop-icon {
  width: 52px; height: 52px; border-radius: 13px; background: #182b1c; border: 1px solid #2c4a2b;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 20px; color: #7cc82f;
}
.sp-drop-title { margin-top: 18px; font-size: 18px; font-weight: 700; color: #ffffff; }
.sp-drop-sub { margin-top: 7px; font-size: 14px; color: #8fa1b1; }

/* Compact, aligned homepage headers and first fields. */
.home-grid .sp-panel-head { min-height: 70px; box-sizing: border-box; display: flex; padding: 14px 32px; }
.home-grid .sp-panel-head:not(.paste-head) { align-items: center; justify-content: space-between; gap: 24px; }
.home-grid .sp-panel-head h2 { flex: none; }
.home-grid .sp-panel-head p { margin: 0; }
.home-grid .paste-head { align-items: center; padding-right: 18px; }
.home-grid .paste-head-main { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.home-grid .paste-head-main p { margin-top: 20px; text-align: right; }
@media (min-width: 1401px) {
  .home-grid .home-upload .sp-panel-head p { margin-top: 20px; }
}

/* Paste panel fills the grid row (matching the upload panel's height) with the
   editor growing to fill the space. */
.paste-panel { display: flex; flex-direction: column; }
.paste-panel form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.paste-panel .sp-panel-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.paste-panel .field-content { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 0; }
.paste-panel .code-area { flex: 1 1 auto; min-height: 220px; }

/* Match the upload card: open header, inset writing surface, separate footer. */
.paste-panel { border-radius: 14px; background: #0e1a24; }
.paste-panel .sp-panel-body { gap: 18px; padding: 26px 28px 30px; }
.paste-panel .paste-title-field { width: 100%; }
.paste-panel .field-content {
  border: 1px dashed #2c4152; border-radius: 12px; background: #171e26;
}
.paste-panel .field-content:focus-within { border-color: #4a7a33; }
.paste-panel .toolbar {
  padding: 12px 14px; border: 0; border-bottom: 1px solid #263440;
  border-radius: 12px 12px 0 0; background: transparent;
}
.paste-panel .code-area {
  min-height: 320px; padding: 22px; border: 0; border-radius: 0;
  background: transparent; font-size: 14px; line-height: 1.7;
}
.paste-panel .code-area:focus { box-shadow: none; }
.paste-editor-status {
  display: flex; flex: none; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 8px 20px; padding: 17px 22px; border-top: 1px solid #2b3742;
  border-radius: 0 0 12px 12px; background: #131b23; color: #9cb0c1; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
#paste-limits { margin-left: auto; text-align: right; }
#paste-current-size.over-limit { color: #ff9b9b; }
.paste-panel .paste-foot { padding: 16px 28px 20px; }
.paste-panel .paste-foot .input, .paste-panel .paste-foot .select {
  border-radius: 9px; background-color: #171e26;
}
@media (max-width: 640px) {
  .sp-panel-head { padding: 24px 18px; }
  .paste-panel .sp-panel-body { padding: 20px 18px; }
  .paste-panel .paste-foot { padding: 20px 18px; }
  .paste-panel .code-area { min-height: 280px; padding: 16px; }
}

/* Password + Self Destruct sit in the footer beside the submit button. */
.paste-foot { align-items: flex-end; flex-wrap: wrap; }
.paste-foot .foot-field { display: flex; flex-direction: column; gap: 6px; }
.paste-foot .foot-field label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #8fa1b1; }
.paste-foot .foot-field-pw { flex: 1 1 240px; min-width: 150px; }
.paste-foot .foot-field-sd { flex: 0 0 190px; }
.paste-foot .foot-field .input, .paste-foot .foot-field .select { height: 40px; }
.paste-foot .foot-spacer { flex: 1 1 8px; }
@media (max-width: 640px) {
  .paste-foot .foot-field-pw, .paste-foot .foot-field-sd { flex: 1 1 100%; }
  .paste-foot .sp-submit { width: 100%; }
}

.sp-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 15, 22, 0.86); backdrop-filter: blur(2px); pointer-events: none;
}
.sp-overlay-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 60px 72px; border-radius: 18px; border: 2px dashed #7cc82f; background: #0f1d16;
}
.sp-overlay-title { margin-top: 20px; font-size: 26px; font-weight: 700; color: #ffffff; letter-spacing: -0.02em; }
.sp-overlay-sub { margin-top: 8px; font-size: 14px; color: #90a2b2; }

@media (max-width: 860px) {
  .sp-cards { grid-template-columns: 1fr; }
  .sp-task-grid { grid-template-columns: 1fr; }
  .sp-headline { font-size: 32px; }
  .sp-card { min-height: 0; }
}

/* .hide must beat the display set by these flex containers (cascade order). */
.sp-splash.hide, .sp-overlay.hide, .sp-task.hide { display: none; }

.up-note { color: var(--text-muted); font-weight: 400; font-size: 12px; }

/* ── User dropdown menu (header) ── */
.user-menu { position: relative; display: inline-block; }
.user-menu-btn {
  background: none; border: 0; cursor: pointer; font-family: inherit; font-size: inherit;
  color: var(--text-link); padding: 4px 2px;
}
.user-menu-btn:hover { color: var(--text-link-h); }
.user-menu-btn .caret { font-size: 11px; color: var(--text-muted); }
.user-menu-panel {
  display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 150;
  min-width: 220px; background: #0e1a24; border: 1px solid #1c2b37; border-radius: 12px;
  padding: 8px 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); text-align: left;
}
.user-menu-panel.show { display: block; }
.um-section {
  padding: 9px 18px 5px; font-weight: 700; color: var(--text-strong); font-size: 13px;
}
.user-menu-panel a, .um-btn {
  display: block; width: 100%; text-align: left; padding: 7px 18px; font-size: 14px;
  color: var(--text-link); background: none; border: 0; cursor: pointer; font-family: inherit;
}
.user-menu-panel a:hover, .um-btn:hover { background: #16242f; color: var(--text-link-h); text-decoration: none; }
.user-menu-panel form { margin: 0; }
.um-div { height: 1px; background: #1c2b37; margin: 8px 0; }
.um-danger { color: var(--status-error-tx); }
.um-danger:hover { color: var(--status-error-tx); }

.media-meta { margin-left: auto; text-align: right; font-size: 13px; color: var(--text-muted); line-height: 1.7; white-space: nowrap; }
.media-meta span { color: var(--text-default); }

.media-meta-left { margin-left: 0; margin-right: auto; text-align: left; }

.media-meta b { color: var(--text-default); font-weight: 600; }

.mm-gap { display: inline-block; width: 16px; }

/* Dropdown items must outrank .top-header .util a header-link styling. */
.top-header .util .user-menu-panel a, .top-header .util .user-menu-panel .um-btn {
  display: block; width: 100%; text-align: left; padding: 7px 18px;
  font-size: 14px; font-weight: 400; color: var(--text-link);
  background: none; border: 0; border-radius: 0; cursor: pointer; font-family: inherit;
}
.top-header .util .user-menu-panel a:hover, .top-header .util .user-menu-panel .um-btn:hover {
  background: #16242f; color: var(--text-link-h); text-decoration: none;
}
.user-menu-panel .um-section {
  padding: 10px 18px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}

/* ── Combined homepage: upload (35%) beside the paste editor (65%) ── */
.home-grid { display: grid; grid-template-columns: 35fr 65fr; gap: 24px; align-items: stretch; margin-top: 6px; }
.home-grid-single { grid-template-columns: 1fr; max-width: 980px; margin-left: auto; margin-right: auto; }
/* Share header, content and footer rows so wrapping text cannot offset the
   shortcut and title fields in the two-column layout. */
@media (min-width: 901px) {
  .home-grid:not(.home-grid-single) { grid-template-rows: auto 1fr auto; }
  .home-grid:not(.home-grid-single) > .sp-panel {
    display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  }
  .home-grid:not(.home-grid-single) > .paste-panel > form { display: contents; }
}
.home-upload { display: flex; flex-direction: column; border-radius: 14px; }
.home-upload .sp-panel-body { display: flex; flex-direction: column; flex: 1; padding-bottom: 30px; }
.home-grid .sp-panel-body { padding-top: 10px; }
@media (max-width: 1400px) {
  .home-grid .sp-panel-head:not(.paste-head), .home-grid .paste-head-main { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
  .home-grid .paste-head-main p { margin-top: 0; text-align: left; }
}
@media (max-width: 640px) {
  .home-grid .sp-panel-head { padding: 18px; }
  .home-grid .sp-panel-body { padding-left: 18px; padding-right: 18px; }
}
.home-upload #upload-list:empty { display: none; }
.media-clipboard-hint { margin-bottom: 18px; flex: none; }
.media-clipboard-label { margin-bottom: 7px; color: #8fa1b1; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.media-clipboard-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 12px; border: 1px solid var(--border-input); border-radius: 9px; background: #171e26; color: var(--text-strong); font-size: 13px; }
.media-clipboard-row svg { flex: none; color: #8fa1b1; }
.media-clipboard-keys { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.media-clipboard-keys kbd { padding: 2px 6px; border: 1px solid #354452; border-radius: 5px; background: #1c2630; font: inherit; line-height: 18px; }
@media (max-width: 1250px) { .media-clipboard-row { gap: 7px; flex-wrap: wrap; } }
.home-upload .sp-drop { min-height: 480px; flex: 1; }
.media-footer { margin-top: auto; padding: 16px 28px 20px; }
.media-footer .input, .media-footer .select { border-radius: 9px; background-color: #171e26; }
@media (max-width: 900px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-upload .sp-drop { min-height: 220px; padding: 40px 20px; }
}

.media-expiry-option { display: flex; flex-direction: column; gap: 6px; align-items: stretch; margin: 0; font-size: 12px; }
@media (max-width: 640px) {
  .media-footer { padding: 20px 18px; }
  .home-upload .sp-panel-body { padding-bottom: 20px; }
}

/* Clean upload design. Keep the outer height aligned with the paste editor. */
.home-upload .sp-drop { padding: 0; overflow: hidden; border-radius: 16px; }
.sp-drop-content { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 38px 22px; }
.sp-drop-content .sp-drop-icon { width: 66px; height: 66px; border-radius: 50%; font-size: 28px; }
.sp-drop-content .sp-drop-title { margin-top: 23px; font-size: 25px; line-height: 1.18; letter-spacing: -.6px; }
.sp-drop-content .sp-drop-sub { margin-top: 11px; font-size: 15px; color: #9cb0c1; }
.sp-drop-choose { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; padding: 14px 24px; border: 0; border-radius: 8px; background: #78ce19; color: #10200b; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.sp-drop-choose:hover { background: #8dde31; }
.sp-drop-choose:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.sp-drop-formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 25px; }
.sp-drop-formats span { padding: 5px 10px; border: 1px solid #34434e; border-radius: 5px; color: #b6c4d0; font-size: 12px; line-height: 1.4; }
.sp-drop-footer { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 17px 22px; border-top: 1px solid #2b3742; background: #131b23; color: #9cb0c1; font-size: 12px; }
@media (max-width: 900px) { .home-upload .sp-drop { padding: 0; } }

.media-footer { gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.media-password-field { flex: 1 1 200px; min-width: 0; }
.media-password-field input { width: 100%; }

.media-add-session { margin-top: 20px; }
.media-add-session p { margin: 0 0 14px; color: #bac8d4; }
.media-add-button { display: inline-block; cursor: pointer; padding: 10px 18px; border: 1px solid #526d83; border-radius: 6px; }
.media-add-button:hover, .media-add-button:focus-visible { background: #294559; outline: 2px solid #6daedb; }
.album-item .container-foot { padding: 8px 12px; }