@font-face {
  font-family: "Press Start 2P";
  src: url("/assets/PressStart2P-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Minecraft";
  src: url("/assets/Minecraft.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Creepster";
  src: url("/assets/Creepster-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Eater";
  src: url("/assets/Eater-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/assets/Nunito-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: "Gummy Bear";
  src: url("/assets/GummyBear.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --blue: #17699a;
  --blue-dark: #08466d;
  --blue-light: #3189b8;
  --line: #a3e9ff;
  --text: #f4fcff;
  --muted: #c0e7f4;
  --pink: #ff168e;
  --gold: #c59a28;
  --ink: #061927;
  font-family: "Courier New", monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #167393; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background-color: #0b5279;
  background-image:
    linear-gradient(#ddfaff2d 1px, transparent 1px),
    linear-gradient(90deg, #ddfaff2d 1px, transparent 1px),
    linear-gradient(#e0faff0d 1px, transparent 1px),
    linear-gradient(90deg, #e0faff0d 1px, transparent 1px),
    linear-gradient(180deg, #54bdd1ad 0%, #2585a8bb 43%, #075078e8 100%);
  background-size: 20px 20px, 20px 20px, 4px 4px, 4px 4px, 100% 100%;
  background-attachment: fixed;
  font-size: 15px;
  line-height: 1.6;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; cursor: pointer; }
a { color: #fff; }
.atmosphere { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; will-change: contents; }
.site { position: relative; z-index: 1; width: min(100% - 32px, 1155px); margin: 5px auto 34px; }
.frame {
  border: 2px solid var(--line);
  background: linear-gradient(130deg, #2d7fa9ed, #145681f5);
  box-shadow: 0 0 0 2px #073958, 0 5px 18px #001d3270, inset 0 0 16px #9be3ff19;
}
.top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px 10px;
  padding: 8px; margin-bottom: 14px;
}
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  min-width: 0; color: white; font: 400 15px "Press Start 2P", "Courier New", monospace;
  letter-spacing: -.8px; text-shadow: 1px 1px #c5f1ff, 2px 2px #073d60;
}
.brand-icon { display: block; width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; animation: logo-wink 5s steps(2, end) infinite; }
.account-slot { display: flex; align-items: center; gap: 7px; }
.account-name { color: #ffeb5d; font-size: 12px; }
.account-avatar { width: 28px; height: 28px; }
.avatar-fallback { display: grid; place-items: center; line-height: 1; background: #104d74; }
.avatar-bubble { display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--avatar-tint) 70%, white); border-radius: 50%; padding: 2px; background: radial-gradient(circle at 30% 24%, #ffffffd9 0 4%, color-mix(in srgb, var(--avatar-tint) 72%, transparent) 28%, color-mix(in srgb, var(--avatar-tint) 24%, #073e62) 100%); box-shadow: 0 0 8px color-mix(in srgb, var(--avatar-tint) 52%, transparent), inset 1px 1px 4px #ffffff75; }
.avatar-photo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-bubble .avatar-fallback { width: 100%; height: 100%; border-radius: 50%; background: transparent; font-size: 22px; }
.account-avatar .avatar-fallback { font-size: 16px; }
.profile-head .avatar .avatar-fallback { font-size: 46px; }
.notification-button { position: relative; min-width: 32px; padding: 3px 6px; }
.notification-icon { display: block; width: 17px; height: 17px; object-fit: contain; image-rendering: pixelated; }
.notification-count { position: absolute; top: -7px; right: -7px; min-width: 16px; height: 16px; padding: 1px 3px; border: 1px solid white; border-radius: 50%; background: #ec2684; color: white; font: 8px "Press Start 2P", monospace; line-height: 12px; text-align: center; }
.nav-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.nav-button {
  min-height: 42px; border: 2px solid #c2efff; padding: 7px 9px; text-align: center;
  background: #08669a; color: white; text-decoration: none;
  font: 400 9px "Press Start 2P", "Courier New", monospace; letter-spacing: 0; line-height: 1.8;
  text-transform: uppercase;
  text-shadow: 1px 1px #164969; box-shadow: inset 0 0 0 1px #ffffff25;
  transition: filter .14s, transform .14s, box-shadow .18s;
  animation: ds-button-breathe 3.8s ease-in-out infinite;
  will-change: filter;
}
.nav-button:hover, .button:hover { filter: brightness(1.2); transform: translateY(-2px) scale(1.01); box-shadow: 0 0 12px #bdf2ff74; }
.nav-button:nth-child(2) { animation-delay: -.8s; }
.nav-button:nth-child(3) { animation-delay: -1.6s; }
.nav-button:nth-child(4) { animation-delay: -2.4s; }
.nav-projects.active { background: #1684b5; }
.nav-me.active { background: #b48b28; }
.nav-social.active { background: #155384; }
.nav-news.active { background: #ed47a6; }
.nav-treenerume {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  border: 2px solid #ffffff;
  color: #ffffff;
  text-shadow: 0 0 4px #ffffff, 1px 1px #333333;
  box-shadow: inset 0 0 0 1px #ffffff40, 0 0 8px rgba(255, 255, 255, 0.25);
  animation-delay: -3.2s;
}
.nav-treenerume:hover {
  background: #0d0d0d;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.8), inset 0 0 6px #ffffff60;
  border-color: #ffffff;
}
.nav-tamarume {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #022338 0%, #064e6e 40%, #088395 70%, #05445e 100%);
  background-size: 260% 260%;
  border: 2px solid #48cae4;
  color: #e0faff;
  text-shadow: 0 0 5px #00f0ff, 1px 1px #011624;
  box-shadow: inset 0 0 8px rgba(0, 240, 255, 0.35), 0 0 8px rgba(72, 202, 228, 0.35);
  animation: tamarume-wave 5s ease-in-out infinite, ds-button-breathe 3.8s ease-in-out infinite;
  animation-delay: 0s, -3.5s;
}
.nav-tamarume:hover {
  background: linear-gradient(135deg, #033756 0%, #0a6994 40%, #0ab3ca 70%, #08587a 100%);
  background-size: 260% 260%;
  box-shadow: 0 0 16px #48cae4, inset 0 0 10px rgba(0, 240, 255, 0.6);
  border-color: #90e0ef;
  color: #ffffff;
}
@keyframes tamarume-wave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.ticker {
  overflow: hidden; height: 24px; margin-bottom: 16px; padding: 4px 6px;
  border: 1px solid #4995bc; background: #063c5cae; color: #b6e9fc; font: 8px "Press Start 2P", "Courier New", monospace;
}
.view { min-height: 560px; padding: 15px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 15px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .pixel {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 1px 1px #eafaff24;
  text-transform: uppercase;
}
h1 { margin-bottom: 0; font-size: 12px; }
h2 { font-size: 9px; line-height: 1.8; }
h3 { font-size: 8px; line-height: 1.8; }
.section-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 18px; }
.field, .select, .textarea {
  width: 100%; border: 1px solid #a5e5fa; border-radius: 0; padding: 9px 10px;
  outline: none; color: white; background: #073e62;
}
.field:focus, .select:focus, .textarea:focus { border-color: #ffeb5d; box-shadow: 0 0 0 2px #ffeb5d40; }
.field::placeholder, .textarea::placeholder { color: #c2ddea; }
.textarea { resize: vertical; min-height: 90px; }
.search { width: min(100%, 260px); }
.button {
  display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  min-height: 32px; padding: 6px 10px; border: 1px solid #c6f1ff; border-radius: 0;
  background: #07547d; color: white; text-decoration: none; font-size: 12px;
  font-family: "Press Start 2P", "Courier New", monospace; font-size: 8px;
  font-weight: 400; letter-spacing: 0; line-height: 1.8; text-transform: uppercase;
  transition: filter .14s, transform .14s, box-shadow .18s;
}
.button.primary { background: #176d9b; }
.button.gold { background: #977322; }
.gold { color: #ffdc37; }
.button.pink { background: #b30e70; }
.button.danger { background: #8c2938; }
.button.moderation-delete { border-color: #fff09a; background: #a87812; color: #fff4b3; box-shadow: inset 0 0 0 1px #fff09a44; }
.button.moderation-delete:hover { background: #c48b16; box-shadow: 0 0 9px #ffe45c99; }
.button.small { min-height: 25px; padding: 3px 7px; font-size: 11px; }
.button:disabled { opacity: .55; cursor: wait; }
.icon-button { width: 30px; min-width: 30px; padding: 5px; }
.icon-button svg { display: block; width: 15px; height: 15px; }
.install-app-button { display: none; }
.project-layout { display: grid; grid-template-columns: minmax(250px, 32%) minmax(0, 1fr); gap: 16px; align-items: start; }
.project-sidebar { min-width: 0; padding-top: 10px; }
.project-sidebar h2 { color: #ffdc37; font-size: 12px; }
.project-shortcut { display: flex; align-items: center; gap: 8px; overflow: hidden; width: 100%; margin: 6px 0; border: 0; padding: 4px 6px; background: transparent; color: #ffdf42; text-align: left; font-size: 12px; text-transform: uppercase; cursor: pointer; border-radius: 4px; transition: transform .15s ease, color .15s ease, background-color .15s ease; }
.project-shortcut:hover { color: white; text-shadow: 0 0 8px #fff9; transform: translateX(3px); background: rgba(88, 201, 239, 0.08); }
.project-shortcut:hover .project-shortcut-cover { opacity: 0.85; border-color: #ffdf42; }
.project-shortcut-cover { width: 34px; height: 26px; flex: none; object-fit: cover; border-radius: 2px; border: 1px solid #58c9ef; opacity: 0.55; box-shadow: 0 0 4px rgba(88, 201, 239, 0.25); background: #041c2c; }
.project-shortcut-cover.is-placeholder { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #58c9ef; border-style: dashed; }
.project-shortcut-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-results { min-width: 0; }
.public-heading { margin-top: 16px; color: #d6f5ff; font-size: 11px; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.project-card, .card {
  min-width: 0; overflow: hidden; border: 1px solid #a7e6ff; background: #155b89df;
  box-shadow: 2px 3px #083856; padding: 13px;
}
.project-card {
  min-height: 160px; display: flex; flex-direction: column; padding: 12px;
  border-radius: var(--theme-radius, 0);
  background: var(--theme-card-background, #155b89df);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.project-card:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 3px 6px #063653, 0 0 14px #9be3ff35; }
.project-cover { width: 100%; max-height: 120px; object-fit: cover; border: 1px solid #9dddf7; margin: -2px 0 9px; }
.project-title { color: white; margin: 0 0 7px; font-size: 9px; line-height: 1.8; overflow-wrap: anywhere; }
.project-title-link { width: 100%; border: 0; padding: 0; background: transparent; color: white; text-align: left; font-weight: 900; letter-spacing: .15px; text-transform: uppercase; }
.project-title-link:hover { color: #ffeb5d; }
.project-card-logo {
  display: block; max-width: 100%; max-height: 38px; width: auto; height: auto;
  object-fit: contain; margin: 0 auto; background: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.project-title-link.has-logo {
  display: block; width: 100%; min-width: 0; max-width: 100%; padding: 0;
  text-align: left; background: transparent; overflow: hidden;
}
.project-title-link.has-logo .project-card-logo { margin: 0 0 6px 0; max-width: 100%; }
.project-title.has-logo {
  display: block; width: 100%; min-width: 0; max-width: 100%; padding: 0;
  min-height: auto; background: transparent; border: 0; box-shadow: none;
}
.project-title.has-logo:hover {
  background: transparent; border-color: transparent;
}
.project-description { margin: 0 0 9px; color: #e3f5ff; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.project-description:empty { display: none; }
.project-card .project-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.5;
  max-height: 4.5em;
  margin: 0 0 9px;
  overflow-wrap: anywhere;
  word-break: break-word;
  cursor: pointer;
  transition: color .15s ease;
}
.project-card .project-description:hover { color: #ffffff; }
.project-card .project-cover {
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.project-card .project-cover:hover {
  filter: brightness(1.08);
}
.project-meta { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 10px; }
.project-meta .toolbar { margin: 0; gap: 6px; }
.like-action { border: 0; padding: 3px 2px; background: transparent; color: var(--pink); font-weight: 700; transition: transform .15s, text-shadow .15s; }
.like-action:hover { transform: scale(1.16); text-shadow: 0 0 8px #ff168ebd; }
.project-engagement { display: flex; align-items: center; gap: 6px; padding: 5px 0; }
.project-comments { margin-top: 14px; }
.project-comment { padding: 9px; }
.project-comment .post { color: var(--theme-comment-color, inherit); }
.project-comment .post-head { margin-bottom: 5px; }
.project-comment .avatar { width: 26px; height: 26px; }
.project-comment.is-pinned { border-color: #ffeb5d; box-shadow: inset 3px 0 #ffeb5d, 2px 3px #083856; }
.comment-pin-label { margin-bottom: 8px; color: #ffeb5d; font: 7px "Press Start 2P", monospace; }
.comment-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.comment-owner-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.comment-owner-like { color: #ff86c8; font: 7px "Press Start 2P", monospace; }
.comment-signature { display: grid; justify-items: start; gap: 5px; width: min(100%, 360px); margin: 7px 0 4px auto; border-top: max(1px, calc(var(--signature-width, 4) * .4px)) solid color-mix(in srgb, var(--signature-color, #ffeb5d) 58%, transparent); padding: 7px 4px 0; }
.comment-signature > span { color: var(--signature-color, #ffeb5d); font: 6px "Press Start 2P", monospace; text-transform: uppercase; }
.comment-signature img { display: block; width: min(100%, 310px); height: 58px; object-fit: contain; object-position: right center; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--signature-color, #ffeb5d) 60%, transparent)); }
.project-viewer { display: grid; gap: 14px; padding: 12px; border: 1px solid #a7e6ff; border-radius: var(--theme-radius, 0); background: var(--theme-background, #104b73); }
.project-viewer .card { border-radius: var(--theme-radius, 0); background: var(--theme-card-background, #155b89df); }
.project-viewer .field, .project-viewer .select, .project-viewer .textarea { border-radius: var(--theme-radius, 0); background: var(--theme-background, #073e62); }
.project-viewer .button:not(.gold):not(.pink):not(.danger):not(.moderation-delete) { border-radius: var(--theme-radius, 0); background: var(--theme-card-background, #07547d); }
.project-viewer-cover { width: 100%; max-height: 300px; object-fit: contain; border: 1px solid #a7e6ff; border-radius: var(--theme-radius, 0); background: var(--theme-card-background, #073e62); }
.project-actions { justify-content: flex-end; margin: 0; }
.project-block-list { display: grid; gap: 12px; }
.project-viewer .project-block { border-radius: var(--theme-radius, 0); background: linear-gradient(135deg, var(--block-background-start, #1b6694), var(--block-background-end, #104b73)); }
.project-block-content { min-width: 0; overflow-wrap: anywhere; }
.project-block-content img, .project-block-content video { display: block; max-width: 100%; max-height: 65vh; margin: 0 auto; object-fit: contain; }
.project-block-content audio { width: 100%; }
.project-block-text { color: var(--block-text-color, #fff); white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--block-line-height, 1.8); }
.project-block-caption {
  margin: 10px 0 0;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: var(--block-line-height, 1.8);
}
.project-viewer .project-block.project-block-spacer {
  background: transparent !important;
  border: 1px dashed transparent;
  box-shadow: none !important;
  padding: 0;
  min-height: 0;
  position: relative;
  transition: border-color .15s;
}
.project-viewer .project-block.project-block-spacer.is-owner:hover,
.project-viewer .project-block.project-block-spacer.is-owner:focus-within {
  border-color: #a7e6ff55;
}
.project-block-spacer-inner {
  display: block;
  width: 100%;
}
.project-block.project-block-spacer .project-block-controls {
  border-top: none;
  padding-top: 0;
  opacity: 0.35;
  transition: opacity .15s;
}
.project-block.project-block-spacer:hover .project-block-controls,
.project-block.project-block-spacer:focus-within .project-block-controls {
  opacity: 1;
}
.project-viewer .project-link { display: inline-block; overflow-wrap: anywhere; border-radius: var(--theme-radius, 0); padding: 10px 12px; border: 1px solid #a7e6ff; background: var(--theme-card-background, #073e62); color: #ffeb5d; }
.project-block-controls { display: flex; justify-content: flex-end; gap: 5px; border-top: 1px solid #a7e6ff4d; padding-top: 8px; }
.project-empty { min-height: 110px; font: 9px "Press Start 2P", monospace; text-align: center; }
.project-viewer .project-editor { display: grid; gap: 10px; border-color: #ffeb5d; border-radius: var(--theme-radius, 0); background: var(--theme-card-background, #0c496e); }
.project-editor h3 { margin: 0; color: #ffeb5d; }
.block-colors-toggle { width: fit-content; }
.block-color-line { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid #a7e6ff70; border-radius: var(--theme-radius, 0); padding: 8px 10px; background: var(--theme-background, #073e62); }
.block-color-line label { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; color: #e8f8ff; font-size: 11px; }
.block-color-line .theme-color-input { width: 44px; height: 44px; }
.block-color-preview { display: block; width: 100%; height: 12px; border: 1px solid #e1f8ff; background: linear-gradient(90deg, #155b89, #3189b8); }
.block-type-picker { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.block-type-button { display: grid; place-items: center; gap: 6px; min-height: 68px; border: 1px solid #a7e6ff; padding: 8px 5px; background: #073e62; color: #e8f8ff; font: 8px "Press Start 2P", monospace; text-transform: uppercase; transition: transform .15s, background-color .15s, box-shadow .15s; }
.project-viewer .block-type-button { border-radius: var(--theme-radius, 0); background: var(--theme-background, #073e62); }
.block-type-button svg { width: 24px; height: 24px; }
.block-type-button:hover, .block-type-button:focus-visible { transform: translateY(-2px); border-color: #ffeb5d; background: #176d9b; box-shadow: 0 0 10px #a7e6ff55; outline: none; }
.color-field { width: 65px; min-height: 38px; padding: 3px; }
.line-height-field { width: 65px; min-height: 38px; padding: 3px 6px; text-align: center; font: 700 13px "Courier New", monospace; }
.block-format-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.block-format-row.hidden { display: none; }
.theme-controls { display: grid; gap: 14px; margin: 4px 0; border: 1px solid #a7e6ff80; padding: 14px; background: linear-gradient(145deg, #0a466b, #0b3b5d); box-shadow: inset 0 0 0 1px #ffffff0c; }
.theme-controls legend { padding: 0 8px; color: #ffeb5d; font: 9px "Press Start 2P", monospace; text-transform: uppercase; }
.theme-controls-intro { margin: -5px 0 0; color: #c0e7f4; font-size: 12px; }
.theme-preview-card { display: flex; min-height: 74px; align-items: center; gap: 11px; overflow: hidden; border: 1px solid #b7eaff; border-radius: var(--theme-radius, 0); padding: 11px; background: var(--theme-card-background, #155b89); box-shadow: 3px 4px #062b45, inset 0 0 12px #ffffff1c; transition: border-radius .2s ease, background .2s ease; }
.theme-preview-orb { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border: 1px solid #d8f7ff; border-radius: 50%; background: radial-gradient(circle at 30% 24%, #fff, #5ac6e9 38%, #145581 78%); color: #fff; }
.theme-preview-copy { display: grid; min-width: 0; gap: 5px; }
.theme-preview-copy strong { color: #fff; font-size: 11px; }
.theme-preview-copy small { color: #e3f5ff; font-size: 11px; }
.theme-preview-chip { margin-left: auto; border: 1px solid #b3eaff; padding: 5px 7px; color: #ecfbff; font: 6px "Press Start 2P", monospace; white-space: nowrap; }
.theme-editor-section { display: grid; gap: 8px; border-top: 1px solid #a7e6ff30; padding-top: 12px; }
.theme-editor-section h3 { margin: 0; color: #ffdf48; font: 8px "Press Start 2P", monospace; }
.theme-segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.theme-segmented label { position: relative; cursor: pointer; }
.theme-segmented input, .theme-shape-option input, .theme-font-option input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.theme-segmented label span { display: grid; min-height: 36px; place-items: center; border: 1px solid #8dcce8; padding: 7px; background: #073b5b; color: #d8f1fb; font: 7px "Press Start 2P", monospace; text-transform: uppercase; transition: background .15s, border-color .15s, box-shadow .15s; }
.theme-segmented input:checked + span { border-color: #ffeb5d; background: #176d9b; color: #fff; box-shadow: inset 0 0 0 1px #ffeb5d65, 0 0 9px #7edcff3b; }
.theme-segmented input:focus-visible + span, .theme-shape-option input:focus-visible + span, .theme-font-option input:focus-visible + span { outline: 2px solid #ffeb5d; outline-offset: 2px; }
.theme-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.theme-color-control { display: flex; min-width: 0; min-height: 48px; align-items: center; justify-content: space-between; gap: 7px; border: 1px solid #a7e6ff65; padding: 7px 9px; background: #073b5b; color: #d8f1fb; font-size: 11px; cursor: pointer; }
.theme-color-choice { display: inline-flex; align-items: center; gap: 6px; color: #fff; font: 9px "Courier New", monospace; }
.theme-color-input { width: 44px; height: 44px; flex: none; border: 1px solid #d2f6ff; padding: 3px; background: #0a4165; cursor: pointer; }
.theme-gradient-only.hidden { display: none; }
.theme-shape-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.theme-shape-option { cursor: pointer; }
.theme-shape-preview { display: flex; min-height: 62px; align-items: center; justify-content: center; gap: 10px; border: 1px solid #8dcce8; padding: 8px; background: #073b5b; color: #e8f8ff; font: 8px "Press Start 2P", monospace; text-transform: uppercase; transition: border-color .15s, background .15s, box-shadow .15s; }
.theme-shape-preview i { display: block; width: 44px; height: 28px; border: 2px solid #c9f1ff; background: linear-gradient(135deg, #2b91bd, #14517a); }
.theme-shape-preview-rounded i { border-radius: 10px; }
.theme-shape-option input:checked + .theme-shape-preview { border-color: #ffeb5d; background: #12577d; box-shadow: inset 0 0 0 1px #ffeb5d70; }
.theme-font-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.theme-font-option { display: grid; min-width: 0; min-height: 58px; align-content: center; gap: 5px; border: 1px solid #8dcce8; padding: 8px; background: #073b5b; color: #e8f8ff; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.theme-font-option:hover { transform: translateY(-2px); }
.theme-font-option:has(input:checked) { border-color: #ffeb5d; background: #12577d; box-shadow: inset 0 0 0 1px #ffeb5d70; }
.theme-font-option:focus-within { outline: 2px solid #ffeb5d; outline-offset: 2px; }
.theme-font-option-title { overflow: hidden; color: #fff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.theme-font-sample { color: #bfe8fa; font-size: 12px; }
.signature-editor { display: grid; gap: 12px; }
.signature-hint { margin: 0; color: #d8f1fb; font-size: 13px; line-height: 1.5; }
.signature-canvas { display: block; width: 100%; height: 96px; border: 2px dashed #a7e6ff; background-color: #073b5b; background-image: linear-gradient(#a7e6ff17 1px, transparent 1px), linear-gradient(90deg, #a7e6ff17 1px, transparent 1px); background-size: 16px 16px; cursor: crosshair; touch-action: none; }
.signature-tools { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 12px; }
.signature-color-control, .signature-width-control { display: grid; gap: 7px; color: #d8f1fb; font-size: 12px; }
.signature-color-control .theme-color-input { width: 100%; }
.signature-width-input { width: 100%; accent-color: #ffeb5d; }
.theme-font-pixel, .theme-font-pixel :is(button, input, textarea, select, h1, h2, h3, .button, .pixel) {
  font-family: "Press Start 2P", "Courier New", monospace;
}
.theme-font-gothic, .theme-font-gothic :is(button, input, textarea, select, h1, h2, h3, .button, .pixel) {
  font-family: "Creepster", Georgia, serif;
}
.theme-font-normal, .theme-font-normal :is(button, input, textarea, select, h1, h2, h3, .button, .pixel) {
  font-family: Arial, Helvetica, sans-serif;
}
.theme-font-aero, .theme-font-aero :is(button, input, textarea, select, h1, h2, h3, .button, .pixel) {
  font-family: "Gummy Bear", "Nunito", "Trebuchet MS", Arial, sans-serif;
}
.theme-font-satan, .theme-font-satan :is(button, input, textarea, select, h1, h2, h3, .button, .pixel) {
  font-family: "Eater", Impact, fantasy;
  letter-spacing: .07em;
}
.theme-font-satan h1, .theme-font-satan h2, .theme-font-satan h3 { color: #ffd4df; text-shadow: 2px 2px #6f142e, 0 0 8px #ff386c70; }
.theme-font-minecraft, .theme-font-minecraft :is(button, input, textarea, select, h1, h2, h3, .button, .pixel) {
  font-family: "Minecraft", "Press Start 2P", monospace;
  letter-spacing: 0;
}
.support-ticket-list { margin-top: 14px; }
.support-ticket-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ticket-thread { display: grid; gap: 12px; }
.ticket-message { border: 1px solid #a7e6ff75; padding: 10px; background: #073e6285; }
.ticket-message-staff { border-color: #ffeb5d80; background: #5c4d1e66; }
.ticket-message-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; color: #ffeb5d; }
.ticket-message .post { margin: 0; }
.admin-ticket { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.empty { grid-column: 1 / -1; min-height: 160px; display: grid; place-items: center; border: 1px dashed #a7e6ff8c; color: #c7e7f4; }
.bubble {
  position: absolute; display: block; left: var(--bubble-x); bottom: -60px;
  width: var(--bubble-size); height: var(--bubble-size);
  border: 1px solid #d7f8ff80; border-radius: 50%;
  background: radial-gradient(ellipse at 30% 24%, #f1ffffb5 0 5%, #b5f3ff45 13%, #8fe4ff22 44%, #8fe4ff08 75%);
  box-shadow: inset 2px 2px 6px #e9ffff30, inset -2px -3px 5px #b2f1ff18, 0 0 8px #b2f1ff20;
  rotate: var(--bubble-tilt, 0deg);
  animation: bubble-rise var(--bubble-speed) linear infinite;
  animation-delay: var(--bubble-delay);
  will-change: transform;
  contain: layout paint;
}
.bubble::after { content: ""; position: absolute; left: 27%; top: 18%; width: 17%; height: 8%; border-radius: 50%; background: #f6ffff85; filter: blur(1px); }
.bubble-one { --bubble-x: 7%; --bubble-size: 25px; --bubble-speed: 13s; --bubble-delay: -3s; --bubble-tilt: 2deg; }
.bubble-two { --bubble-x: 19%; --bubble-size: 15px; --bubble-speed: 17s; --bubble-delay: -12s; --bubble-tilt: -4deg; }
.bubble-three { --bubble-x: 32%; --bubble-size: 36px; --bubble-speed: 21s; --bubble-delay: -8s; --bubble-tilt: 1deg; }
.bubble-four { --bubble-x: 46%; --bubble-size: 19px; --bubble-speed: 15s; --bubble-delay: -4s; --bubble-tilt: -2deg; }
.bubble-five { --bubble-x: 61%; --bubble-size: 13px; --bubble-speed: 19s; --bubble-delay: -15s; --bubble-tilt: 5deg; }
.bubble-six { --bubble-x: 73%; --bubble-size: 29px; --bubble-speed: 16s; --bubble-delay: -10s; --bubble-tilt: -1deg; }
.bubble-seven { --bubble-x: 86%; --bubble-size: 22px; --bubble-speed: 23s; --bubble-delay: -6s; --bubble-tilt: 3deg; }
.bubble-eight { --bubble-x: 94%; --bubble-size: 12px; --bubble-speed: 14s; --bubble-delay: -9s; --bubble-tilt: -5deg; }
.bubble-nine { --bubble-x: 12%; --bubble-size: 10px; --bubble-speed: 18s; --bubble-delay: -17s; --bubble-tilt: 2deg; }
.bubble-ten { --bubble-x: 54%; --bubble-size: 17px; --bubble-speed: 20s; --bubble-delay: -13s; --bubble-tilt: -3deg; }
.bubble-eleven { --bubble-x: 80%; --bubble-size: 11px; --bubble-speed: 12s; --bubble-delay: -7s; --bubble-tilt: 4deg; }
.bubble-twelve { --bubble-x: 39%; --bubble-size: 23px; --bubble-speed: 22s; --bubble-delay: -19s; --bubble-tilt: -1deg; }
.pixel-speck {
  position: absolute; width: 2px; height: 2px; background: #d6fbff9c; box-shadow: 0 0 7px 2px #cdf7ff50;
  animation: speck-flicker 4s ease-in-out infinite; will-change: transform, opacity; contain: layout paint;
}
.speck-one { left: 25%; top: 8%; }
.speck-two { right: 23%; top: 27%; animation-delay: -1.5s; }
.speck-three { right: 36%; bottom: 13%; animation-delay: -2.5s; }
.speck-four { left: 14%; top: 63%; animation-delay: -3s; }
@keyframes bubble-rise { 0% { transform: translate3d(0, 0, 0) scale(.72); opacity: .58; } 9% { opacity: .86; } 45% { transform: translate3d(15px, -48vh, 0) scale(1); } 78% { transform: translate3d(-11px, -83vh, 0) scale(.87); opacity: .76; } 100% { transform: translate3d(6px, -112vh, 0) scale(.7); opacity: 0; } }
@keyframes speck-flicker { 0%, 100% { opacity: .2; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.65); } }
@keyframes ds-button-breathe { 0%, 100% { filter: saturate(.94); } 50% { filter: saturate(1.16) brightness(1.06); } }
@keyframes ds-panel-breathe { 0%, 100% { filter: brightness(.99); } 50% { filter: brightness(1.025); } }
@keyframes logo-wink { 0%, 82%, 100% { filter: drop-shadow(0 0 0 transparent); } 88% { filter: drop-shadow(0 0 5px #c7f5ff); } }
.columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(230px, .8fr); gap: 12px; align-items: start; }
.social-columns { grid-template-areas: "left friends"; }
.social-left { grid-area: left; display: grid; align-content: start; gap: 12px; }
.social-friends { grid-area: friends; }
.chat-local-time { color: #b9d8e5; font-size: 10px; white-space: nowrap; }
.stack { display: grid; gap: 10px; }
.post-compose { margin-bottom: 12px; }
.post { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.post-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; color: #ffeb5d; }
.avatar { width: 34px; height: 34px; flex: none; }
.post-time, .muted { color: #b9d8e5; font-size: 11px; }
.chat-log { display: flex; flex-direction: column; gap: 7px; min-height: 120px; max-height: 280px; overflow-y: auto; padding: 8px; border: 1px inset #b6e8ff; background: #07334f99; }
.chat-line { overflow-wrap: anywhere; line-height: 1.6; }
.chat-line b { color: #ffeb5d; }
.chat-compose { display: flex; gap: 6px; margin-top: 8px; }
.chat-compose .field { flex: 1; min-width: 0; }
.chat-image-wrap { margin: 6px 0; display: block; }
.chat-image-link { display: inline-block; max-width: 100%; text-decoration: none; }
.chat-image { display: block; max-width: 220px; max-height: 180px; width: auto; height: auto; border: 1px solid #a9eaff; border-radius: 4px; background: #07263b; object-fit: contain; }
.chat-image:hover { border-color: #ffeb5d; box-shadow: 0 0 6px rgba(255, 235, 93, 0.4); }
.dm-image-preview { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 6px 8px; border: 1px dashed #58c9ef; background: #07334fcc; }
.dm-preview-card { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.dm-preview-thumbnail { width: 34px; height: 34px; object-fit: cover; border: 1px solid #a9eaff; flex: none; background: #041c2c; }
.dm-preview-name { font-size: 11px; color: #e3f5ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.dm-preview-remove { flex: none; width: 24px; min-width: 24px; height: 24px; padding: 3px; font-size: 12px; line-height: 1; }
.dm-attach-button { display: inline-flex; justify-content: center; align-items: center; cursor: pointer; flex: none; min-height: 32px; width: 32px; min-width: 32px; padding: 5px; }
.dm-attach-button svg { display: block; width: 16px; height: 16px; }
.dm-attach-button input { display: none; }
.friend-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid #a4ddf936; }
.profile-banner { width: 100%; height: 145px; object-fit: cover; background: var(--theme-card-background, #0c3f61); border: 1px solid #a9eaff; }
div.profile-banner { background: var(--theme-card-background, #0c3f61); }
.profile-page { display: grid; gap: 14px; border: 1px solid #a7e6ff; border-radius: var(--theme-radius, 0); padding: 12px; background: var(--theme-background, #104b73); }
.profile-page > .section-heading { margin: 0; }
.profile-page .button:not(.gold):not(.pink):not(.danger):not(.moderation-delete) { border-radius: var(--theme-radius, 0); background: var(--theme-card-background, #07547d); }
.profile-page .field, .profile-page .select, .profile-page .textarea { border-radius: var(--theme-radius, 0); background: var(--theme-background, #073e62); }
.profile-appearance { border: 0; border-radius: var(--theme-radius, 0); padding: 0; background: transparent; box-shadow: none; }
.profile-head { display: flex; gap: 12px; align-items: end; margin: -36px 0 15px 12px; position: relative; }
.profile-appearance .profile-head { margin-right: 12px; border-radius: var(--theme-radius, 0); padding: 8px 10px; background: var(--theme-card-background, #155b89df); }
.profile-head .avatar { width: 76px; height: 76px; border-width: 3px; }
.profile-bio { white-space: pre-wrap; overflow-wrap: anywhere; color: #e3f5ff; line-height: 1.65; }
.profile-motto { margin: 8px 0 12px; border-radius: var(--theme-radius, 0); padding: 10px 12px; border-left: 3px solid #ffdf48; background: var(--theme-card-background, #093e61a8); color: #fff3a3; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; }
.profile-projects { display: grid; gap: 10px; border-radius: var(--theme-radius, 0); padding: 10px; background: var(--theme-card-background, #155b89df); }
.profile-projects .section-heading { margin: 0; }
.profile-projects > .project-grid > .empty { border-radius: var(--theme-radius, 0); background: var(--theme-background, #104b73); }
.profile-name-link { border: 0; padding: 0; background: none; color: #ffeb5d; font-weight: 700; text-align: left; text-decoration: underline; text-decoration-color: #ffeb5d70; text-underline-offset: 2px; }
.profile-name-link:hover, .profile-name-link:focus-visible { color: #fff; text-decoration-color: #fff; outline-color: #ffeb5d; }
.member-profile { display: grid; gap: 12px; overflow: hidden; border-radius: var(--theme-radius, 0); padding: 12px; border: 1px solid #a7e6ff; background: var(--theme-background, #104b73); }
.member-profile .button:not(.gold):not(.pink):not(.danger):not(.moderation-delete) { border-radius: var(--theme-radius, 0); background: var(--theme-card-background, #07547d); }
.member-profile-banner { display: block; width: 100%; height: clamp(110px, 25vw, 190px); object-fit: cover; border: 1px solid #a9eaff; background: var(--theme-card-background, linear-gradient(135deg, #145681, #07334f)); }
div.member-profile-banner { background: var(--theme-card-background, linear-gradient(135deg, #145681, #07334f)); }
.member-profile-heading { display: flex; min-width: 0; align-items: center; gap: 12px; border-radius: var(--theme-radius, 0); padding: 12px; background: var(--theme-card-background, #155b89df); }
.member-profile-heading > div { min-width: 0; }
.member-profile-heading h2 { overflow-wrap: anywhere; margin-bottom: 7px; }
.member-profile-avatar { width: 76px; height: 76px; flex: none; border-width: 3px; }
.member-profile-actions { justify-content: flex-start; }
.dm-profile-strip { position: relative; min-height: 66px; overflow: hidden; border: 1px solid #a9eaff; background: #073e62; }
.dm-profile-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.dm-profile-strip::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, #07334fcc, #07334f40); pointer-events: none; }
.dm-profile-identity { position: relative; z-index: 1; display: flex; min-height: 66px; align-items: center; gap: 9px; padding: 7px 10px; }
.dm-profile-avatar { width: 44px; height: 44px; }
.dm-profile-identity .profile-name-link { font-size: 14px; }
.form-grid { display: grid; gap: 10px; }
.form-label { display: grid; gap: 5px; color: #d8f1fb; font-size: 12px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.news-item { border-left: 3px solid #ffde54; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.stat { padding: 12px 8px; text-align: center; border: 1px solid #a7e6ff; background: #104e77; }
.stat strong { display: block; font: 700 20px "DejaVu Sans Mono", "Courier New", monospace; color: #ffea5a; }
.stat span { font-size: 10px; }
.admin-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin: 13px 0; }
.admin-list { display: grid; gap: 7px; margin-top: 10px; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px; border: 1px solid #a7e6ff75; background: #104d74; }
.admin-row-main { min-width: 0; overflow-wrap: anywhere; }
.welcome-screen, .modal-backdrop {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  padding: 18px; background: #031c30ed; backdrop-filter: blur(4px);
}
.welcome-card { position: relative; width: min(100%, 560px); min-height: 250px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 30px; text-align: center; }
.welcome-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.welcome-dismiss { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: #a9eaff; font-size: 11px; user-select: none; opacity: 0.85; transition: opacity .15s ease, color .15s ease; }
.welcome-dismiss:hover { opacity: 1; color: #ffffff; }
.welcome-dismiss input[type="checkbox"] { accent-color: #58c9ef; cursor: pointer; margin: 0; }
@media (min-width: 480px) {
  .welcome-dismiss { position: absolute; right: 18px; bottom: 14px; font-size: 10px; }
}
.welcome-card h1 { font-size: clamp(18px, 5vw, 28px); }
.welcome-text { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.frame, .card, .project-card { animation: ds-panel-breathe 7s ease-in-out infinite; will-change: filter; contain: layout; }
.card:hover, .project-card:hover { animation-play-state: paused; }
.project-card:nth-child(2n) { animation-delay: -3s; }
.project-block:nth-child(2n) { animation-delay: -2s; }
.modal { width: min(100%, 540px); max-height: min(90dvh, 850px); overflow: auto; padding: 17px; }
.modal.wide { width: min(100%, 760px); }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.modal-header:has(.project-header-logo) { align-items: flex-start; }
.modal-header h2 { margin: 0; }
.modal-header h2.has-project-logo { display: flex; align-items: center; flex: 1; min-width: 0; }
.project-header-logo { display: block; max-width: 100%; max-height: 85px; width: auto; height: auto; object-fit: contain; object-position: left center; }
.close-button { border: 1px solid #a7e6ff; background: #124f75; width: 30px; height: 30px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.modal-content { display: grid; gap: 10px; }
.block { border: 1px solid #a7e6ff66; background: #073e62; padding: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.block img, .block video, .block audio { max-width: 100%; }
.toast {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  max-width: calc(100% - 24px); padding: 10px 16px; background: #031e32; border: 1px solid #a9eaff;
  opacity: 0; transform: translate(-50%, 15px); pointer-events: none; transition: .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- SELECTOR DE ZONA VISIBLE (ESTILO YOUTUBE) --- */
/* --- TÍTULO DE PROYECTO CON LOGO/IMAGEN (OPCIONAL) --- */
.project-title-input-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.project-title-logo-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 4px 8px; min-height: 32px; font-size: 15px; cursor: pointer; flex-shrink: 0;
  background: #0b3754; border: 1px solid #7fe0ff80; border-radius: 2px;
}
.project-title-logo-btn:hover { background: #134e75; border-color: #ffeb5d; }
.project-title-logo-chip {
  display: flex; align-items: center; gap: 6px; padding: 3px 8px; flex-shrink: 0;
  border: 1px solid #7fe0ff; background: #032034; border-radius: 2px;
}
.project-title-logo-chip img {
  display: block; max-height: 24px; max-width: 80px; width: auto; height: auto;
  object-fit: contain; background: transparent;
}
.project-title-logo-remove-btn {
  background: transparent; border: 0; color: #ff8ca3; font-weight: bold; cursor: pointer;
  padding: 0 4px; font-size: 16px; line-height: 1; transition: color .15s;
}
.project-title-logo-remove-btn:hover { color: #ff3366; }

.image-cropper-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 12px; background: rgba(1, 10, 18, 0.96); backdrop-filter: blur(8px);
  touch-action: none;
}
.image-cropper-modal {
  width: min(100%, 740px); max-height: min(94dvh, 820px); overflow-y: auto;
  padding: 16px; background: #031626; border: 1px solid #145681;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9), 0 0 24px rgba(7, 43, 70, 0.6);
  display: flex; flex-direction: column; gap: 12px;
}
.image-cropper-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.image-cropper-header h2 { margin: 0; font-size: 10px; color: #a9eaff; font-family: "Press Start 2P", monospace; text-transform: uppercase; text-shadow: 0 0 8px rgba(88, 201, 239, 0.5); }
.image-cropper-instructions { margin: 0; color: #c4e9f7; font-size: 11px; line-height: 1.45; }
.image-cropper-instructions strong { color: #a9eaff; }

.image-cropper-stage-wrap {
  display: flex; justify-content: center; align-items: center; background: #010a12;
  border: 1px solid #0f4266; padding: 10px; border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.85);
}
.image-cropper-stage {
  position: relative; overflow: hidden; user-select: none; touch-action: none;
  background-color: #020e1a;
  background-image:
    linear-gradient(45deg, #051b2e 25%, transparent 25%),
    linear-gradient(-45deg, #051b2e 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #051b2e 75%),
    linear-gradient(-45deg, transparent 75%, #051b2e 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
.cropper-stage-img { display: block; user-select: none; pointer-events: none; width: 100%; height: 100%; object-fit: contain; }
.cropper-mask-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5;
}

.cropper-crop-box {
  position: absolute; box-sizing: border-box; cursor: move; touch-action: none; z-index: 10;
  border: 2px solid #38bdf8; box-shadow: 0 0 12px rgba(16, 83, 126, 0.9), inset 0 0 8px rgba(56, 189, 248, 0.25);
}
.cropper-crop-box.is-circle {
  border-radius: 50%;
}
.cropper-badge {
  position: absolute; top: -11px; left: 8px; pointer-events: none; z-index: 15;
  background: #021422; color: #a9eaff; border: 1px solid #145681;
  font-family: "Press Start 2P", monospace; font-size: 7px; padding: 2px 6px;
  border-radius: 2px; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.cropper-grid {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image:
    linear-gradient(to right, rgba(56, 189, 248, 0.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 189, 248, 0.2) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
}
.cropper-corner-bracket {
  position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: #38bdf8; border-style: solid; border-width: 0; z-index: 12;
}
.cropper-bracket-nw { top: -2px; left: -2px; border-top-width: 3px; border-left-width: 3px; }
.cropper-bracket-ne { top: -2px; right: -2px; border-top-width: 3px; border-right-width: 3px; }
.cropper-bracket-sw { bottom: -2px; left: -2px; border-bottom-width: 3px; border-left-width: 3px; }
.cropper-bracket-se { bottom: -2px; right: -2px; border-bottom-width: 3px; border-right-width: 3px; }

.cropper-handle {
  position: absolute; width: 34px; height: 34px; background: transparent;
  display: flex; align-items: center; justify-content: center; z-index: 25; touch-action: none;
}
.cropper-handle::after {
  content: ''; display: block; width: 12px; height: 12px;
  background: #38bdf8; border: 2px solid #010a12; border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,0,0,0.9);
}
.cropper-handle-nw { top: -17px; left: -17px; cursor: nwse-resize; }
.cropper-handle-ne { top: -17px; right: -17px; cursor: nesw-resize; }
.cropper-handle-sw { bottom: -17px; left: -17px; cursor: nesw-resize; }
.cropper-handle-se { bottom: -17px; right: -17px; cursor: nwse-resize; }

.cropper-middle-panel {
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 8px 12px; background: #021220; border: 1px solid #0f4266; border-radius: 3px;
}
.cropper-controls-row {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px;
}
.cropper-quick-actions {
  display: flex; align-items: center; gap: 6px;
}
.cropper-zoom-slider { flex: 1; accent-color: #38bdf8; cursor: pointer; height: 6px; }

.cropper-preview-container {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: #010d18; border: 1px dashed #145681; border-radius: 3px;
}
.cropper-preview-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.cropper-preview-title {
  font-size: 9px; color: #a9eaff; font-family: "Press Start 2P", monospace; letter-spacing: 0.3px;
}
.cropper-preview-sub {
  font-size: 11px; color: #7ecae6;
}
.cropper-live-canvas {
  display: block; max-height: 48px; max-width: 180px; object-fit: contain;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, #051b2e 25%, transparent 25%),
    linear-gradient(-45deg, #051b2e 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #051b2e 75%),
    linear-gradient(-45deg, transparent 75%, #051b2e 75%);
  background-size: 8px 8px;
  border: 1px solid #145681; border-radius: 2px;
}
    linear-gradient(45deg, transparent 75%, #07263e 75%),
    linear-gradient(-45deg, transparent 75%, #07263e 75%);
  background-size: 8px 8px;
  border: 1px solid #7fe0ff80; border-radius: 2px;
}
.cropper-live-canvas.is-circle {
  border-radius: 50%; max-height: 48px; max-width: 48px;
}
.toast.toast-tree-black {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #333333 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.95), 0 0 14px rgba(88, 201, 239, 0.3) !important;
  pointer-events: auto;
  cursor: pointer;
}
.toast-tree-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.toast-tree-title {
  font: 8px "Press Start 2P", monospace;
  color: #58c9ef;
  letter-spacing: 0.5px;
}
.toast-tree-body {
  font-size: 13px;
  color: #e0e0e0;
  line-height: 1.4;
}
.notification-tree-card {
  background: #000000 !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), inset 0 0 14px rgba(88, 201, 239, 0.08) !important;
  color: #ffffff !important;
  padding: 12px 14px !important;
}

/* Tarjeta de notificación temática para GENRUPTO dentro de Nerume */
.notification-genrupto-card {
  background: linear-gradient(135deg, #180F22 0%, #251635 100%) !important;
  border: 1px solid #633678 !important;
  box-shadow: 0 4px 20px rgba(20, 14, 27, 0.9), inset 0 0 16px rgba(197, 83, 148, 0.18) !important;
  color: #E8DFF5 !important;
  padding: 14px !important;
  border-radius: 8px !important;
  position: relative;
  overflow: hidden;
}

.notification-genrupto-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #F08AC5 0%, #C55394 50%, #9B71CF 100%);
}

.genrupto-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.genrupto-notif-badge {
  font: 7px "Press Start 2P", monospace;
  color: #FFAAD9;
  background: rgba(36, 17, 51, 0.9);
  padding: 4px 8px;
  border: 1px solid #A24B82;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(197, 83, 148, 0.35);
  letter-spacing: 0.5px;
}

.genrupto-notif-title {
  color: #FFF !important;
  font-size: 13px !important;
  margin: 0 0 5px 0 !important;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.genrupto-notif-body {
  color: #D3C3E5 !important;
  font-size: 12px !important;
  margin: 0 !important;
  line-height: 1.45;
}

.genrupto-notification-btn {
  background: linear-gradient(135deg, #C55394 0%, #7E2869 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #FFAAD9 !important;
  text-decoration: none;
  font: 8px "Press Start 2P", monospace;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 10px rgba(197, 83, 148, 0.4);
}

.genrupto-notification-btn:hover {
  background: linear-gradient(135deg, #E065AB 0%, #993280 100%) !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 0 14px rgba(240, 138, 197, 0.7);
  transform: translateY(-1px);
}
.ban-badge {
  display: inline-block;
  padding: 2px 5px;
  font-size: 7px;
  border-radius: 2px;
  background: rgba(255, 22, 142, 0.2);
  border: 1px solid #ff168e;
  color: #ff5277;
}
.ban-report-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tree-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.tree-notif-badge {
  font: 7px "Press Start 2P", monospace;
  color: #58c9ef;
  background: #111111;
  padding: 3px 6px;
  border: 1px solid #222222;
  border-radius: 3px;
}
.tree-notif-title {
  color: #ffffff !important;
  font-size: 13px !important;
  margin: 0 0 4px 0 !important;
  font-weight: 700;
}
.tree-notif-body {
  color: #cccccc !important;
  font-size: 12px !important;
  margin: 0 !important;
  line-height: 1.4;
}
.tree-notification-btn {
  background: #111111 !important;
  color: #58c9ef !important;
  border: 1px solid #333333 !important;
  text-decoration: none;
  font: 8px "Press Start 2P", monospace;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .2s, border-color .2s;
}
.tree-notification-btn:hover {
  background: #1c1c1c !important;
  border-color: #58c9ef !important;
  color: #ffffff !important;
}
.footer { padding: 30px 0 10px; color: #b6e5f6; text-align: center; font: 7px "Press Start 2P", "Courier New", monospace; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.custom-emoji {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.25em;
  object-fit: contain;
  image-rendering: auto;
}
.emoji-open-trigger {
  cursor: pointer;
  font-size: 8px;
}
#emoji-picker-root {
  position: relative;
  z-index: 70;
}
.emoji-picker-backdrop {
  z-index: 70 !important;
}
.emoji-picker-modal {
  z-index: 71 !important;
}
.emoji-picker-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(72vh, 480px);
}
.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
  overflow-y: auto;
  max-height: 360px;
  padding: 4px;
}
.emoji-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  background: #073e62;
  border: 1px solid #a7e6ff66;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease, background 0.1s ease;
  min-height: 64px;
  text-align: center;
}
.emoji-picker-item:hover, .emoji-picker-item:focus-visible {
  background: #124f75;
  border-color: #ffeb5d;
  transform: scale(1.05);
}
.emoji-picker-thumb {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.emoji-picker-name {
  font-size: 6px;
  line-height: 1.1;
  color: #c7e7f4;
  word-break: break-all;
  max-width: 100%;
}
.admin-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.admin-emoji-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: #073e62;
  border: 1px solid #a7e6ff66;
  text-align: center;
}
.admin-emoji-thumb-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed #a7e6ff40;
}
.admin-emoji-preview {
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
}
.admin-emoji-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  overflow: hidden;
}
.admin-emoji-code {
  font-size: 7px;
  color: #ffeb5d;
  word-break: break-all;
}
.admin-emoji-file {
  font-size: 6px;
  color: #92b4c8;
  word-break: break-all;
}

@media (max-width: 700px) {
  .columns { grid-template-columns: 1fr; }
  .social-columns { grid-template-areas: "chat" "friends" "posts"; grid-template-columns: minmax(0, 1fr); }
  .social-left { display: contents; }
  .social-chat { grid-area: chat; }
  .social-friends { grid-area: friends; }
  .social-posts { grid-area: posts; }
  .chat-log { height: 58vh; min-height: 300px; max-height: 580px; }
  .project-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .install-app-button { display: inline-flex; }
}
@media (max-width: 460px) {
  body { font-size: 14px; }
  .site { width: min(100% - 14px, 1155px); margin: 5px auto 18px; }
  .top { padding: 6px; margin-bottom: 9px; gap: 6px; }
  .account-slot { grid-column: 1 / -1; justify-content: center; flex-wrap: wrap; }
  .brand { font-size: 11px; }
  .brand-icon { width: 20px; height: 20px; }
  .nav-button { min-height: 36px; font-size: 7px; }
  .view { min-height: 440px; padding: 10px; }
  .project-layout { grid-template-columns: 1fr; gap: 8px; }
  .project-sidebar { padding: 5px 0; }
  .project-sidebar h2 { margin-bottom: 4px; }
  .project-shortcuts { display: flex; gap: 10px; overflow-x: auto; padding: 0 0 5px; }
  .project-shortcut { width: auto; max-width: 170px; flex: 0 0 auto; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .project-card { min-height: 145px; padding: 9px; }
  .project-title { font-size: 8px; }
  .project-card-logo { max-height: 28px; }
  .project-title.has-logo { min-height: auto; width: 100%; max-width: 100%; }
  .project-card .project-description {
    font-size: 11px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 2.9em;
  }
  .field-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .brand { font-size: 11px; }
  .account-slot { gap: 4px; }
  .account-name { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-button { min-height: 30px; font-size: 7px; }
  .admin-row { align-items: flex-start; flex-direction: column; }
  .view { padding: 8px; }
  .modal { width: 100%; max-height: min(94dvh, 900px); padding: 11px; }
  .modal.wide { width: 100%; }
  .modal-backdrop { padding: 6px; }
  .project-viewer { gap: 10px; }
  .project-viewer { padding: 9px; }
  .theme-controls { padding: 11px 9px; gap: 12px; }
  .theme-preview-chip { display: none; }
  .theme-color-grid { grid-template-columns: 1fr; }
  .theme-color-control { min-height: 46px; }
  .theme-font-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-font-option { padding: 7px; }
  .theme-font-option-title { font-size: 9px; }
  .theme-shape-preview { min-height: 56px; gap: 6px; font-size: 7px; }
  .signature-tools { grid-template-columns: 72px minmax(0, 1fr); gap: 9px; }
  .signature-editor .modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signature-editor .modal-actions .button { min-height: 42px; padding: 7px 5px; font-size: 7px; }
  .signature-editor .modal-actions .primary { grid-column: 1 / -1; grid-row: 1; min-height: 42px; }
  .comment-footer { align-items: flex-start; }
  .comment-owner-tools { flex: 1 1 100%; }
  .comment-signature { width: min(100%, 300px); }
  .comment-signature img { height: 50px; }
  .project-block { padding: 9px; }
  .project-block-controls { justify-content: flex-start; }
  .project-block-content img, .project-block-content video { max-height: 48vh; }
  .project-editor { padding: 9px; }
  .block-type-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .block-type-button { min-height: 60px; padding: 6px 2px; font-size: 6px; }
  .block-type-button svg { width: 21px; height: 21px; }
  .admin-ticket { align-items: flex-start; flex-direction: column; }
  .ticket-message-head { align-items: flex-start; flex-direction: column; }
  .chat-compose { flex-wrap: wrap; }
  .chat-compose .textarea { min-width: 0; }
}
@media (max-width: 360px) {
  .project-grid { grid-template-columns: 1fr; }
  .theme-font-picker { grid-template-columns: 1fr 1fr; }
  .theme-segmented label span { font-size: 6px; }
  .comment-owner-tools .button { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* =====================================================================
   INDICADOR CIRCULAR DE SUBIDA DE ARCHIVOS
   ===================================================================== */
.upload-progress-overlay {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 16px; background: rgba(1, 10, 18, 0.85); backdrop-filter: blur(5px);
  pointer-events: auto; opacity: 0; transition: opacity .2s ease-out;
}
.upload-progress-overlay.is-active {
  opacity: 1;
}
.upload-progress-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #031626, #020c15);
  border: 1px solid #145681; border-radius: 8px;
  padding: 24px 28px; min-width: 200px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(7, 43, 70, 0.8);
  gap: 12px; text-align: center;
}
.upload-progress-spinner-wrap {
  position: relative; width: 64px; height: 64px; display: grid; place-items: center;
}
.upload-progress-circle-svg {
  width: 64px; height: 64px; transform: rotate(-90deg);
}
.upload-progress-circle-bg {
  fill: none; stroke: #062238; stroke-width: 4;
}
.upload-progress-circle-bar {
  fill: none; stroke: #38bdf8; stroke-width: 4; stroke-linecap: round;
  transition: stroke-dashoffset .08s linear;
  filter: drop-shadow(0 0 6px #10537e);
}
.upload-progress-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Press Start 2P", monospace; font-size: 10px; color: #a9eaff;
  letter-spacing: -0.5px;
}
.upload-progress-text {
  font-family: "Press Start 2P", monospace; font-size: 9px; color: #a9eaff;
  text-transform: uppercase; text-shadow: 0 0 6px rgba(88, 201, 239, 0.5);
  margin-top: 4px;
}
.upload-progress-sub {
  font-size: 11px; color: #7ecae6; margin: 0;
}