@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  
  --bg-main: #0f0f0f;         
  --bg-surface: #171717;
  --bg-card: #1c1c1c;
  --bg-panel: #242424;
  --border-color: #2a2a2a;
  --border-light: #383838;
  
  --accent: #ffffff;          
  --text-main: #ffffff;
  --text-muted: #a3a3a3;
  --text-dim: #666666;

  --sidebar-width: 240px;
  --header-height: 56px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: var(--font-main);
  background-color: var(--bg-main);
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  /* Stops iOS/Android's elastic bounce past the page's horizontal edge (and
     Chrome's overscroll-triggered swipe-navigation). This is unrelated to
     touch-action - it only governs what happens AT the scroll boundary, not
     which gesture directions are recognized, so it doesn't block horizontal
     scrolling inside things like the category filter strip. */
  overscroll-behavior-x: none;
}

body {
  user-select: none;
  -webkit-user-select: none;
}

input, textarea, select, pre, code, [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-light);
}

.bg-wallpaper {
  position: fixed;
  inset: 0;
  background-color: var(--bg-main);
  background-image:
    radial-gradient(circle at 15% 0%, #1e1e1e, transparent 55%),
    radial-gradient(circle at 90% 100%, #191919, transparent 55%);
  z-index: -2;
}

.bg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.9);
  z-index: -1;
}

.file-upload-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.file-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.file-upload-label:hover {
  background: var(--bg-panel);
  border-color: var(--accent);
  color: #ffffff;
}

.file-upload-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
}

.file-name-preview {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#auth-gate-screen {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.96);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 20px;
}

#reset-password-screen {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.96);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 20px;
}

#auth-gate-screen.hidden {
  display: none !important;
}

.auth-gate-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  text-align: center;
}

.auth-gate-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-bottom: 14px;
}

.auth-gate-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.auth-gate-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 22px;
}

#loading-screen {
  position: fixed;
  inset: 0;
  background: var(--bg-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.35s ease, visibility 0.35s;
}

#loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-logo-wrapper {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.loader-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.loader-glow-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  animation: spinRing 0.9s linear infinite;
}

.loader-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.loader-bar-bg {
  width: 140px;
  height: 2px;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}

.loader-bar-fill {
  width: 0%;
  height: 100%;
  background: var(--accent);
  animation: loadProgress 0.8s ease-out forwards;
}

@keyframes spinRing { to { transform: rotate(360deg); } }
@keyframes loadProgress { 0% { width: 0%; } 100% { width: 100%; } }

.app-layout {
  /* Not flex: .sidebar is position:fixed (out of flow), so the old flex:1 on
     .main-wrapper sized it to 100% of this container and THEN added its own
     margin-left on top - 240px of guaranteed horizontal overflow on every
     screen size. Plain block layout lets a block element's auto-width
     correctly subtract its own margin-left instead. */
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-main);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  transition: width 0.2s ease;
}

.sidebar-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-color);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-main);
  font-weight: 700;
  font-size: 15px;
}

.brand-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  overflow-y: auto;
  /* Setting only overflow-y (without overflow-x) makes the browser treat
     overflow-x as "auto" too, per spec - not "visible" like you'd expect.
     That's what let a couple px of bold-text overflow from the active nav
     item flash a horizontal scrollbar here. Pin it to hidden explicitly. */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  padding: 10px 10px 4px 10px;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.nav-item i {
  font-size: 15px;
  width: 16px;
  text-align: center;
  color: var(--text-dim);
}

.nav-item:hover {
  color: var(--text-main);
  background: var(--bg-surface);
}

.nav-item.active {
  color: var(--text-main);
  background: var(--bg-surface);
  border-color: var(--border-color);
  font-weight: 600;
}

.nav-item.active i {
  color: var(--accent);
}

.nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-panel);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.user-mini-card {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-md);
}

.user-mini-card:hover {
  background: var(--bg-card);
}

.user-mini-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.user-mini-avatar img, .user-mini-avatar video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-mini-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-mini-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--text-main);
}

.user-mini-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.main-wrapper {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  min-height: 100dvh;
  transition: margin-left 0.2s ease;
  display: flex;
  flex-direction: column;
}

.app-header {
  height: var(--header-height);
  padding: 0 clamp(12px, 3vw, 24px);
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 16px);
  justify-content: space-between;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 90;
}

.search-bar {
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  gap: 8px;
  width: min(300px, 100%);
  flex: 1;
  min-width: 0;
}

.search-bar:focus-within {
  border-color: var(--accent);
}

.search-bar input {
  background: transparent;
  border: none;
  color: var(--text-main);
  outline: none;
  font-size: 13px;
  width: 100%;
}

.search-results-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 0;
}

.search-result-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 12px 4px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-main);
}

.search-result-item:hover {
  background: var(--bg-panel);
}

.search-result-item i {
  color: var(--text-dim);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.search-result-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: all 0.15s ease;
  text-decoration: none;
}

.btn-primary {
  background: #ffffff;
  color: #0f0f0f;
  border-color: #ffffff;
  font-weight: 600;
}

.btn-primary:hover {
  background: #e5e5e5;
  border-color: #e5e5e5;
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-card);
  border-color: var(--border-light);
}

.btn-danger {
  background: transparent;
  color: #ff4444;
  border-color: #ff4444;
}

.btn-danger:hover {
  background: #ff4444;
  color: #0f0f0f;
}

.content-area {
  flex: 1;
  padding: clamp(12px, 3vw, 24px);
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}

.view-panel {
  display: none;
}

.view-panel.active {
  display: block;
}

.clean-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  overflow: hidden;
}

.clean-box-header {
  background: var(--bg-surface);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.clean-box-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
}

.form-control, .form-input, .form-textarea, .form-select {
  width: 100%;
  background: #101010;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.form-control::placeholder, .form-input::placeholder, .form-textarea::placeholder {
  color: #5a5a5a;
}

.form-control:hover, .form-input:hover, .form-textarea:hover, .form-select:hover {
  border-color: var(--border-light);
  background-color: #131313;
}

.form-control:focus, .form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: #fff;
  background-color: #121212;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
}

.form-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.55;
}

.form-select, select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #101010;
  background-image:
    linear-gradient(45deg, transparent 50%, #8a8a8a 50%),
    linear-gradient(135deg, #8a8a8a 50%, transparent 50%);
  background-position:
    calc(100% - 17px) center,
    calc(100% - 12px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form-select::-ms-expand, select.form-control::-ms-expand {
  display: none;
}

.form-select:hover, select.form-control:hover {
  background-color: #141414;
  border-color: var(--border-light);
  background-image:
    linear-gradient(45deg, transparent 50%, #cfcfcf 50%),
    linear-gradient(135deg, #cfcfcf 50%, transparent 50%);
}

.form-select:focus, select.form-control:focus {
  background-color: #121212;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
  outline: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #ffffff 50%),
    linear-gradient(135deg, #ffffff 50%, transparent 50%);
}

.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #fff;
}

.form-select option, select.form-control option {
  background-color: #1c1c1c;
  color: #f0f0f0;
}

.search-bar {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.search-bar:hover {
  border-color: var(--border-light);
}

.search-bar:focus-within {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}

.search-bar input::placeholder {
  color: #5a5a5a;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
}

.stat-val {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.stat-lbl {
  font-size: 11.5px;
  color: var(--text-muted);
}

.dashboard-hero-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.dashboard-feed-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.category-filter-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.category-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.category-chip:hover, .category-chip.active {
  background: #ffffff;
  color: #0f0f0f;
  border-color: #ffffff;
  font-weight: 600;
}

.code-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
  transition: border-color 0.15s ease;
}

.code-item-card:hover {
  border-color: var(--border-light);
}

.code-item-banner {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-bottom: 1px solid var(--border-color);
  display: block;
}

.code-item-content {
  padding: 16px 18px;
}

.code-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.code-item-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.code-item-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.code-item-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.code-item-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.dev-creator-mini-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
  transition: border-color 0.15s ease;
}

.dev-creator-mini-card:hover {
  border-color: var(--border-light);
}

.creator-avatar-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-light);
}

.academy-progress-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.academy-roadmap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

.roadmap-unit {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.unit-header-bar {
  background: var(--bg-card);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}

.unit-title-text {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.unit-lessons-grid {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.coddy-node {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

.coddy-node:hover {
  border-color: var(--accent);
  transform: scale(1.05);
}

.coddy-node.completed {
  background: #ffffff;
  border-color: #ffffff;
  color: #0f0f0f;
}

.coddy-node.active {
  background: var(--bg-panel);
  border-color: #ffffff;
  color: #ffffff;
}

.coddy-node.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.coddy-modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 95%;
  max-width: 1020px;
  height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.coddy-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.coddy-theory-pane {
  background: var(--bg-main);
  padding: 20px;
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
}

.coddy-theory-pane h3 {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 10px;
}

.coddy-theory-pane p, .coddy-theory-pane ul {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}

.coddy-theory-pane pre {
  background: var(--bg-surface);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin: 10px 0;
  overflow-x: auto;
}

.coddy-editor-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg-main);
}

.coddy-editor-header {
  background: var(--bg-surface);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
}

.coddy-code-input {
  flex: 1;
  background: var(--bg-main);
  border: none;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  padding: 16px;
  outline: none;
  resize: none;
  white-space: pre;
}

.coddy-console-output {
  height: 100px;
  background: #080808;
  border-top: 1px solid var(--border-color);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-y: auto;
  color: var(--text-muted);
}

.coddy-footer-actions {
  background: var(--bg-surface);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portfolio-layout-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
}

.portfolio-stage-box {
  background: #080808;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  position: relative;
  min-height: 540px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-stage-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.portfolio-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.portfolio-clean-card {
  position: absolute;
  z-index: 10;
  width: 320px;
  max-width: calc(100% - 24px);
  transform: translate(-50%, -50%);
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.portfolio-clean-card.dragging {
  cursor: grabbing;
}

.portfolio-clean-name.editing,
.portfolio-clean-bio.editing {
  outline: 1px dashed #555;
  border-radius: 4px;
  background: #111;
  cursor: text;
}

.portfolio-clean-name:not(.editing):hover,
.portfolio-clean-bio:not(.editing):hover {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  cursor: text;
}

.studio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 16px;
  animation: fadeUp 0.35s ease both;
}

.studio-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.studio-hint i {
  color: #fff;
  margin-right: 4px;
}

.studio-toolbar-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.studio-toolbar-btns .btn {
  font-size: 12px;
  padding: 5px 12px;
}

#public-view-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-muted);
  animation: fadeUp 0.35s ease both;
}

#public-view-banner b {
  color: #fff;
}

body.public-mode .sidebar,
body.public-mode .app-header {
  display: none;
}

body.public-mode .main-wrapper {
  margin-left: 0;
}

body.public-mode .content-area {
  max-width: none;
  padding: 0;
}

body.public-mode .portfolio-stage-box {
  min-height: 100vh;
  min-height: 100dvh;
  border: none;
  border-radius: 0;
}

body.public-mode #public-view-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  margin: 0;
  width: auto;
  max-width: calc(100vw - 24px);
  white-space: nowrap;
  overflow: hidden;
  background: rgba(15, 15, 15, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  font-size: 12px;
  animation: none;
}

#stage-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.fx-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fx-row button {
  flex: 1 1 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.fx-row button i {
  margin-right: 4px;
}

.fx-row button:hover {
  border-color: var(--border-light);
  color: #fff;
  transform: translateY(-1px);
}

.fx-row button.selected {
  background: #fff;
  border-color: #fff;
  color: #0f0f0f;
}

#public-view-banner .btn {
  font-size: 12px;
  padding: 5px 12px;
  flex-shrink: 0;
}

.studio-pop {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 300px;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  overflow-y: auto;
  z-index: 60;
  background: rgba(15, 15, 15, 0.97);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
  animation: popIn 0.22s ease both;
}

.studio-pop-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.bg-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.bg-thumb {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
}

.bg-thumb-face {
  height: 46px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-size: cover;
  background-position: center;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.bg-thumb:hover .bg-thumb-face {
  transform: translateY(-2px);
  border-color: var(--border-light);
}

.bg-thumb.selected .bg-thumb-face {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.bg-thumb small {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bg-thumb.selected small {
  color: #fff;
}

.studio-socials {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.studio-socials:empty {
  display: none;
}

.studio-card-menu {
  position: absolute;
  z-index: 70;
  display: none;
  align-items: center;
  gap: 4px;
  background: rgba(12, 12, 12, 0.96);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 5px 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75);
  transform: translate(-50%, -100%);
  margin-top: -10px;
}

.studio-card-menu.show {
  display: flex;
  animation: menuPop 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.studio-card-menu.below {
  transform: translate(-50%, 0);
  margin-top: 12px;
}

.studio-card-menu.show.below {
  animation: menuPopBelow 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes menuPop {
  from { opacity: 0; transform: translate(-50%, -100%) scale(0.6); }
  to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

@keyframes menuPopBelow {
  from { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.studio-card-menu button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.studio-card-menu button:hover {
  background: #fff;
  color: #0f0f0f;
  border-color: #fff;
  transform: translateY(-1px);
}

.portfolio-clean-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.portfolio-clean-card.arming {
  transform: translate(-50%, -50%) scale(0.99);
}

.portfolio-clean-card.dragging {
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 0 1px #fff;
  cursor: grabbing;
}

#studio-card.menu-open .portfolio-clean-name:not(.editing),
#studio-card.menu-open .portfolio-clean-bio:not(.editing) {
  outline: 1px dashed #444;
  border-radius: 4px;
}

.portfolio-avatar-container {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ffffff;
  margin: 0 auto 12px;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-clean-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-clean-name {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}

.portfolio-clean-subdomain {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: 12px;
}

.portfolio-clean-bio {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.portfolio-audio-widget {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.portfolio-audio-widget.has-audio {
  display: flex;
}

.forum-post-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-bottom: 18px;
}

.char-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.comment-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.comment-box strong {
  color: #fff;
}

.link-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s ease;
}

.link-btn:hover {
  color: #fff;
}

.code-box-container {
  margin: 12px 0;
  background: #080808;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.code-box-header {
  background: var(--bg-surface);
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.code-box-pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
}

.code-box-pre code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}

.modal-overlay.active {
  display: flex;
}

#view-profile-modal {
  z-index: 100001;
}

.mini-del-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: #ff7777;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.mini-del-btn:hover {
  background: #3a1111;
  border-color: #ff5555;
  color: #ffaaaa;
}

.modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  padding: 24px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
}

.modal-close:hover {
  color: #fff;
}

#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

.toast.success { border-left: 3px solid #ffffff; }
.toast.error { border-left: 3px solid #ff4444; }
.toast.info { border-left: 3px solid #888888; }

.media-fallback {
  width: 100%;
  height: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-muted);
  background: var(--bg-main);
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .portfolio-layout-grid { grid-template-columns: 1fr; }
  .dashboard-feed-grid { grid-template-columns: 1fr; }
  .coddy-workspace { grid-template-columns: 1fr; }

  /* Below 16px, iOS Safari auto-zooms on input focus and often doesn't
     zoom back out cleanly - that's what looks like the page "widening"
     after tapping the search bar or any form field. */
  .search-bar input,
  .form-control, .form-input, .form-textarea, .form-select {
    font-size: 16px;
  }
}

.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

/* Sidebar becomes an overlay drawer below this width - a genuine mode switch
   (fixed rail vs. slide-in overlay), not just a size change, so this is the
   one deliberate breakpoint left. Everything else above (search bar, header,
   content padding, stat-grid) now scales continuously via clamp()/min() and
   needs no per-device overrides at all. */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 200;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop.open {
    display: block;
  }

  .main-wrapper {
    margin-left: 0;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

  .header-right span {
    display: none;
  }

  .header-right .btn {
    padding: 6px 10px;
  }

  .dashboard-hero-box {
    padding: clamp(10px, 3vw, 16px);
  }

  .category-filter-bar {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

.avatar-crop-box {
  max-width: 340px;
}

.avatar-crop-stage {
  display: flex;
  justify-content: center;
  padding: 8px 0 2px;
}

.avatar-crop-circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  background: #0a0a0a;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.avatar-crop-circle:active {
  cursor: grabbing;
}

.avatar-crop-circle img,
.avatar-crop-circle video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.avatar-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 12px;
}

.avatar-zoom-row input[type="range"] {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 5px;
  border-radius: 3px;
  background: #2c2c2c;
  outline: none;
  cursor: pointer;
}

.avatar-zoom-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0f0f0f;
  box-shadow: 0 0 0 1px #fff;
  cursor: grab;
  transition: transform 0.15s ease;
}

.avatar-zoom-row input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.avatar-zoom-row input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0f0f0f;
  cursor: grab;
}

.avatar-edit-hint {
  display: block;
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 8px;
}

.portfolio-avatar-container {
  user-select: none;
  -webkit-user-select: none;
}

.portfolio-avatar-container img,
.portfolio-avatar-container video {
  user-select: none;
  -webkit-user-drag: none;
}

.node-done-tick {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: #0f0f0f;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0f0f0f;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.96) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes floatPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.view-panel.active {
  animation: fadeUp 0.35s ease both;
}

.stat-card {
  animation: fadeUp 0.4s ease both;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:nth-child(2) { animation-delay: 0.05s; }
.stat-card:nth-child(3) { animation-delay: 0.1s; }
.stat-card:nth-child(4) { animation-delay: 0.15s; }

.stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-light);
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}

.clean-box, .forum-post-card, .code-item-card, .roadmap-unit {
  animation: fadeUp 0.35s ease both;
}

.clean-box {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.clean-box:hover {
  border-color: #333;
}

.code-item-card, .forum-post-card, .dev-creator-mini-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.code-item-card:hover, .forum-post-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-light);
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}

.dev-creator-mini-card:hover {
  transform: translateX(3px);
  border-color: var(--border-light);
}

.btn {
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-primary:hover {
  box-shadow: 0 6px 18px rgba(255,255,255,0.15);
}

.nav-item {
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.category-chip {
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.category-chip:hover {
  transform: translateY(-1px);
}

.category-chip:active {
  transform: scale(0.97);
}

.modal-overlay.active .modal-content,
.modal-overlay.active .coddy-modal-content {
  animation: popIn 0.28s ease both;
}

.modal-overlay {
  animation: fadeIn 0.2s ease both;
}

.toast {
  animation: slideInRight 0.25s ease both;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.coddy-node {
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.coddy-node:hover {
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
}

.coddy-node.completed {
  animation: floatPulse 2.4s ease-in-out infinite;
}

.unit-lessons-grid > div {
  animation: fadeUp 0.35s ease both;
}

.dashboard-hero-box {
  animation: fadeUp 0.35s ease both;
}

.sidebar-footer .user-mini-card {
  transition: background 0.18s ease, transform 0.18s ease;
}

.sidebar-footer .user-mini-card:hover {
  transform: translateY(-1px);
}

.auth-gate-card {
  animation: popIn 0.35s ease both;
}

.file-upload-label {
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.file-upload-label:hover {
  transform: translateY(-1px);
}

#stage-avatar-container img,
#stage-avatar-container video {
  transition: transform 0.15s ease;
}

input, textarea, select, button {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* BLOXDHUB 4 STYLE OVERRIDES */
:root{
 --font-main:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --bg-main:#131313;
 --bg-surface:#1a1a1a;
 --bg-card:#202020;
 --bg-panel:#282828;
 --border-color:#2e2e2e;
 --border-light:#3c3c3c;
 --accent:#ffb066;
 --text-main:#f3f3f3;
 --text-muted:#a2a2a2;
 --text-dim:#6d6d6d;
 --sidebar-width:218px;
 --header-height:58px;
 --radius-sm:7px;
 --radius-md:9px;
 --radius-lg:12px;
}
html,body{background:#131313;color:#f3f3f3;font-size:14px;line-height:1.45}
body{user-select:auto;-webkit-user-select:auto}
.bg-wallpaper{background:#131313;background-image:none}
.bg-overlay{background:transparent}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:#131313}
::-webkit-scrollbar-thumb{background:#343434;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#404040}
.sidebar{width:var(--sidebar-width);background:#171717;border-right:1px solid #2c2c2c;box-shadow:none}
.sidebar-header{height:var(--header-height);padding:0 18px;border-bottom:1px solid #2c2c2c}
.brand-link{gap:9px;font-size:15px;font-weight:700;color:#f5f5f5}
.brand-logo{width:26px;height:26px;border-radius:7px}
.sidebar-nav{padding:14px 10px;gap:3px}
.nav-section-title{font-size:10px;letter-spacing:.7px;color:#6a6a6a;padding:12px 9px 6px}
.nav-item{padding:8px 10px;border:0;border-radius:7px;color:#a0a0a0;font-size:13px;font-weight:500;transition:background .12s,color .12s}
.nav-item i{color:#747474;font-size:14px}
.nav-item:hover{background:#202020;color:#eaeaea;transform:none}
.nav-item.active{background:#282828;border:0;color:#fff;font-weight:600}
.nav-item.active i{color:#fff}
.nav-badge{background:#282828;border:0;color:#959595;padding:2px 6px;border-radius:5px}
.sidebar-footer{padding:10px;border-top:1px solid #2c2c2c;background:#171717}
.user-mini-card{padding:7px 8px;border-radius:8px}
.user-mini-card:hover{background:#202020}
.user-mini-avatar{width:32px;height:32px;background:#282828;border:0;color:#fff}
.app-header{height:var(--header-height);padding:0 20px;background:#171717;border-bottom:1px solid #2c2c2c;box-shadow:none}
.search-bar{background:#202020;border:1px solid #2f2f2f;border-radius:8px;padding:7px 11px;max-width:420px}
.search-bar:hover{border-color:#3f3f3f}
.search-bar:focus-within{border-color:#505050;box-shadow:none}
.search-bar input{font-size:13px}
.search-results-panel{background:#1d1d1d;border:1px solid #343434;border-radius:9px;box-shadow:0 14px 35px rgba(0,0,0,.38)}
.header-right{gap:6px}
.btn{padding:7px 12px;border-radius:7px;font-size:13px;border:1px solid #343434;background:#202020;color:#e9e9e9;transition:background .12s,border-color .12s,color .12s}
.btn:hover,.btn:active{transform:none;box-shadow:none}
.btn-primary{background:#eaeaea;color:#171717;border-color:#eaeaea;font-weight:600}
.btn-primary:hover{background:#fff;border-color:#fff}
.btn-secondary{background:#202020;color:#e9e9e9;border-color:#343434}
.btn-secondary:hover{background:#282828;border-color:#404040}
.btn-danger{color:#ff7d7d;border-color:#573333}
.btn-danger:hover{background:#351f20;color:#ff9292;border-color:#754141}
.content-area{padding:22px;max-width:1180px}
.view-panel.active{animation:none}
.clean-box,.forum-post-card,.code-item-card,.roadmap-unit,.stat-card,.dashboard-hero-box{background:#1a1a1a;border:1px solid #2e2e2e;border-radius:9px;box-shadow:none;animation:none}
.clean-box{margin-bottom:16px;transition:border-color .12s}
.clean-box:hover{border-color:#3a3a3a;transform:none;box-shadow:none}
.clean-box-header{background:#1a1a1a;padding:12px 15px;border-bottom:1px solid #2e2e2e}
.clean-box-body{padding:17px}
.form-control,.form-input,.form-textarea,.form-select{background:#131313;border:1px solid #343434;color:#f1f1f1;border-radius:7px;padding:9px 11px;box-shadow:none;transition:border-color .12s,background .12s}
.form-control:hover,.form-input:hover,.form-textarea:hover,.form-select:hover{background:#161616;border-color:#3f3f3f}
.form-control:focus,.form-input:focus,.form-textarea:focus,.form-select:focus{background:#131313;border-color:#606060;box-shadow:none}
.form-control::placeholder,.form-input::placeholder,.form-textarea::placeholder{color:#676767}
.stat-grid{gap:10px;margin-bottom:16px}
.stat-card{padding:13px 15px;gap:12px}
.stat-card:hover{transform:none;border-color:#3a3a3a;box-shadow:none}
.stat-icon{width:36px;height:36px;border-radius:8px;background:#282828;border:0;color:#dddddd}
.stat-val{font-size:17px}.stat-lbl{font-size:11px}
.dashboard-hero-box{padding:15px 17px;margin-bottom:16px}
.dashboard-feed-grid{gap:16px}
.category-filter-bar{gap:6px;margin-bottom:15px;padding-bottom:3px}
.category-chip{background:#1a1a1a;border:1px solid #303030;color:#9b9b9b;border-radius:7px;padding:6px 11px;font-size:12px;transition:background .12s,border-color .12s,color .12s}
.category-chip:hover{transform:none;background:#232323;border-color:#3f3f3f}
.category-chip.active{background:#eaeaea;color:#171717;border-color:#eaeaea}
.code-item-card{margin-bottom:13px;transition:border-color .12s}
.code-item-card:hover,.forum-post-card:hover{transform:none;border-color:#3f3f3f;box-shadow:none}
.code-item-content{padding:15px 17px}
.code-item-title{font-size:15px}.code-item-desc{font-size:13px}
.dev-creator-mini-card{background:#202020;border:1px solid #2f2f2f;border-radius:8px;transition:background .12s,border-color .12s}
.dev-creator-mini-card:hover{transform:none;border-color:#3f3f3f}
.academy-progress-bar{background:#1a1a1a;border:1px solid #2e2e2e;border-radius:9px;padding:14px 17px;margin-bottom:18px}
.academy-roadmap{gap:14px}
.roadmap-unit{overflow:hidden}
.unit-header-bar{background:#202020;padding:12px 16px;border-bottom:1px solid #2e2e2e}
.unit-lessons-grid{padding:20px;gap:14px}
.coddy-node{width:56px;height:56px;background:#202020;border:2px solid #343434;transition:background .12s,border-color .12s}
.coddy-node:hover{border-color:#6c6c6c;transform:none;box-shadow:none}
.coddy-node.completed{background:#eaeaea;border-color:#eaeaea;color:#171717;animation:none}
.coddy-node.active{background:#282828;border-color:#767676;color:#fff}
.coddy-modal-content,.modal-content{background:#1a1a1a;border:1px solid #343434;border-radius:10px;box-shadow:0 18px 55px rgba(0,0,0,.48)}
.coddy-workspace{border-color:#2e2e2e}
.coddy-theory-pane,.coddy-editor-pane{background:#131313}
.coddy-theory-pane{border-right:1px solid #2e2e2e}
.coddy-editor-header,.coddy-footer-actions{background:#1a1a1a;border-color:#2e2e2e}
.coddy-code-input{background:#131313}
.coddy-console-output{background:#0f0f0f;border-color:#2e2e2e}
.portfolio-stage-box{background:#0f0f0f;border:1px solid #2e2e2e;border-radius:9px}
.portfolio-clean-card{background:rgba(20,20,20,.96);border:1px solid #383838;border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.42);transition:none}
.portfolio-clean-card.dragging{box-shadow:0 20px 50px rgba(0,0,0,.55);transform:translate(-50%,-50%);}
.studio-toolbar,#public-view-banner,.studio-pop{background:#1a1a1a;border:1px solid #2e2e2e;border-radius:9px;box-shadow:none;animation:none}
.studio-toolbar{padding:9px 12px;margin-bottom:13px}
.studio-pop{background:#1a1a1a}
.bg-thumb-face{border-color:#343434}
.bg-thumb:hover .bg-thumb-face{transform:none;border-color:#5b5b5b}
.bg-thumb.selected .bg-thumb-face{border-color:#dddddd;box-shadow:0 0 0 1px #dddddd}
.studio-card-menu{background:#1a1a1a;border:1px solid #383838;box-shadow:0 12px 30px rgba(0,0,0,.42)}
.studio-card-menu button:hover{background:#eaeaea;color:#171717;border-color:#eaeaea;transform:none}
.forum-post-card{padding:18px 20px;margin-bottom:14px}
.comment-box{background:#131313;border:1px solid #2d2d2d}
.code-box-container{background:#0f0f0f;border:1px solid #2e2e2e;border-radius:8px}
.code-box-header{background:#1a1a1a;border-color:#2e2e2e}
.modal-overlay{background:rgba(7,7,7,.78);backdrop-filter:blur(2px)}
.modal-header{border-bottom:1px solid #2e2e2e}
.toast{background:#1a1a1a;border:1px solid #343434;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:none}
.toast.success{border-left:3px solid #72d49a}.toast.error{border-left:3px solid #e56b6b}.toast.info{border-left:3px solid #848484}
.file-upload-label{background:#1a1a1a;border:1px dashed #3f3f3f;border-radius:8px;transition:background .12s,border-color .12s}
.file-upload-label:hover{background:#1d1d1d;border-color:#606060;transform:none}
#auth-gate-screen,#reset-password-screen{background:rgba(11,11,11,.92);backdrop-filter:blur(5px)}
.auth-gate-card{background:#1a1a1a;border:1px solid #343434;border-radius:10px;box-shadow:0 18px 55px rgba(0,0,0,.5);animation:none}
#loading-screen{background:#131313}
.loader-glow-ring{border-top-color:#c8c8c8;animation:spinRing .9s linear infinite}
.loader-bar-bg{background:#2e2e2e}.loader-bar-fill{background:#dddddd}
input,textarea,select,button{font-family:inherit}
input:focus,textarea:focus,select:focus,button:focus-visible{outline:2px solid rgba(191,191,191,.22);outline-offset:1px}
@media(max-width:900px){.sidebar{width:230px}.content-area{padding:16px}.app-header{padding:0 14px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Social tab ===== */
.social-layout {
  display: flex;
  height: calc(100vh - var(--header-height) - 40px);
  gap: 16px;
}

.social-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.social-sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}
.social-sidebar-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 10px 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.social-sidebar-tab.active {
  color: var(--text-main);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.social-search-row { padding: 10px; border-bottom: 1px solid var(--border-color); }
.social-search-results { max-height: 160px; overflow-y: auto; }

.social-panel-body { display: none; flex: 1; overflow-y: auto; padding: 6px; }
.social-panel-body.active { display: block; }

.social-list-subtitle {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding: 8px 8px 4px;
}

.social-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-md);
}
.social-list-item:hover { background: var(--bg-panel); }

.social-list-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--bg-panel); flex-shrink: 0; }
.social-list-text { flex: 1; min-width: 0; }
.social-list-name { font-size: 13px; font-weight: 600; color: var(--text-main); }
.social-list-preview { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-unread-pill { background: #e0424a; color: #fff; flex-shrink: 0; }
.social-empty-hint { padding: 16px 10px; font-size: 12.5px; color: var(--text-dim); text-align: center; }

.social-chat-area { flex: 1; display: flex; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.social-chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-dim); gap: 8px; }
.social-chat-empty i { font-size: 32px; }

.social-chat-window { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.social-chat-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-color); }
.social-chat-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--bg-panel); }
.social-chat-username { font-size: 14px; font-weight: 700; color: var(--text-main); }
.social-chat-status { font-size: 11px; color: var(--text-muted); }

.social-chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }

.social-msg { display: flex; flex-direction: column; max-width: 65%; }
.social-msg.mine { align-self: flex-end; align-items: flex-end; }
.social-msg.theirs { align-self: flex-start; align-items: flex-start; }
.social-msg-bubble {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.4;
  word-break: break-word;
  background: var(--bg-panel);
  color: var(--text-main);
}
.social-msg.mine .social-msg-bubble { background: var(--accent); color: #0f0f0f; }
.social-msg-deleted { color: var(--text-dim); font-size: 12.5px; }
.social-msg-edited { color: var(--text-dim); font-size: 10.5px; }
.social-msg-image { max-width: 220px; border-radius: 8px; margin-top: 4px; display: block; }

.social-reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-muted);
}
.social-reply-preview button { background: none; border: none; color: var(--text-dim); cursor: pointer; }

.social-mention-autocomplete {
  position: absolute;
  bottom: 56px;
  left: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  z-index: 10;
}

.social-chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-color);
}
.social-chat-input-row .form-control { flex: 1; }

.social-context-menu {
  position: fixed;
  z-index: 3000;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  flex-direction: column;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  overflow: hidden;
}
.social-context-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.social-context-menu button:hover { background: var(--bg-card); }
.social-context-menu button[data-action="delete"] { color: #ff7777; }

.social-mention {
  color: #f5a851;
  font-weight: 600;
  cursor: pointer;
}
.social-mention:hover { text-decoration: underline; }

.social-mention-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-main);
}
.social-mention-autocomplete-item:hover,
.social-mention-autocomplete-item.active { background: var(--bg-card); }
.social-mention-autocomplete-item img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

.social-list-avatar.clickable { cursor: pointer; }

#social-confirm-actions .btn { flex: 1; }
#social-confirm-actions .btn-danger { background: #e0424a; border-color: #e0424a; color: #fff; }

/* ===== Social tab: v2 refinements ===== */

/* Badges now blue instead of red, matching the reference notification style */
.social-unread-pill,
#social-unread-badge,
#social-requests-badge,
#social-chats-badge { background: #e8892a !important; color: #fff !important; }

/* Status dot overlay on any avatar */
.social-avatar-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.social-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  background: #7e7e7e;
}
.social-status-dot.online { background: #3ba55d; }

/* Discord-style message rows: avatar + name/time + content, everyone left-aligned */
.social-msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: socialMsgIn 0.18s ease-out;
}
@keyframes socialMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.social-msg-row .social-msg-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--bg-panel); margin-top: 2px; }
.social-msg-col { flex: 1; min-width: 0; }
.social-msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.social-msg-name { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.social-msg-name.own { color: #f5a851; }
.social-msg-time { font-size: 10.5px; color: var(--text-dim); }
.social-msg-row .social-msg-bubble {
  display: inline-block;
  max-width: 100%;
  background: var(--bg-panel);
  padding: 7px 11px;
  border-radius: 8px;
}
.social-msg-row.own .social-msg-bubble { background: #252525; }
.social-msg-row.pending { opacity: 0.55; }

.social-msg-reply-ref {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0 0 2px 44px;
  position: relative;
  max-width: calc(100% - 44px);
  /* No overflow/truncation here - this element positions the connector
     arrow OUTSIDE its own box (left: -18px), so overflow:hidden on it
     would clip the arrow. Truncation belongs on .social-reply-text only. */
}
.social-reply-connector {
  position: absolute;
  left: -18px;
  bottom: 4px;
  width: 14px;
  height: 12px;
  border-left: 2px solid var(--border-light);
  border-top: 2px solid var(--border-light);
  border-top-left-radius: 6px;
}
.social-reply-avatar { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.social-reply-name { font-weight: 600; color: var(--text-main); flex-shrink: 0; }
.social-reply-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* flex items default to min-width:auto, which silently breaks text-overflow:ellipsis inside a flex row */
}

.social-day-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 600;
  margin: 10px 0;
}
.social-day-divider::before,
.social-day-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

.social-typing-indicator {
  padding: 2px 14px;
  font-size: 11.5px;
  color: var(--text-dim);
  font-style: italic;
}

.social-attachment-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-color);
}
.social-attachment-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.social-attachment-preview .social-attachment-name { font-size: 12px; color: var(--text-main); flex: 1; }
.social-attachment-preview .social-attachment-status { font-size: 11px; color: var(--text-dim); }
.social-attachment-preview button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; }

.social-list-item.active-chat {
  background: var(--bg-panel);
  box-shadow: inset 3px 0 0 #e8892a;
}


/* ===== Navy community refresh ===== */
:root{
  --bg-main:#101010;
  --bg-surface:#141414;
  --bg-card:#171717;
  --bg-panel:#1d1d1d;
  --border-color:#303030;
  --border-light:#4d3d24;
  --accent:#ffa14d;
  --accent-strong:#f28c28;
  --text-main:#f1f1f1;
  --text-muted:#9e9e9e;
  --text-dim:#77644e;
  --sidebar-width:238px;
  --header-height:56px;
  --radius-sm:5px;
  --radius-md:7px;
  --radius-lg:9px;
  --font-main:'Outfit',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html,body{font-family:var(--font-main);background:var(--bg-main);color:var(--text-main)}
.bg-wallpaper{background:radial-gradient(circle at 12% 0%,#231c11 0,transparent 42%),radial-gradient(circle at 95% 100%,#171717 0,transparent 44%),var(--bg-main)}
.bg-overlay{background:rgba(16,12,8,.72)}
.sidebar{background:#121212;border-right:1px solid #2a2a2a;box-shadow:10px 0 30px rgba(0,0,0,.12)}
.sidebar-header{border-bottom:1px solid #2a2a2a}
.sidebar-nav{padding:12px 9px;gap:3px}
.nav-section-title{color:#656565}
.nav-item{color:#a08e6f;border-color:transparent}
.nav-item i{color:#656565}
.nav-item:hover{background:#181818;color:#efefef}
.nav-item.active{background:#1e1e1e;border-color:#323232;color:#fff}
.nav-item.active i{color:#ffb066}
.nav-badge{background:#231c11;border-color:#353535;color:#a5a5a5}
.sidebar-footer{background:#121212;border-top:1px solid #2a2a2a}
.user-mini-card:hover{background:#191919}
.app-header{background:#121212;border-bottom:1px solid #2a2a2a;box-shadow:0 8px 25px rgba(0,0,0,.12)}
.search-bar{background:#141414;border-color:#303030}
.search-bar:focus-within{border-color:#a8641f}
.btn-primary{background:#ffe2bd;color:#081321;border-color:#ffe2bd;box-shadow:none}
.btn-primary:hover{background:#fff;border-color:#fff}
.btn-secondary{background:#1a1a1a;color:#dedede;border-color:#363636}
.btn-secondary:hover{background:#1a1a1a;border-color:#54432a}
.content-area{padding:22px;max-width:none;width:100%}
.clean-box,.forum-post-card,.code-item-card,.roadmap-unit,.stat-card,.dashboard-hero-box{background:#161616;border:1px solid #2f2f2f;border-radius:9px;box-shadow:0 8px 28px rgba(0,0,0,.12)}
.clean-box:hover,.code-item-card:hover,.forum-post-card:hover{border-color:#483b24;box-shadow:0 10px 30px rgba(0,0,0,.16);transform:none}
.clean-box-header{background:#161616;border-bottom:1px solid #2f2f2f}
.form-control,.form-input,.form-textarea,.form-select{background:#121212;border-color:#2f2f2f;color:#f1f1f1;border-radius:7px}
.form-control:hover,.form-input:hover,.form-textarea:hover,.form-select:hover{background:#131313;border-color:#4a3a22}
.form-control:focus,.form-input:focus,.form-textarea:focus,.form-select:focus{background:#121212;border-color:#b26a1f;box-shadow:0 0 0 3px rgba(255,161,77,.08)}
.form-control::placeholder,.form-input::placeholder,.form-textarea::placeholder{color:#656565}
.category-filter-bar{gap:7px;margin-bottom:17px;padding-bottom:2px}
.category-chip{background:#161616;border:1px solid #303030;color:#a08e6f;border-radius:7px;padding:7px 11px;font-size:12px;font-weight:600}
.category-chip:hover{background:#1e1e1e;border-color:#3e3e3e;color:#e7e7e7;transform:none}
.category-chip.active{background:#ffe2bd;color:#091321;border-color:#ffe2bd}
.code-item-card{overflow:hidden}
.code-item-banner{height:150px;background:#121212;border-bottom:1px solid #303030}
.code-item-content{padding:15px 17px}
.code-item-title{font-size:15px;font-weight:700;color:#f1f1f1}
.code-item-desc{font-size:13px;color:#a08e6f;line-height:1.5}
.code-item-actions{border-top:1px solid #2a2a2a;padding-top:12px}
.dashboard-hero-box{padding:16px 18px;margin-bottom:15px}
.stat-grid{gap:10px;margin-bottom:15px}
.stat-card{padding:14px 15px}
.stat-icon{background:#251d12!important;color:#ffc182!important}

/* Less dashboard clutter */
#view-home .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#view-home .stat-card:nth-child(n+3){display:none}
#view-home .dashboard-hero-box{padding:13px 16px}
#view-home .dashboard-feed-grid{grid-template-columns:minmax(0,1.7fr) minmax(250px,.8fr);gap:14px}
#view-home .category-filter-bar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
#view-home .category-filter-bar::-webkit-scrollbar{display:none}
#view-home .category-chip{white-space:nowrap}

/* Community code cards: workshop-like, visual first */
#view-codes .category-filter-bar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
#view-codes .category-filter-bar::-webkit-scrollbar{display:none}
#view-codes .category-chip{white-space:nowrap}
#codes-grid-container{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;gap:14px!important}
.code-item-card{min-height:100%;display:flex;flex-direction:column}
.code-item-content{display:flex;flex-direction:column;flex:1}
.code-item-actions{margin-top:auto}

/* Messaging takes available space beside the sidebar and BELOW the app
   header - the header must stay visible on every page, Social included. */
.social-layout{height:calc(100vh - var(--header-height) - 32px);gap:0}
.social-sidebar{width:290px;border-radius:0;border-top:0;border-bottom:0;border-left:0;background:#121212;border-color:#2a2a2a}
.social-chat-area{border-radius:0;border:0;background:#121212}
.social-sidebar-tabs{border-bottom-color:#2a2a2a}
.social-sidebar-tab{padding:12px 7px;color:#8a7658}
.social-sidebar-tab.active{color:#fff;box-shadow:inset 0 -2px 0 #ffa14d}
.social-search-row{padding:12px;border-bottom-color:#2a2a2a}
.social-list-item{padding:10px 9px;border:1px solid transparent}
.social-list-item:hover{background:#171717}
.social-list-item.active-chat{background:#241c11;box-shadow:inset 3px 0 #ff9e4d;border-color:#2b2b2b}
.social-chat-header{padding:12px 18px;background:#121212;border-bottom-color:#2f2f2f}
.social-chat-messages{padding:20px 24px;gap:9px;background:linear-gradient(180deg,#121212,#121212)}
.social-msg-row{gap:11px}
.social-msg-row .social-msg-avatar{width:36px;height:36px}
.social-msg-name{font-size:13.5px}
.social-msg-bubble{background:#1d1d1d!important;border:1px solid #2e2e2e;border-radius:8px!important;padding:8px 11px!important;color:#e9e9e9!important}
.social-msg-row.own .social-msg-bubble{background:#2c2314!important;border-color:#4a3a20}
.social-msg-col{max-width:min(760px,82vw)}
.social-chat-input-row{position:relative;padding:12px 16px;background:#121212;border-top-color:#2f2f2f}
.social-chat-input-row .form-control{height:42px}
.social-chat-input-row .btn{height:42px}
.social-mention-autocomplete{left:16px;bottom:66px;background:#151515;border-color:#4d3d24;box-shadow:0 12px 30px rgba(0,0,0,.35);min-width:230px}
.social-mention-autocomplete-item:hover,.social-mention-autocomplete-item.active{background:#1b1b1b}
.social-context-menu{background:#151515;border-color:#4d3d24;box-shadow:0 14px 35px rgba(0,0,0,.45)}
.social-context-menu button{padding:9px 12px}
.social-context-menu button:hover{background:#1b1b1b}
.social-message-actions{display:flex;align-items:center;gap:3px;margin-left:auto;opacity:0;transition:opacity .12s}
.social-msg-row:hover .social-message-actions{opacity:1}
.social-message-more{width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:#77644e;cursor:pointer;display:grid;place-items:center}
.social-message-more:hover{background:#2e2415;color:#e7e7e7}
.social-mention{color:#ffc98a;background:rgba(255,161,77,.09);border-radius:4px;padding:0 2px}
.social-reply-preview{background:#151515;border-color:#2f2f2f}
.social-attachment-preview{background:#131313;border-color:#2f2f2f}
.social-attachment-preview img{border:1px solid #4d3d24}
.social-msg-image{max-width:min(520px,70vw);max-height:420px;border-radius:8px;border:1px solid #4d3d24;margin-top:7px}
.social-msg-video{display:block;width:min(560px,70vw);aspect-ratio:16/9;border:1px solid #4d3d24;border-radius:10px;background:#03070d;margin-top:7px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.social-video-wrap{width:min(560px,70vw);margin-top:7px;border:1px solid #4d3d24;border-radius:10px;overflow:hidden;background:#03070d;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.social-video-wrap iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.social-video-label{display:flex;align-items:center;gap:7px;padding:7px 10px;background:#101010;color:#a08d68;font-size:11px}
.social-chat-empty{background:radial-gradient(circle at center,#251d12 0,transparent 48%);color:#8a7a5c}
.social-chat-empty i{font-size:38px;color:#6e5c40}
.social-chat-empty p{font-size:13px}
.social-compose-hint{padding:0 16px 8px;color:#656565;font-size:11px}
.social-compose-hint b{color:#c4b28e}

@media(max-width:900px){
  .social-layout{height:calc(100dvh - var(--header-height) - 32px)}
  .social-sidebar{width:250px}
  #view-home .dashboard-feed-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .social-chat-header{padding:10px}
  .social-chat-messages{padding:14px}
}

/* Collapsed (icon-only) sidebar mode */
.sidebar-header { position: relative; }
.sidebar-collapse-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  margin-left: auto;
}
.sidebar-collapse-toggle:hover { background: var(--bg-panel); color: var(--text-main); }

body.sidebar-collapsed .sidebar { width: 72px; }
body.sidebar-collapsed .main-wrapper { margin-left: 72px; }
body.sidebar-collapsed .brand-link span,
body.sidebar-collapsed .nav-section-title,
body.sidebar-collapsed .nav-item span,
body.sidebar-collapsed .nav-badge,
body.sidebar-collapsed .user-mini-info { display: none; }
body.sidebar-collapsed .nav-item { justify-content: center; }
body.sidebar-collapsed .brand-link { justify-content: center; }
body.sidebar-collapsed .sidebar-collapse-toggle { margin-left: 0; }
body.sidebar-collapsed .sidebar-collapse-toggle i { transform: rotate(180deg); }
body.sidebar-collapsed .user-mini-card { justify-content: center; }

/* The collapse toggle caused persistent layout breakage on mobile (stuck
   collapsed state via localStorage carrying over, tiny screens with no
   room to spare for an icon-only rail) - disable it entirely below this
   breakpoint, forcing the sidebar back to normal regardless of any stored
   preference from a previous desktop session. */
@media(max-width:900px){
  .sidebar-collapse-toggle{display:none}
  body.sidebar-collapsed .sidebar{width:230px}
  body.sidebar-collapsed .main-wrapper{margin-left:230px}
  body.sidebar-collapsed .brand-link span,
  body.sidebar-collapsed .nav-section-title,
  body.sidebar-collapsed .nav-item span,
  body.sidebar-collapsed .nav-badge,
  body.sidebar-collapsed .user-mini-info{display:revert}
  body.sidebar-collapsed .nav-item,
  body.sidebar-collapsed .brand-link,
  body.sidebar-collapsed .user-mini-card{justify-content:revert}
}

:root{
  --bg-main:#121212;
  --bg-surface:#181818;
  --bg-elevated:#1c1c1c;
  --bg-card:#181818;
  --bg-panel:#1f1f1f;
  --bg-hover:rgba(242,140,40,.08);
  --border-color:rgba(255,255,255,.1);
  --border-light:rgba(255,255,255,.18);
  --accent:#f28c28;
  --accent-strong:#d97a1e;
  --accent-dim:rgba(242,140,40,.15);
  --text-main:#fff;
  --text-muted:#9b9b9b;
  --text-dim:#646464;
  --online:#3fbf6a;
  --danger:#ef4444;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:10px;
  --font-main:'Geist','Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html,body{font-family:var(--font-main);background:var(--bg-main);color:var(--text-main);color-scheme:dark}
button,input,textarea,select{font-family:inherit}
.bg-wallpaper{background:var(--bg-main)}
.bg-overlay{background:transparent}
::-webkit-scrollbar-track{background:var(--bg-main)}
::-webkit-scrollbar-thumb{background:#3c3c3c}
::-webkit-scrollbar-thumb:hover{background:#6b5b3f}

.sidebar,.sidebar-footer,.app-header{background:var(--bg-surface);border-color:var(--border-color);box-shadow:none}
.sidebar-header{border-bottom-color:var(--border-color)}
.app-header{background:rgba(44,44,44,.96);backdrop-filter:blur(8px)}
.nav-section-title{color:var(--text-dim)}
.nav-item{color:var(--text-muted);border-radius:10px;transition:background-color .25s cubic-bezier(.22,1,.36,1),color .25s cubic-bezier(.22,1,.36,1)}
.nav-item i{color:var(--text-dim)}
.nav-item:hover{background:var(--bg-hover);color:#fff}
.nav-item:hover i{color:var(--accent)}
.nav-item.active{background:var(--accent-dim);border-color:transparent;color:var(--accent)}
.nav-item.active i{color:var(--accent)}
.nav-badge{background:var(--bg-panel);border-color:var(--border-color);color:var(--text-muted)}
.user-mini-card:hover{background:var(--bg-hover)}
.search-bar{background:var(--bg-elevated);border-color:var(--border-color);border-radius:var(--radius-md)}
.search-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}

.btn{border-radius:7px;font-weight:500;transition:background-color .15s,border-color .15s,color .15s,transform .1s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn-primary:hover{background:#f2a24d;border-color:#f2a24d;color:#fff}
.btn-secondary{background:var(--bg-elevated);border-color:var(--border-color);color:#e3e3e3}
.btn-secondary:hover{background:var(--bg-panel);border-color:var(--border-light)}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}

.clean-box,.forum-post-card,.code-item-card,.roadmap-unit,.stat-card,.dashboard-hero-box,
.dev-creator-mini-card,.academy-progress-bar,.studio-toolbar,#public-view-banner,.studio-pop{
  background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:none}
.clean-box:hover,.code-item-card:hover,.forum-post-card:hover,.stat-card:hover,.dev-creator-mini-card:hover{border-color:var(--border-light);box-shadow:none}
.clean-box-header,.unit-header-bar{background:var(--bg-surface);border-bottom:1px solid var(--border-color)}
.code-item-banner{background:var(--bg-elevated);border-bottom-color:var(--border-color)}
.code-item-title{color:#fff}
.code-item-desc{color:var(--text-muted)}
.code-item-actions{border-top-color:var(--border-color)}
.stat-icon{background:var(--accent-dim)!important;color:var(--accent)!important}

.form-control,.form-input,.form-textarea,.form-select{background:var(--bg-elevated);border-color:var(--border-color);color:#fff;border-radius:var(--radius-md)}
.form-control:hover,.form-input:hover,.form-textarea:hover,.form-select:hover{background:var(--bg-elevated);border-color:var(--border-light)}
.form-control:focus,.form-input:focus,.form-textarea:focus,.form-select:focus{background:var(--bg-elevated);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.form-control::placeholder,.form-input::placeholder,.form-textarea::placeholder{color:var(--text-dim)}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:focus,textarea:focus,select:focus{outline:none}

.category-chip{background:var(--bg-surface);border-color:var(--border-color);color:var(--text-muted);border-radius:9999px}
.category-chip:hover{background:var(--bg-panel);border-color:var(--border-light);color:#fff}
.category-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}

.coddy-modal-content,.modal-content,.toast,.studio-card-menu{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.modal-overlay{background:rgba(18,14,9,.75)}
.modal-header{border-bottom-color:var(--border-color)}
.toast.success{border-left-color:var(--online)}
.toast.error{border-left-color:var(--danger)}
.toast.info{border-left-color:var(--accent)}
.studio-card-menu button:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.coddy-node{background:var(--bg-surface);border-color:var(--border-light)}
.coddy-node:hover{border-color:var(--accent)}
.coddy-node.completed{background:var(--accent);border-color:var(--accent);color:#fff}
.coddy-node.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.coddy-theory-pane,.coddy-editor-pane,.coddy-code-input,.comment-box{background:var(--bg-elevated)}
.coddy-editor-header,.coddy-footer-actions,.code-box-header{background:var(--bg-surface);border-color:var(--border-color)}
.coddy-console-output,.code-box-container,.portfolio-stage-box{background:#141414;border-color:var(--border-color)}
.coddy-workspace,.coddy-theory-pane{border-color:var(--border-color)}

#auth-gate-screen,#reset-password-screen{background:rgba(38,29,18,.94);backdrop-filter:blur(8px)}
#loading-screen{background:var(--bg-main)}
.auth-gate-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:12px}
.loader-glow-ring{border-top-color:var(--accent)}
.loader-bar-bg{background:var(--bg-panel)}
.loader-bar-fill{background:var(--accent)}
.file-upload-label{background:var(--bg-elevated);border-color:var(--border-light);border-radius:var(--radius-md)}
.file-upload-label:hover{background:var(--bg-panel);border-color:var(--accent)}

.social-sidebar,.social-chat-input-row,.social-chat-header{background:var(--bg-surface);border-color:var(--border-color)}
.social-chat-area{background:var(--bg-main)}
.social-chat-messages{background:var(--bg-main)}
.social-sidebar-tabs,.social-search-row{border-bottom-color:var(--border-color)}
.social-sidebar-tab{color:var(--text-muted)}
.social-sidebar-tab.active{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.social-list-item:hover{background:var(--bg-hover)}
.social-list-item.active-chat{background:var(--accent-dim);box-shadow:inset 3px 0 var(--accent);border-color:transparent}
.social-msg-bubble{background:var(--bg-surface)!important;border-color:var(--border-color)!important;color:#fff!important;border-radius:10px!important}
.social-msg-row.own .social-msg-bubble{background:rgba(242,140,40,.18)!important;border-color:rgba(242,140,40,.35)!important}
.social-mention{color:var(--accent);background:var(--accent-dim)}
.social-mention-autocomplete,.social-context-menu,.social-reply-preview,.social-attachment-preview{background:var(--bg-surface);border-color:var(--border-light)}
.social-mention-autocomplete-item:hover,.social-mention-autocomplete-item.active,.social-context-menu button:hover,.social-message-more:hover{background:var(--bg-panel)}
.social-msg-image,.social-msg-video,.social-video-wrap,.social-attachment-preview img{border-color:var(--border-color)}
.social-video-label{background:var(--bg-elevated);color:var(--text-muted)}
.social-chat-empty{background:none;color:var(--text-dim)}
.social-chat-empty i{color:var(--text-dim)}
.social-compose-hint{color:var(--text-dim)}
.social-compose-hint b{color:var(--text-muted)}

:root{--shadow-card:0 1px 2px rgba(0,0,0,.18);--shadow-pop:0 12px 32px rgba(0,0,0,.35);--ease-out:cubic-bezier(.22,1,.36,1)}
body{letter-spacing:-.003em}
h1,h2,h3,.code-item-title,.auth-gate-title{letter-spacing:-.015em}
::selection{background:rgba(242,140,40,.35)}

.content-area{padding:26px 28px 40px}
.content-area>.view-panel:not(#view-social){max-width:1280px;margin-inline:auto}
.content-area>#view-social{max-width:1280px;margin-inline:auto}

.sidebar-header{height:var(--header-height)}
.brand-link{font-weight:700;letter-spacing:-.02em}
.nav-section-title{font-size:10.5px;letter-spacing:.09em;font-weight:600;text-transform:uppercase;padding:14px 12px 6px}
.nav-item{padding:9px 12px;font-size:13.5px;position:relative}
.nav-item.active::before{content:"";position:absolute;left:-9px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.user-mini-card{border-radius:10px;padding:8px}
.user-mini-avatar{background:var(--bg-panel);border:1px solid var(--border-color);color:var(--text-muted)}
.sidebar-footer a[href*="privacy"]{color:var(--text-dim)}
.sidebar-footer a[href*="privacy"]:hover{color:var(--accent)}

.header-right .btn{height:34px;padding:0 13px!important;display:inline-flex;align-items:center;gap:7px}
.header-right .btn-secondary{background:var(--bg-elevated)}
.search-bar{height:36px;max-width:520px}

.view-panel>div:first-child h2,.view-panel>div:first-child h1{font-size:19px;font-weight:700}
.clean-box-header{padding:13px 16px;font-weight:600}
.clean-box,.code-item-card,.forum-post-card,.stat-card,.dev-creator-mini-card{box-shadow:var(--shadow-card);transition:border-color .18s,transform .18s var(--ease-out),box-shadow .18s,background-color .18s}
.code-item-card:hover,.forum-post-card:hover{transform:translateY(-2px);border-color:rgba(242,140,40,.4);box-shadow:var(--shadow-pop)}
.stat-card:hover,.dev-creator-mini-card:hover{border-color:rgba(242,140,40,.35)}
.dashboard-hero-box{background:linear-gradient(135deg,rgba(242,140,40,.12),transparent 55%),var(--bg-surface);border-color:rgba(242,140,40,.22)}
.stat-val{font-weight:700;letter-spacing:-.02em}
.stat-lbl{color:var(--text-muted)}
.nav-badge{border-radius:9999px;font-weight:600}
.btn-secondary i{color:var(--text-muted)}
.btn-secondary:hover i{color:var(--accent)}
.btn-sm,.btn[class*=small]{border-radius:6px}

[class*=empty-state],.empty-box,.no-items{color:var(--text-muted)}
[class*=empty-state] i{color:var(--text-dim);opacity:.8}
[class*=empty-state] h3,[class*=empty-state] h4{color:#fff;font-weight:600}

.academy-progress-fill,.progress-fill,[class*=progress-bar-fill]{background:linear-gradient(90deg,var(--accent-strong),var(--accent))}

.unit-lessons-grid{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:26px 14px;padding:26px 20px}
.unit-lessons-grid>div{width:150px;text-align:center}
.unit-lessons-grid>div>span{line-height:1.35}
.coddy-node{width:60px;height:60px;box-shadow:var(--shadow-card);transition:transform .18s var(--ease-out),border-color .15s,background-color .15s,box-shadow .2s}
.coddy-node:hover{transform:translateY(-2px) scale(1.04)}
.coddy-node.active{box-shadow:0 0 0 5px var(--accent-dim)}
.coddy-node.completed{box-shadow:0 0 0 5px rgba(242,140,40,.12)}
.coddy-node.locked{opacity:.45}
.unit-header-bar{padding:14px 18px}

.category-chip{font-weight:500}
.category-chip.active{box-shadow:0 2px 10px rgba(242,140,40,.3)}

.portfolio-stage-box{background:var(--bg-elevated);background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:18px 18px;border-radius:var(--radius-lg)}
.portfolio-clean-card{background:rgba(44,44,44,.96);border:1px solid var(--border-light);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.studio-toolbar{background:var(--bg-surface)}
.studio-toolbar .btn{border-radius:9999px}

.social-layout{border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-surface)}
.social-layout .social-sidebar{border:0;border-right:1px solid var(--border-color);border-radius:0;background:var(--bg-surface)}
.social-layout .social-chat-area{border:0;border-radius:0;background:var(--bg-main)}
.social-sidebar-tab{font-weight:600;font-size:13px}
.social-sidebar-tab:hover{color:#fff;background:var(--bg-hover)}
.social-list-item{border-radius:8px;margin:2px 8px}
.social-chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.social-chat-empty i{font-size:44px;opacity:.7}
.social-chat-input-row .form-control{border-radius:9999px;padding-inline:16px}
.social-chat-input-row .btn-primary{border-radius:9999px}

.modal-content,.coddy-modal-content{animation:modalIn .22s var(--ease-out)}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.modal-overlay{backdrop-filter:blur(4px)}
.modal-header{padding:16px 20px}
.toast{box-shadow:var(--shadow-pop)}

pre,code{font-family:var(--font-mono)}
.code-box-container{border-radius:var(--radius-md)}
.hljs{background:transparent!important}

@media(max-width:900px){
  .content-area{padding:16px}
  .unit-lessons-grid>div{width:130px}
  .nav-item.active::before{left:-9px}
}
@media(max-width:650px){
  .header-right .btn span{display:none}
  .header-right .btn{padding:0 11px!important}
}
@media(prefers-reduced-motion:reduce){
  .code-item-card:hover,.forum-post-card:hover,.coddy-node:hover{transform:none}
}

#academy-xp-count{background:var(--accent-dim)!important;color:var(--accent)!important;border:1px solid rgba(242,140,40,.35)!important;border-radius:9999px}
.nav-badge[style*="font-weight:700"]{background:var(--accent-dim);color:var(--accent);border-color:rgba(242,140,40,.35)}
.clean-box-header{flex-wrap:wrap;gap:8px}
.clean-box-header .btn{white-space:nowrap}
#codes-grid-container{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))!important}
.code-item-banner{height:130px}

.sidebar{
  width:250px;
  display:flex;
  flex-direction:column;
  background:#181818;
  border-right:1px solid rgba(255,255,255,.075);
  box-shadow:4px 0 18px rgba(0,0,0,.08);
}

.sidebar-header{
  height:72px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.075);
}

.brand-link{
  gap:11px;
  font-size:16px;
  font-weight:700;
  color:#eaeaea;
  letter-spacing:-.015em;
}

.brand-logo{
  width:34px;
  height:34px;
  border-radius:9px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}

.sidebar-collapse-toggle{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  color:#9b9b9b;
  border-radius:8px;
}

.sidebar-collapse-toggle:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}

.sidebar-nav{
  flex:1;
  overflow-y:auto;
  padding:14px 12px 12px;
  gap:3px;
}

.nav-section-title{
  padding:15px 11px 7px;
  color:#838383;
  font-size:10.5px;
  letter-spacing:.09em;
  font-weight:700;
}

.nav-section-title:first-child{
  padding-top:3px;
}

.nav-item{
  position:relative;
  gap:12px;
  padding:7px 11px;
  min-height:42px;
  border:0;
  border-radius:9px;
  color:#9b9b9b;
  font-size:14px;
  font-weight:500;
  transition:
    background-color .16s ease,
    color .16s ease,
    transform .16s cubic-bezier(.22,1,.36,1);
}

.nav-item i{
  flex:none;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:0;
  font-size:16px;
  background:transparent;
  color:#8f8f8f;
  transition:color .16s ease,transform .16s cubic-bezier(.22,1,.36,1);
}

.nav-item:hover{
  background:#272727;
  color:#fff;
  transform:translateX(1px);
}

.nav-item:hover i{
  background:transparent;
  color:#f0a050;
  transform:scale(1.04);
}

.nav-item.active{
  background:#7d5f27;
  border:0;
  color:#fff;
  font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.nav-item.active::before{
  display:none;
}

.nav-item.active i{
  background:transparent;
  color:#fff;
  box-shadow:none;
}

.nav-item.active:hover{
  background:#8a6428;
  transform:none;
}

.nav-item .nav-badge{
  margin-left:auto;
  min-width:20px;
  padding:2px 7px;
  border:0;
  border-radius:999px;
  background:#ef9432;
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:16px;
  text-align:center;
}

.sidebar-footer{
  padding:12px;
  border-top:1px solid rgba(255,255,255,.075);
  background:#181818;
}

.user-mini-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  min-height:48px;
  background:transparent;
  border:0;
  border-radius:9px;
  cursor:pointer;
  transition:background-color .16s ease;
}

.user-mini-card:hover{
  background:rgba(255,255,255,.055);
  border:0;
}

.user-mini-avatar{
  width:34px;
  height:34px;
  flex:none;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:0;
  border-radius:50%;
  background:#353535;
  box-shadow:none;
}

.user-mini-info{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.25;
}

.user-mini-name{
  font-size:13px;
  font-weight:650;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.user-mini-sub{
  font-size:11px;
  color:#8d8d8d;
  font-weight:600;
}

body.sidebar-collapsed .nav-item{
  width:46px;
  min-height:46px;
  padding:0;
  margin:0 auto;
  justify-content:center;
  border-radius:11px;
}

body.sidebar-collapsed .nav-item i{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:#9b9b9b;
}

body.sidebar-collapsed .nav-item:hover i{
  background:rgba(242,140,40,.12);
  color:#f0a050;
}

body.sidebar-collapsed .nav-item.active{
  background:#7d5f27;
}

body.sidebar-collapsed .nav-item.active i{
  background:transparent;
  color:#fff;
}

body.sidebar-collapsed .user-mini-card{
  width:46px;
  height:46px;
  padding:0;
  justify-content:center;
  background:transparent;
  border:0;
}

body.sidebar-collapsed .user-mini-avatar{
  width:36px;
  height:36px;
}

body.sidebar-collapsed .sidebar-footer a{
  display:none!important;
}

#view-home .stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#view-home .stat-card:nth-child(n+3){display:flex}
.stat-card{align-items:center;padding:16px}
.stat-icon{width:42px;height:42px;border-radius:11px;font-size:16px;flex:none;display:grid;place-items:center}
.stat-val{font-size:21px;line-height:1.15}
.stat-lbl{font-size:12px;margin-top:2px}
#view-home .dashboard-hero-box{position:relative;overflow:hidden;padding:22px 24px;display:flex;flex-direction:column;gap:16px;background:radial-gradient(120% 140% at 100% 0,rgba(242,140,40,.22),transparent 55%),var(--bg-surface)}
#view-home .dashboard-hero-box::after{content:"\f121";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:-8px;bottom:-26px;font-size:150px;line-height:1;color:rgba(242,140,40,.08);pointer-events:none}
#view-home .dashboard-hero-box h3{font-size:19px!important;letter-spacing:-.02em}
#view-home .dashboard-hero-box h3 i{color:var(--accent);margin-right:4px}
#view-home .dashboard-hero-box p{font-size:13.5px!important;max-width:560px}
#view-home .dashboard-hero-box .btn{height:36px;padding:0 15px}
#view-home .dashboard-feed-grid{grid-template-columns:minmax(0,1.8fr) minmax(280px,.9fr);gap:20px;align-items:start}
.clean-box-header>span{display:flex;align-items:center;gap:8px;font-size:13.5px}
.clean-box-header>span i{color:var(--accent)}
.clean-box-header .btn[style*="font-size: 11.5px"]{height:28px;padding:0 10px!important;font-size:12px!important}
.clean-box-header a{transition:color .15s}
.clean-box-header a:hover{color:var(--accent)!important}
#view-home .clean-box-body:empty,#view-home .clean-box-body{min-height:90px}
#dashboard-category-bar{margin-bottom:20px}

@media(max-width:1100px){#view-home .dashboard-feed-grid{grid-template-columns:1fr}}
@media(max-width:900px){#view-home .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  #view-home .stat-card{padding:12px}
  #view-home .stat-icon{width:36px;height:36px}
  #view-home .dashboard-hero-box{padding:18px}
  #view-home .dashboard-hero-box::after{font-size:110px}
}
#view-home .dashboard-hero-box{align-items:flex-start;text-align:left;justify-content:flex-start}
#view-home .dashboard-hero-box>div{align-items:flex-start;justify-content:flex-start}
#view-home .clean-box{margin-bottom:0}
@media(min-width:901px){body.sidebar-collapsed .sidebar-header{flex-direction:column;justify-content:center;gap:4px;height:auto;min-height:var(--header-height);padding:10px 0}}

.home-top{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,.9fr);gap:20px;margin-bottom:16px;align-items:stretch}
.home-top .dashboard-hero-box{margin-bottom:0;justify-content:space-between;min-height:176px}
.home-top .home-academy{display:flex;flex-direction:column}
.home-top .home-academy .clean-box-body{flex:1;display:flex;flex-direction:column;justify-content:center}
.hero-eyebrow{display:inline-block;margin-bottom:8px;padding:2px 10px;border-radius:9999px;background:var(--accent-dim);color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap}
#view-home .stat-grid{margin-bottom:18px}
#view-home .dashboard-feed-grid>div{min-width:0}
@media(max-width:1100px){.home-top{grid-template-columns:1fr}.home-top .dashboard-hero-box{min-height:0}}

.hm-banner{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:30px 32px;margin-bottom:16px;border:1px solid rgba(242,140,40,.25);border-radius:14px;background:radial-gradient(90% 160% at 100% 0,rgba(242,140,40,.26),transparent 60%),radial-gradient(60% 120% at 0 100%,rgba(242,150,50,.12),transparent 60%),var(--bg-surface)}
.hm-banner::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px;mask-image:linear-gradient(90deg,transparent 30%,#000);-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);pointer-events:none}
.hm-banner>*{position:relative;z-index:1}
.hm-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:9999px;background:var(--accent-dim);color:var(--accent);font-size:11.5px;font-weight:600;letter-spacing:.03em}
#view-home .hm-banner .hm-title{margin:12px 0 6px;font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.hm-title span{color:var(--accent)}
.hm-sub{max-width:520px;color:var(--text-muted);font-size:14px;margin:0 0 20px}
.hm-banner-actions{display:flex;gap:10px;flex-wrap:wrap}
.hm-banner-actions .btn{height:38px;padding:0 18px;font-size:13.5px}
.hm-progress{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:12px;background:rgba(38,29,18,.7);border:1px solid var(--border-color);backdrop-filter:blur(6px);min-width:260px}
.hm-ring{position:relative;width:88px;height:88px;flex:none}
.hm-ring svg{display:block}
.hm-ring-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:7}
.hm-ring-fg{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease-out)}
.hm-ring-pct{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:700;letter-spacing:-.02em}
.hm-progress-info{display:flex;flex-direction:column;gap:3px}
.hm-progress-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.hm-progress-info strong{font-size:15px;font-weight:600}
.hm-progress-xp{font-size:12.5px;color:var(--accent);font-weight:600}

.hm-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.hm-tile{display:flex;align-items:center;gap:13px;padding:14px 16px;text-align:left;color:inherit;cursor:pointer;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);transition:border-color .18s,transform .18s var(--ease-out),background-color .18s}
.hm-tile:hover{border-color:rgba(242,140,40,.45);background:var(--bg-panel);transform:translateY(-2px)}
.hm-tile-icon{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:var(--accent-dim);color:var(--accent);font-size:16px;transition:background-color .18s,color .18s}
.hm-tile:hover .hm-tile-icon{background:var(--accent);color:#fff}
.hm-tile-text{display:flex;flex-direction:column;min-width:0}
.hm-tile-text strong{font-size:13.5px;font-weight:600}
.hm-tile-text small{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hm-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg)}
.hm-stat{padding:14px 20px;border-left:1px solid var(--border-color)}
.hm-stat:first-child{border-left:0}
.hm-stat-val{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.hm-stat-lbl{font-size:12px;color:var(--text-muted)}

.hm-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(280px,.9fr);gap:24px;align-items:start}
.hm-main,.hm-side{display:flex;flex-direction:column;gap:26px;min-width:0}
.hm-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.hm-section-head h2{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.hm-section-head h2 i{color:var(--accent);font-size:13px}
.hm-link{font-size:12.5px;font-weight:500;color:var(--text-muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .15s}
.hm-link i{font-size:10px;transition:transform .15s}
.hm-link:hover{color:var(--accent)}
.hm-link:hover i{transform:translateX(3px)}
.hm-hint{font-size:11px;color:var(--text-dim);padding:2px 9px;border-radius:9999px;background:var(--bg-surface);border:1px solid var(--border-color)}

.hm-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hm-codes>.code-item-card{margin:0}
.hm-codes>:not(.code-item-card){grid-column:1/-1}
.hm-feed{display:flex;flex-direction:column;gap:12px}
.hm-feed>.forum-post-card{margin:0;padding:16px 18px}
.hm-codes>:only-child:not(.code-item-card),.hm-feed>:only-child:not(.forum-post-card),.hm-list>:only-child:not(.dev-creator-mini-card):not(.hm-lib){border:1px dashed var(--border-light);border-radius:var(--radius-lg);background:rgba(255,255,255,.015)}

.hm-list{display:flex;flex-direction:column;gap:8px}
.hm-list .dev-creator-mini-card{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0}
.hm-list .dev-creator-mini-card::before{content:attr(data-rank);flex:none;width:18px;text-align:center;font-size:12px;font-weight:700;color:var(--text-dim)}
.hm-list .dev-creator-mini-card[data-rank="1"]::before{color:#fbbf24}
.hm-list .dev-creator-mini-card[data-rank="2"]::before{color:#d4d4d4}
.hm-list .dev-creator-mini-card[data-rank="3"]::before{color:#e08f5a}
.hm-list .creator-avatar-thumb{border-radius:50%}
.hm-lib{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);transition:border-color .15s}
.hm-lib:hover{border-color:var(--border-light)}
.hm-lib-icon{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:rgba(251,191,36,.12);color:#fbbf24;font-size:16px}
.hm-lib-text{flex:1;min-width:0;display:flex;flex-direction:column}
.hm-lib-text strong{font-size:12.5px;font-family:var(--font-mono);font-weight:600}
.hm-lib-text small{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-lib .btn{height:28px;padding:0 9px}

@media(max-width:1100px){
  .hm-grid{grid-template-columns:1fr}
  .hm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .hm-banner{grid-template-columns:1fr;padding:22px 20px;gap:20px}
  #view-home .hm-banner .hm-title{font-size:23px}
  .hm-progress{min-width:0}
  .hm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-stat:nth-child(3){border-left:0}
  .hm-stat:nth-child(n+3){border-top:1px solid var(--border-color)}
  .hm-codes{grid-template-columns:1fr}
}
@media(max-width:480px){.hm-tiles{grid-template-columns:1fr}}

.guest-only{display:none!important}
body.guest .guest-only{display:revert!important}
body.guest .btn.guest-only{display:inline-flex!important}
body.guest .member-only{display:none!important}
body.guest .sidebar-join.guest-only{display:flex!important}
body.guest .guest-banner.guest-only{display:flex!important}

body.guest .nav-item[data-view="social"],body.guest .nav-item[data-view="portfolio"],
body.guest [onclick*="new-post-modal"],body.guest [onclick*="upload-code-modal"],body.guest #open-new-post-modal-btn,body.guest [data-requires-auth]{position:relative}
body.guest .nav-item[data-view="social"]::after,body.guest .nav-item[data-view="portfolio"]::after{content:"\f023";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:auto;font-size:10px;color:var(--text-dim)}
body.guest .nav-item[data-view="social"] .nav-badge{display:none!important}
body.guest .btn[onclick*="new-post-modal"]::after,body.guest .btn[onclick*="upload-code-modal"]::after,body.guest #open-new-post-modal-btn::after{content:"\f023";font-family:"Font Awesome 6 Free";font-weight:900;font-size:10px;margin-left:6px;opacity:.7}
body.guest .coddy-node{cursor:not-allowed}
body.guest .coddy-node:not(.locked)::after{content:"\f023";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:-4px;top:-4px;width:20px;height:20px;display:grid;place-items:center;font-size:9px;border-radius:50%;background:var(--bg-panel);border:1px solid var(--border-light);color:var(--text-muted)}
body.guest .coddy-node{position:relative}

.guest-banner{position:relative;overflow:hidden;align-items:center;gap:18px 22px;flex-wrap:wrap;width:calc(100% - 56px);max-width:1280px;margin:14px auto 0;padding:14px 18px;border:1px solid rgba(242,140,40,.3);border-radius:12px;background:linear-gradient(100deg,rgba(242,140,40,.18),rgba(242,140,40,.05) 60%),var(--bg-surface)}
.guest-banner-glow{position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(242,140,40,.3),transparent 65%);pointer-events:none}
.guest-banner>:not(.guest-banner-glow){position:relative}
.guest-banner-main{display:flex;align-items:center;gap:12px;min-width:0}
.guest-banner-icon{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--accent);color:#fff;font-size:16px;box-shadow:0 4px 14px rgba(242,140,40,.4)}
.guest-banner-text{display:flex;flex-direction:column;line-height:1.3}
.guest-banner-text strong{font-size:14.5px;font-weight:700}
.guest-banner-text span{font-size:12px;color:var(--text-muted)}
.guest-banner{flex:none;align-content:center}
.guest-perks{list-style:none;display:flex;flex-wrap:wrap;gap:6px;flex:1 1 380px;min-width:0}
.guest-perks li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;font-size:11.5px;font-weight:500;background:rgba(255,255,255,.06);border:1px solid var(--border-color);color:#e6d9bd}
.guest-perks li i{color:var(--accent);font-size:10.5px}
.guest-banner-actions{display:flex;gap:8px;margin-left:auto}
.guest-banner-actions .btn{height:34px;padding:0 16px}

.sidebar-join{flex-direction:column;gap:2px;margin-bottom:2px;padding:14px;border:1px solid rgba(242,140,40,.3);border-radius:12px;background:linear-gradient(160deg,rgba(242,140,40,.2),rgba(242,140,40,.04)),var(--bg-elevated)}
.sidebar-join strong{font-size:13.5px}
.sidebar-join span{font-size:11.5px;color:var(--text-muted);margin-bottom:10px}
.sidebar-join .btn{width:100%;height:34px;justify-content:center}
body.sidebar-collapsed .sidebar-join{display:none!important}

.auth-gate-card{position:relative}
.auth-gate-close{position:absolute;top:12px;right:12px;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--text-muted);font-size:13px;cursor:pointer;transition:background-color .15s,color .15s}
.auth-gate-close:hover{background:var(--bg-panel);color:#fff}
.auth-gate-guest{display:block;width:100%;margin-top:12px;padding:8px;border:0;background:none;color:var(--text-muted);font:inherit;font-size:12.5px;cursor:pointer;border-radius:8px;transition:color .15s,background-color .15s}
.auth-gate-guest:hover{color:#fff;background:var(--bg-hover)}

@media(max-width:900px){.guest-banner{width:calc(100% - 32px);margin:12px auto 0}.guest-banner-actions{margin-left:0;width:100%}.guest-banner-actions .btn{flex:1}}
@media(max-width:560px){.guest-perks{display:none}}

.hm-banner{padding:26px 30px;margin-bottom:28px}
#view-home .hm-banner .hm-title{margin-top:10px}
.hm-sub{margin-bottom:14px}
.hm-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 18px;font-size:12.5px;color:var(--text-muted)}
.hm-meta b{color:#fff;font-weight:600}
.hm-grid{gap:32px}
.hm-main,.hm-side{gap:34px}
.hm-section-head{margin-bottom:14px}
.hm-section .category-filter-bar{margin:0 0 14px;gap:6px}
.hm-section .category-chip{padding:4px 12px;font-size:12px}
.hm-codes{gap:16px}
.hm-feed{gap:10px}
.guest-banner{padding:10px 16px;margin-top:12px;gap:10px 18px}
.guest-banner-icon{width:32px;height:32px;border-radius:9px;font-size:14px}
.guest-banner-text strong{font-size:13.5px}
.guest-banner-text span{font-size:12px}
.guest-banner-main{flex:1 1 360px}
.guest-banner-actions .btn{height:32px;padding:0 14px}

.sidebar,.main-wrapper{transition-duration:.28s;transition-timing-function:cubic-bezier(.22,1,.36,1)}
body.sidebar-collapsed .sidebar{width:72px;overflow:visible}
body.sidebar-collapsed .sidebar-header{padding:14px 0 10px;border-bottom:0;gap:8px}
body.sidebar-collapsed .brand-logo{width:36px;height:36px}
body.sidebar-collapsed .sidebar-collapse-toggle{width:30px;height:24px;border-radius:7px;background:var(--bg-elevated);border:1px solid var(--border-color)}
body.sidebar-collapsed .sidebar-collapse-toggle:hover{border-color:rgba(242,140,40,.45);color:var(--accent)}
body.sidebar-collapsed .sidebar-nav{overflow:visible;padding:6px 0 10px;align-items:center;gap:6px}
body.sidebar-collapsed .nav-section-title{display:block;width:26px;height:1px;margin:8px 0;padding:0;font-size:0;background:var(--border-color)}
body.sidebar-collapsed .nav-section-title:first-child{display:none}
body.sidebar-collapsed .nav-item{position:relative;width:46px;min-height:46px;padding:0;justify-content:center;border-radius:12px}
body.sidebar-collapsed .nav-item i{width:34px;height:34px;font-size:15px;border-radius:10px}
body.sidebar-collapsed .nav-item.active::before{left:-13px;top:11px;bottom:11px}
body.sidebar-collapsed .nav-item .nav-badge{display:block;position:absolute;top:5px;right:4px;min-width:0;width:9px;height:9px;padding:0;font-size:0;border-radius:50%;border:2px solid var(--bg-surface)}
body.sidebar-collapsed .nav-item[data-tip]::after{content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;margin:0;transform:translate(-4px,-50%);padding:6px 10px;border-radius:8px;background:var(--bg-panel);border:1px solid var(--border-light);box-shadow:var(--shadow-pop);color:#fff;font-family:var(--font-main);font-size:12.5px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s var(--ease-out);z-index:300}
body.sidebar-collapsed .nav-item[data-tip]:hover::after{opacity:1;visibility:visible;transform:translate(0,-50%)}
body.sidebar-collapsed .sidebar-footer{padding:10px 0;display:flex;flex-direction:column;align-items:center}
body.sidebar-collapsed .user-mini-card{width:46px;height:46px;padding:0;justify-content:center}
body.sidebar-collapsed .user-mini-avatar{width:36px;height:36px}
body.guest.sidebar-collapsed .sidebar-join.guest-only{display:flex!important;width:46px;height:46px;padding:0;margin:0;border-radius:12px;align-items:center;justify-content:center}
body.guest.sidebar-collapsed .sidebar-join strong,body.guest.sidebar-collapsed .sidebar-join span{display:none}
body.guest.sidebar-collapsed .sidebar-join .btn{width:34px;height:34px;padding:0;font-size:0;border-radius:10px;position:relative}
body.guest.sidebar-collapsed .sidebar-join .btn::before{content:"\f234";font-family:"Font Awesome 6 Free";font-weight:900;font-size:13px;position:absolute;inset:0;display:grid;place-items:center}
@media(max-width:900px){body.sidebar-collapsed .nav-item[data-tip]::after{display:none}}

.avatar-upload-btn{width:100%;justify-content:center;height:36px}
#stage-avatar-container{cursor:pointer}

#loading-screen{background:var(--bg-main);transition:opacity .4s ease,visibility .4s}
#loading-screen.fade-out{opacity:0;visibility:hidden}
.loader-center{display:flex;flex-direction:column;align-items:center;gap:18px;animation:loaderFade .5s ease both}
@keyframes loaderFade{from{opacity:0}to{opacity:1}}
.loader-logo{width:44px;height:44px;border-radius:11px}
.loader-bar-bg{width:96px;height:2px;overflow:hidden;border-radius:9999px;background:rgba(255,255,255,.08)}
.loader-bar-fill{width:8%;height:100%;border-radius:inherit;background:rgba(255,255,255,.55);transition:width .5s ease;animation:none}
.loader-slow-hint{position:absolute;margin-top:92px;font-size:12px;color:var(--text-dim);opacity:0;visibility:hidden;transition:opacity .4s}
#loading-screen.slow .loader-slow-hint{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.loader-center{animation:none}}

#auth-gate-screen,#reset-password-screen{background:rgba(24,19,12,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.auth-gate-card{width:100%;max-width:420px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;padding:34px 32px 24px;border-radius:20px;background:linear-gradient(180deg,rgba(242,140,40,.09),transparent 34%),var(--bg-surface);border:1px solid var(--border-light);box-shadow:0 30px 80px rgba(0,0,0,.55);text-align:center;animation:authIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes authIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.auth-gate-logo{width:48px;height:48px;margin-bottom:14px;border-radius:12px}
.auth-gate-title{margin-bottom:6px;font-size:22px;letter-spacing:-.02em}
.auth-gate-subtitle{max-width:320px;margin:0 auto 22px;font-size:13px;line-height:1.5;color:var(--text-muted)}
.auth-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:42px;border:1px solid var(--border-light);border-radius:11px;background:#fff;color:#1b1b1b;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:transform .12s,box-shadow .15s}
.auth-google:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.auth-google:active{transform:scale(.99)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--text-dim);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border-color)}
.auth-seg{display:flex;margin-bottom:20px;padding:4px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-elevated)}
.auth-tab{flex:1;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--text-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.auth-tab:hover{color:#fff}
.auth-tab.active{background:var(--bg-panel);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.auth-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-label{font-size:12.5px;font-weight:600;color:#e6d9bd}
.auth-label em{margin-left:6px;font-size:11.5px;font-style:normal;font-weight:500;color:var(--text-dim)}
.auth-input{position:relative;display:flex;align-items:center;height:42px;border:1px solid var(--border-color);border-radius:11px;background:var(--bg-elevated);transition:border-color .15s,box-shadow .15s}
.auth-input:hover{border-color:var(--border-light)}
.auth-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.auth-input>i{width:40px;flex:none;text-align:center;font-size:13px;color:var(--text-dim);transition:color .15s}
.auth-input:focus-within>i{color:var(--accent)}
.auth-input input{flex:1;min-width:0;height:100%;padding:0 12px 0 0;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:14px}
.auth-input input::placeholder{color:var(--text-dim)}
.auth-eye{flex:none;width:40px;height:100%;border:0;background:transparent;color:var(--text-dim);cursor:pointer;transition:color .15s}
.auth-eye:hover{color:#fff}
.auth-hint{font-size:11.5px;line-height:1.45;color:var(--text-dim)}
.auth-note{margin:0;font-size:13px;color:var(--text-muted)}
.auth-rules{display:flex;flex-direction:column;gap:5px;margin:-4px 0 0;padding:0;list-style:none}
.auth-rules li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-dim);transition:color .2s}
.auth-rules li i{font-size:11px;opacity:.35;transition:color .2s,opacity .2s}
.auth-rules li.ok{color:#9be3b3}
.auth-rules li.ok i{color:var(--online);opacity:1}
.auth-check{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--text-muted);cursor:pointer}
.auth-check input{width:15px;height:15px;margin-top:2px;accent-color:var(--accent);cursor:pointer}
.auth-check a{color:var(--accent);text-decoration:none}
.auth-check a:hover{text-decoration:underline}
.auth-turnstile{display:flex;justify-content:center}
.auth-submit{height:44px;border:0;border-radius:11px;background:var(--accent);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 8px 22px rgba(242,140,40,.3);transition:transform .12s,background-color .15s}
.auth-submit:hover{background:#f2a24d;transform:translateY(-1px)}
.auth-submit:active{transform:scale(.99)}
.auth-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.auth-link{align-self:center;font-size:12.5px;color:var(--text-muted);text-decoration:none}
.auth-link:hover{color:var(--accent)}
.auth-gate-guest{margin-top:14px}
@media(max-width:480px){.auth-gate-card{padding:28px 20px 20px;border-radius:18px}}
@media(prefers-reduced-motion:reduce){.auth-gate-card{animation:none}}

.auth-gate-card{max-width:400px;padding:24px 26px 14px}
.auth-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;text-align:left}
.auth-head .auth-gate-logo{flex:none;width:40px;height:40px;margin:0;border-radius:10px}
.auth-head .auth-gate-title{margin:0 0 2px;font-size:18px}
.auth-head .auth-gate-subtitle{max-width:none;margin:0;font-size:12.5px}
.auth-google{height:40px}
.auth-divider{margin:12px 0;font-size:10.5px}
.auth-seg{margin-bottom:14px;padding:3px}
.auth-tab{padding:6px 10px}
.auth-form{gap:10px}
.auth-field{gap:4px}
.auth-label{font-size:12px}
.auth-input{height:38px}
.auth-input input{font-size:13.5px}
.auth-rules{display:none;flex-direction:row;flex-wrap:wrap;gap:5px;margin:-2px 0 0}
.auth-field:focus-within+.auth-rules,.auth-rules.show{display:flex}
.auth-rules li{padding:2px 9px;border:1px solid var(--border-color);border-radius:9999px;background:rgba(255,255,255,.05);font-size:11px}
.auth-rules li.ok{border-color:rgba(63,191,106,.35);background:rgba(63,191,106,.12)}
.auth-check{font-size:12px}
.auth-submit{height:42px}
.auth-gate-guest{margin-top:6px;padding:6px}

.pv-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pv-stat{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:9999px;background:rgba(255,255,255,.06);border:1px solid var(--border-color);font-size:11.5px;font-weight:600;color:#e6d9bd}
.pv-stat i{color:var(--accent);font-size:10.5px}
#stage-xp i{color:#fbbf24}
.portfolio-avatar-container{width:96px;height:96px;margin-bottom:16px;border:0;box-shadow:0 0 0 3px rgba(242,140,40,.6),0 0 0 8px rgba(242,140,40,.14),0 12px 32px rgba(0,0,0,.45)}
.portfolio-clean-subdomain{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;padding:4px 12px;border-radius:9999px;background:rgba(242,140,40,.12);border:1px solid rgba(242,140,40,.28);color:#ffc182;transition:background-color .15s}
.studio-socials .nav-badge{padding:5px 12px;border-radius:9999px;font-size:11.5px!important}
.pv-cta{display:none;width:100%;margin-top:18px;padding:11px 14px;border:0;border-radius:12px;background:var(--accent);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 24px rgba(242,140,40,.35);transition:transform .15s,background-color .15s}
.pv-cta:hover{background:#f2a24d;transform:translateY(-1px)}
.pv-brand{display:inline-flex;align-items:center;gap:9px;color:#fff;font-size:14px;font-weight:700;letter-spacing:-.01em;text-decoration:none}
.pv-brand img{border-radius:6px}
.pv-viewing{flex:1;text-align:center;font-size:12.5px;color:var(--text-muted)}
.pv-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.pv-actions .btn{height:32px;padding:0 12px;font-size:12.5px}
#public-view-hide{width:32px;padding:0!important;justify-content:center}

body.public-mode .portfolio-clean-card{width:min(390px,calc(100vw - 32px));padding:34px 30px 26px;background:linear-gradient(160deg,rgba(53,53,53,.82),rgba(33,33,33,.9));backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);border:1px solid rgba(255,255,255,.14);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09);cursor:default;animation:pvCardIn .75s cubic-bezier(.22,1,.36,1) both}
body.public-mode .portfolio-clean-card>*{animation:pvRise .6s cubic-bezier(.22,1,.36,1) both}
body.public-mode .portfolio-clean-card>*:nth-child(1){animation-delay:.12s}
body.public-mode .portfolio-clean-card>*:nth-child(2){animation-delay:.18s}
body.public-mode .portfolio-clean-card>*:nth-child(3){animation-delay:.24s}
body.public-mode .portfolio-clean-card>*:nth-child(4){animation-delay:.30s}
body.public-mode .portfolio-clean-card>*:nth-child(5){animation-delay:.36s}
body.public-mode .portfolio-clean-card>*:nth-child(n+6){animation-delay:.42s}
@keyframes pvCardIn{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes pvRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.public-mode .portfolio-avatar-container{cursor:default;width:104px;height:104px}
body.public-mode .portfolio-clean-name{margin-bottom:6px;font-size:25px;letter-spacing:-.02em}
body.public-mode .portfolio-clean-subdomain{cursor:pointer}
body.public-mode .portfolio-clean-subdomain::after{content:"\f0c5";font-family:"Font Awesome 6 Free";font-weight:400;font-size:10.5px;opacity:.7}
body.public-mode .portfolio-clean-subdomain:hover{background:rgba(242,140,40,.2)}
body.public-mode .portfolio-clean-bio{margin-bottom:18px;font-size:14px;color:#c7c7c7}
body.public-mode .portfolio-audio-widget{border-radius:14px;background:rgba(255,255,255,.05)}
body.public-mode.guest .pv-cta{display:flex}
body.public-mode.guest .guest-banner.guest-only{display:none!important}
body.public-mode #public-view-banner{top:14px;width:min(920px,calc(100vw - 28px));max-width:none;justify-content:space-between;gap:14px;padding:8px 10px 8px 14px;overflow:visible;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(35,35,35,.72);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 12px 40px rgba(0,0,0,.35)}
@media(max-width:640px){.pv-viewing{display:none}.pv-actions .btn span{display:none}.pv-actions #public-view-copy{padding:0 10px}}
@media(prefers-reduced-motion:reduce){body.public-mode .portfolio-clean-card,body.public-mode .portfolio-clean-card>*{animation:none}}

iframe{color-scheme:normal}
body.public-mode .content-area>#view-portfolio{max-width:none;margin-inline:0}
/* ===== HOME DECLUTTER ===== */

#view-home{
  max-width:1280px;
}

#view-home .content-area{
  padding-top:20px;
}

/* Remove the redundant dashboard-style quick links */
#view-home .hm-tiles{
  display:none;
}

/* Remove the oversized statistics strip */
#view-home .hm-stats{
  display:none;
}

/* Compact the main hero */
#view-home .hm-banner{
  grid-template-columns:minmax(0,1fr) auto;
  gap:22px;
  padding:22px 24px;
  margin-bottom:20px;
  border-radius:12px;
  border-color:rgba(242,140,40,.18);
  background:
    radial-gradient(75% 150% at 100% 0,rgba(242,140,40,.16),transparent 60%),
    var(--bg-surface);
}

#view-home .hm-banner::after{
  opacity:.35;
}

#view-home .hm-eyebrow{
  padding:2px 9px;
  font-size:10.5px;
}

#view-home .hm-banner .hm-title{
  margin:9px 0 5px;
  font-size:23px;
  line-height:1.2;
}

#view-home .hm-sub{
  max-width:600px;
  margin-bottom:14px;
  font-size:13px;
}

#view-home .hm-banner-actions{
  gap:7px;
}

#view-home .hm-banner-actions .btn{
  height:34px;
  padding:0 14px;
  font-size:12.5px;
}

/* Make the progress element much quieter */
#view-home .hm-progress{
  min-width:220px;
  gap:12px;
  padding:12px 15px;
  border-radius:10px;
  background:rgba(24,19,12,.5);
}

#view-home .hm-ring{
  width:64px;
  height:64px;
}

#view-home .hm-ring-bg,
#view-home .hm-ring-fg{
  stroke-width:6;
}

#view-home .hm-ring-pct{
  font-size:15px;
}

#view-home .hm-progress-label{
  font-size:9.5px;
}

#view-home .hm-progress-info strong{
  font-size:13.5px;
}

#view-home .hm-progress-xp{
  font-size:11.5px;
}

/* Main home layout */
#view-home .hm-grid{
  grid-template-columns:minmax(0,1.75fr) minmax(260px,.75fr);
  gap:20px;
}

#view-home .hm-main,
#view-home .hm-side{
  gap:20px;
}

/* Section headers */
#view-home .hm-section-head{
  margin-bottom:9px;
}

#view-home .hm-section-head h2{
  font-size:14px;
  gap:7px;
}

#view-home .hm-link{
  font-size:12px;
}

/* Code cards */
#view-home .hm-codes{
  gap:10px;
}

#view-home .hm-codes .code-item-card{
  border-radius:9px;
}

#view-home .hm-codes .code-item-content{
  padding:13px 14px;
}

#view-home .hm-codes .code-item-title{
  font-size:14px;
}

#view-home .hm-codes .code-item-desc{
  font-size:12px;
  margin-bottom:8px;
}

#view-home .hm-codes .code-item-banner{
  height:115px;
}

/* Feed cards */
#view-home .hm-feed{
  gap:8px;
}

#view-home .hm-feed>.forum-post-card{
  padding:13px 15px;
  border-radius:9px;
}

/* Side lists */
#view-home .hm-list{
  gap:6px;
}

#view-home .hm-list .dev-creator-mini-card{
  padding:8px 10px;
  border-radius:8px;
}

/* Library rows */
#view-home .hm-lib{
  padding:8px 10px;
  border-radius:8px;
}

#view-home .hm-lib-icon{
  width:30px;
  height:30px;
  border-radius:8px;
  font-size:14px;
}

#view-home .hm-lib-text strong{
  font-size:12px;
}

#view-home .hm-lib-text small{
  font-size:10.5px;
}

/* Reduce generic card spacing on Home only */
#view-home .clean-box{
  margin-bottom:0;
}

#view-home .clean-box-header{
  padding:11px 13px;
}

#view-home .clean-box-body{
  min-height:0;
  padding:13px;
}

/* Less visual noise from borders */
#view-home .hm-tile,
#view-home .hm-lib,
#view-home .hm-list .dev-creator-mini-card,
#view-home .hm-feed>.forum-post-card,
#view-home .hm-codes .code-item-card{
  box-shadow:none;
}

/* Desktop */
@media(min-width:1101px){
  #view-home .hm-codes{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Tablet */
@media(max-width:900px){
  #view-home .hm-banner{
    grid-template-columns:1fr;
  }

  #view-home .hm-progress{
    width:max-content;
    max-width:100%;
  }

  #view-home .hm-grid{
    grid-template-columns:1fr;
  }
}

/* Phone */
@media(max-width:600px){
  #view-home .hm-banner{
    padding:18px;
    margin-bottom:16px;
  }

  #view-home .hm-banner .hm-title{
    font-size:20px;
  }

  #view-home .hm-sub{
    font-size:12.5px;
  }

  #view-home .hm-banner-actions .btn{
    height:32px;
    padding:0 12px;
  }

  #view-home .hm-codes{
    grid-template-columns:1fr;
  }

  #view-home .hm-progress{
    width:100%;
  }
}

/* =====================================================================
   HOME HERO - decluttered: no card, just the welcome text
   ===================================================================== */
#view-home .hm-hero{
  position:relative;
  padding:6px 2px 22px;
  margin-bottom:24px;
  border-bottom:1px solid var(--border-color);
}
#view-home .hm-hero .hm-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:3px 11px;
  border-radius:9999px;
  background:rgba(255,161,77,.12);
  color:var(--accent);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.03em;
}
#view-home .hm-hero .hm-title{
  margin:14px 0 7px;
  font-size:30px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.12;
}
#view-home .hm-hero .hm-title span{color:var(--accent)}
#view-home .hm-hero .hm-sub{
  max-width:560px;
  margin:0 0 16px;
  color:var(--text-muted);
  font-size:14px;
}
#view-home .hm-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 20px;
  margin:0;
  font-size:13px;
  color:var(--text-muted);
}
#view-home .hm-meta b{color:#fff;font-weight:600}
#view-home .hm-hero .hm-banner-actions{display:flex;gap:9px;flex-wrap:wrap}
#view-home .hm-hero .hm-banner-actions .btn{height:38px;padding:0 18px;font-size:13px}

/* =====================================================================
   SHARED FILTERS - cleaner, consistent, horizontally scrollable
   ===================================================================== */
.category-filter-bar{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:16px;
  padding-bottom:4px;
  overflow-x:auto;
  flex-wrap:nowrap;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.category-filter-bar::-webkit-scrollbar{display:none}
.category-chip{
  flex:none;
  white-space:nowrap;
  background:var(--bg-surface);
  border:1px solid var(--border-color);
  color:var(--text-muted);
  border-radius:9999px;
  padding:6px 13px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.category-chip:hover{background:#1e1e1e;border-color:var(--border-light);color:#e7e7e7;transform:none}
.category-chip.active{background:#ffe2bd;color:#091321;border-color:#ffe2bd}
.mod-upload-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.mod-upload-row{grid-template-columns:1fr}}

/* Forum category tabs - same pill language as the rest of the app */
.forum-categories{
  display:flex;
  gap:7px;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:4px;
  max-width:100%;
}
.forum-categories::-webkit-scrollbar{display:none}
.forum-categories .category-tab{
  flex:none;
  white-space:nowrap;
  height:auto;
  background:var(--bg-surface);
  border:1px solid var(--border-color);
  color:var(--text-muted);
  border-radius:9999px;
  padding:6px 13px;
  font-size:12px;
  font-weight:600;
}
.forum-categories .category-tab:hover{background:#1e1e1e;border-color:var(--border-light);color:#e7e7e7}
.forum-categories .category-tab.active{background:#ffe2bd;color:#091321;border-color:#ffe2bd}

/* =====================================================================
   MODS PAGE
   ===================================================================== */
.mods-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.mods-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 4px;
}
.mods-title i{color:var(--accent);font-size:19px}
.mods-sub{margin:0;font-size:13px;color:var(--text-muted)}
.mods-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.mods-toolbar .category-filter-bar{margin-bottom:0;flex:1;min-width:0}
.mods-toolbar-right{display:flex;align-items:center;gap:8px;flex:none}
.mods-search{position:relative;display:flex;align-items:center}
.mods-search i{position:absolute;left:11px;font-size:12px;color:var(--text-dim);pointer-events:none}
.mods-search input{
  width:190px;
  height:36px;
  padding:0 12px 0 30px;
  background:var(--bg-surface);
  border:1px solid var(--border-color);
  border-radius:7px;
  color:var(--text-main);
  font-size:12.5px;
  outline:none;
}
.mods-search input:focus{border-color:#b26a1f;box-shadow:0 0 0 3px rgba(255,161,77,.08)}
.mods-toolbar-right .form-select{height:36px;width:auto;font-size:12.5px;padding:0 30px 0 12px}
.mods-toolbar-right .dd{width:auto;flex:none;min-width:132px}
.mods-toolbar-right .dd-btn{height:36px}

/* Sidebar profile ⋮ menu */
.sidebar-footer{position:relative}
.user-mini-card{position:relative}
.user-mini-menu-btn{
  margin-left:auto;flex:none;width:28px;height:28px;display:grid;place-items:center;
  border:0;border-radius:7px;background:transparent;color:var(--text-dim);
  font-size:13px;cursor:pointer;transition:background .12s,color .12s;
}
.user-mini-menu-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.user-menu{
  position:absolute;left:10px;right:10px;bottom:calc(100% + 6px);z-index:300;
  background:var(--bg-panel);border:1px solid var(--border-light);border-radius:12px;
  padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .18s;
}
.user-menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease,visibility 0s}
.user-menu button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:transparent;border:0;color:var(--text-main);font-size:13px;font-weight:500;
  padding:9px 11px;border-radius:8px;cursor:pointer;transition:background .12s;
}
.user-menu button:hover{background:rgba(255,255,255,.06)}
.user-menu button i{width:16px;text-align:center;color:var(--text-dim);font-size:13px}
.user-menu button:hover i{color:var(--accent)}
.user-menu button b{margin-left:auto;font-size:11px;color:var(--text-dim);font-weight:600}
.user-menu button.danger,.user-menu button.danger i{color:#ff8f95}
.user-menu button.danger:hover{background:rgba(224,66,74,.12)}

/* Genre filter bars wrap so every genre is visible - no cut-off scrolling */
.category-filter-bar{flex-wrap:wrap;overflow:visible;}
#view-home .category-filter-bar,
#view-mods .category-filter-bar{flex-wrap:wrap;overflow:visible;}
.mods-toolbar{align-items:flex-start;}
.mods-toolbar .category-filter-bar{flex:1 1 100%;margin-bottom:10px;}
.mods-toolbar-right{margin-left:auto;}

/* =====================================================================
   BLOCK SPLITTER TOOL
   ===================================================================== */
#view-toolblocks{max-width:980px}
.sp-input{min-height:170px;resize:vertical;font-family:var(--font-mono);font-size:12.5px}
.sp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sp-block{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;margin-bottom:10px;overflow:hidden}
.sp-block-head{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--border-color)}
.sp-block-name{font-size:13px;font-weight:700;color:#fff}
.sp-block-count{margin-left:auto;font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}
.sp-meter{height:3px;background:var(--bg-main)}
.sp-meter-fill{height:100%;background:var(--accent);border-radius:0 2px 2px 0;transition:width .25s}
.sp-meter-fill.warn{background:#fbbf24}
.sp-meter-fill.hot{background:#f47067}
.sp-block pre{margin:0;padding:13px 15px;overflow:auto;max-height:260px;font-family:var(--font-mono);font-size:12px;line-height:1.55}
.sp-block pre code{font-family:inherit;background:transparent;padding:0}

/* =====================================================================
   SHOP BUILDER TOOL
   ===================================================================== */
#view-toolshop{max-width:1180px}
.sb-lay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:start}
@media(max-width:980px){.sb-lay{grid-template-columns:1fr}}
.sb-cfgrow{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.sb-lbl{display:block;font-size:11.5px;font-weight:600;color:var(--text-muted);margin:10px 0 5px}
.sb-lbl:first-child{margin-top:0}
.sb-key{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);font-weight:400;margin-left:6px}
#sb-cats{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
#sb-cats:empty{display:none}
.sb-cat-row{
  display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;cursor:pointer;
  background:var(--bg-surface);border:1px solid var(--border-color);
  font-size:13px;color:var(--text-muted);transition:border-color .12s,color .12s;
}
.sb-cat-row:hover{color:#fff;border-color:var(--border-light)}
.sb-cat-row.active{border-color:var(--accent);color:#fff;background:rgba(255,161,77,.08)}
.sb-cat-row i{font-size:12px;color:var(--text-dim)}
.sb-cat-row.active i{color:var(--accent)}
.sb-cat-row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sb-cat-row em{font-style:normal;font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}
.sb-cat-row button{background:none;border:0;color:var(--text-dim);cursor:pointer;font-size:12px;padding:2px 5px;border-radius:5px}
.sb-cat-row button:hover{color:#ff8f95;background:rgba(224,66,74,.12)}
#sb-cat-form .form-control{margin-bottom:2px}
#sb-cat-form textarea{min-height:56px;resize:vertical}
#sb-items{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
#sb-items:empty{display:none}
.ut-item.sb-item{grid-template-columns:auto minmax(0,1fr)}
.sb-thumb{width:42px;height:42px;border-radius:7px;background:var(--bg-main);border:1px solid var(--border-color);flex:none;object-fit:contain;image-rendering:pixelated}
.sb-thumb-empty{display:grid;place-items:center;color:var(--text-dim);font-size:16px}
.sb-name{font-weight:600}
.sb-item textarea.ut-txt{font-size:12px}
.sb-canbuy{user-select:none;-webkit-user-select:none}

/* Bloxd-style shop preview */
#sb-prev{margin-bottom:14px}
.sb-shop-empty{border:1px dashed var(--border-light);border-radius:10px;padding:30px 16px;text-align:center;font-size:12.5px;color:var(--text-dim)}
.sb-shop{border:1px solid var(--border-color);border-radius:10px;overflow:hidden}
.sb-shop-cat{background:#241d12;color:#fff;font-size:15px;font-weight:700;padding:10px 16px;letter-spacing:.01em}
.sb-shop-desc{background:#151515;color:#d9c9a8;font-size:13px;padding:9px 16px;border-top:1px solid rgba(255,255,255,.06)}
.sb-shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;background:#100d08}
@media(max-width:560px){.sb-shop-grid{grid-template-columns:1fr}}
.sb-card{
  display:flex;gap:12px;align-items:center;background:#2b7cd4;border-radius:6px;
  padding:13px 14px;min-height:104px;box-shadow:-4px 5px 0 rgba(0,0,0,.35);
}
.sb-card-ic{flex:none;width:46px;height:46px;display:grid;place-items:center}
.sb-card-ic img{width:46px;height:46px;object-fit:contain;image-rendering:pixelated}
.sb-card-ic i{font-size:30px;color:#e7dabf}
.sb-card-mid{flex:1;min-width:0}
.sb-card-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-price{color:#ffd94d;font-weight:700;font-size:13px;white-space:nowrap}
.sb-price i{font-size:12px}
.sb-card-desc{font-size:12px;color:#e3d3b3;line-height:1.5;overflow-wrap:anywhere}
.sb-buy{
  flex:none;background:#5b8dd0;border:0;color:#fff;font-size:13px;font-weight:600;
  border-radius:5px;padding:8px 16px;cursor:pointer;box-shadow:-2px 3px 0 rgba(0,0,0,.3);
}
.sb-buy:active{transform:translate(-1px,2px);box-shadow:none}
.sb-out-box{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;padding:14px}
.sb-out{
  background:var(--bg-main);border:1px solid var(--border-color);border-radius:7px;padding:12px;
  font-family:var(--font-mono);font-size:11.5px;color:#4ade80;word-break:break-all;white-space:pre-wrap;
  max-height:260px;overflow-y:auto;line-height:1.55;user-select:text;-webkit-user-select:text;
}

/* Icon picker modal */
.sb-picker-bar{display:flex;gap:8px;margin-bottom:10px}
.sb-picker-bar .mods-search input{height:36px;width:100%}
.sb-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;overflow-y:auto;min-height:120px;scrollbar-width:thin}
.sb-pick{
  background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;padding:8px 6px;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-muted);
  transition:border-color .12s,color .12s;
}
.sb-pick:hover{border-color:var(--accent);color:#fff}
.sb-pick img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
.sb-pick i{font-size:24px}
.sb-pick span{font-size:10px;text-align:center;word-break:break-word;line-height:1.3;max-height:26px;overflow:hidden}
.tools-more{text-align:center;font-size:12.5px;color:var(--text-dim);margin:18px 0 6px}
.sec-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);font-weight:700;margin-bottom:9px}

/* =====================================================================
   SONG CONVERTER TOOL
   ===================================================================== */
#view-toolsong{max-width:980px}
.st-upload{border:2px dashed var(--border-light);border-radius:12px;padding:46px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.st-upload:hover,.st-upload.drag{border-color:var(--accent);background:rgba(255,161,77,.06)}
.st-upload>i{font-size:32px;color:var(--accent);margin-bottom:10px;display:block}
.st-upload h3{font-size:15px;font-weight:600;margin:0 0 5px;color:#fff}
.st-upload p{font-size:12px;color:var(--text-muted);margin:0}
.st-ftypes{display:flex;gap:5px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.st-ftypes span{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:5px;padding:2px 9px;font-size:11px;font-family:var(--font-mono);color:var(--text-muted)}
.st-prog{display:none;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;padding:16px 18px;margin-top:14px}
.st-prog.show{display:block}
.st-prog-lbl{font-size:12px;color:var(--text-muted);font-family:var(--font-mono);margin-bottom:8px}
.st-prog-track{height:3px;background:var(--bg-main);border-radius:2px;overflow:hidden}
.st-prog-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .1s ease;width:0}
.st-ed{display:none;margin-top:14px}
.st-ed.show{display:block}
.st-wave-box{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;padding:14px;margin-bottom:14px}
.st-wave-hd{font-size:11px;font-family:var(--font-mono);color:var(--text-muted);display:flex;justify-content:space-between;margin-bottom:8px}
.st-wave-hd span span{color:var(--accent)}
#st-wave{width:100%;height:72px;display:block;border-radius:6px;cursor:crosshair;background:#141414}
.st-ctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:600px){.st-ctrl-grid{grid-template-columns:1fr}}
.st-ctrl{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;padding:13px 14px}
.st-ctrl-lbl{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-muted);margin-bottom:9px}
.st-ctrl-lbl b{color:#fff;font-family:var(--font-mono);font-size:11px;background:var(--bg-main);padding:2px 8px;border-radius:5px;font-weight:400}
#view-toolsong input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;outline:none;cursor:pointer;background:linear-gradient(to right,var(--accent) var(--p,0%),var(--bg-main) var(--p,0%))}
#view-toolsong input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 3px rgba(255,193,138,.18)}
#view-toolsong input[type=range]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:#fff;cursor:pointer}
.st-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.st-stat{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:9px;padding:10px 14px;min-width:130px;flex:1}
.st-stat-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:3px}
.st-stat-val{font-family:var(--font-mono);font-size:13px;color:#fff}
.st-char-track{height:2px;background:var(--bg-main);border-radius:1px;overflow:hidden;margin-top:6px}
.st-char-fill{height:100%;background:var(--accent);border-radius:1px;transition:width .3s}
.st-char-fill.warn{background:#fbbf24}
.st-char-fill.hot{background:#f47067}
.st-out-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;gap:10px;flex-wrap:wrap}
.st-out-bar>span{font-size:11px;font-family:var(--font-mono);color:var(--text-dim)}
.st-out{width:100%;height:150px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;padding:12px;color:#4ade80;font-family:var(--font-mono);font-size:11px;resize:vertical;outline:none;line-height:1.5}
.st-out:focus{border-color:var(--accent)}
.st-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* =====================================================================
   UI CREATOR TOOL
   ===================================================================== */
#view-toolui{max-width:1100px}
.ut-lay{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start}
@media(max-width:920px){.ut-lay{grid-template-columns:1fr}}
.ut-cfgrow{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.ut-cfgrow .form-select{width:auto}
.ut-items{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;max-height:440px;overflow-y:auto;padding-right:2px;scrollbar-width:thin}
.ut-item{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:9px;padding:11px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:start}
.ut-type-tog{display:flex;border:1px solid var(--border-color);border-radius:6px;overflow:hidden}
.ut-type-tog button{padding:4px 9px;background:transparent;border:0;color:var(--text-dim);font-size:10.5px;font-family:var(--font-mono);cursor:pointer}
.ut-type-tog button.on{background:rgba(255,161,77,.16);color:var(--accent)}
.ut-item-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.ut-txt{background:var(--bg-main);border:1px solid var(--border-color);border-radius:6px;padding:5px 9px;color:#fff;font-size:12.5px;outline:none;width:100%}
.ut-txt:focus{border-color:var(--accent)}
.ut-item-row{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.ut-c-wrap{display:flex;align-items:center;gap:5px;background:var(--bg-main);border:1px solid var(--border-color);border-radius:6px;padding:4px 7px;flex:1;min-width:130px;position:relative}
.ut-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.2);cursor:pointer;flex:none}
.ut-c-native{position:absolute;left:0;top:0;opacity:0;width:1px;height:1px;pointer-events:none}
.ut-c-text{background:transparent;border:0;color:#fff;font-family:var(--font-mono);font-size:11.5px;outline:none;flex:1;min-width:0;width:80px}
.ut-sz-wrap{display:flex;align-items:center;background:var(--bg-main);border:1px solid var(--border-color);border-radius:6px;overflow:hidden}
.ut-sz-num{background:transparent;border:0;color:#fff;font-family:var(--font-mono);font-size:11.5px;outline:none;width:40px;padding:4px 6px;text-align:center}
.ut-sz-unit{display:flex;border-left:1px solid var(--border-color)}
.ut-sz-unit button{background:transparent;border:0;border-left:1px solid var(--border-color);color:var(--text-dim);font-size:10px;font-family:var(--font-mono);padding:4px 7px;cursor:pointer}
.ut-sz-unit button:first-child{border-left:0}
.ut-sz-unit button.on{background:rgba(255,161,77,.16);color:var(--accent)}
.ut-bold{display:flex;align-items:center;background:var(--bg-main);border:1px solid var(--border-color);border-radius:6px;padding:4px 10px;cursor:pointer;color:var(--text-dim);font-size:12px;font-weight:700;font-family:var(--font-mono);user-select:none;-webkit-user-select:none}
.ut-bold.on{background:rgba(255,161,77,.16);border-color:rgba(255,161,77,.35);color:var(--accent)}
.ut-item-acts{display:flex;flex-direction:column;gap:4px}
.ut-ic{width:26px;height:26px;background:transparent;border:1px solid var(--border-color);border-radius:5px;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px}
.ut-ic:hover{background:var(--bg-main);color:#fff}
.ut-ic.del:hover{border-color:rgba(240,112,103,.45);color:#f47067}
.ut-ic.mv:hover{border-color:rgba(255,193,138,.4);color:var(--accent)}
.ut-item-acts span{display:block;height:30px}
.ut-add{display:flex;gap:7px;flex-wrap:wrap}
.ut-prev-box{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;padding:16px;margin-bottom:14px;min-height:90px}
.ut-prev-inner{background:rgba(0,0,0,.45);border-radius:8px;padding:14px 18px;display:inline-block;min-width:160px;line-height:1.6;word-break:break-word;max-width:100%}
.ut-prev-empty{color:var(--text-dim);font-size:12px}
.ut-out-box{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;padding:14px}
.ut-out-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.ut-out-head span{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);font-weight:700}
.ut-out{background:var(--bg-main);border:1px solid var(--border-color);border-radius:7px;padding:12px;font-family:var(--font-mono);font-size:11.5px;color:#4ade80;word-break:break-all;white-space:pre-wrap;max-height:190px;overflow-y:auto;line-height:1.5;user-select:text;-webkit-user-select:text}

/* =====================================================================
   CODE ENGINE - folder-linked IDE
   ===================================================================== */
#view-engine{max-width:1280px}
.eng-head-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.eng-notice{
  display:flex;align-items:center;gap:10px;font-size:13px;color:#fbbf24;
  background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.3);
  border-radius:10px;padding:11px 15px;margin-bottom:14px;
}
.eng-notice[hidden]{display:none}
.eng-layout{
  display:grid;grid-template-columns:48px 264px minmax(0,1fr);gap:0;
  border:1px solid var(--border-color);border-radius:12px;overflow:hidden;
  background:var(--bg-surface);min-height:min(640px,calc(100vh - 260px));
}
/* Activity bar */
.eng-activity{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;background:rgba(0,0,0,.28);border-right:1px solid var(--border-color)}
.eng-act{
  width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:8px;
  background:transparent;color:var(--text-dim);font-size:16px;cursor:pointer;position:relative;
  transition:color .12s,background .12s;
}
.eng-act:hover{color:#fff;background:rgba(255,255,255,.06)}
.eng-act.active{color:#fff}
.eng-act.active::before{content:"";position:absolute;left:-6px;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--accent)}
.eng-act-spacer{flex:1}
.eng-side{display:flex;flex-direction:column;min-width:0;background:rgba(0,0,0,.14)}
.eng-side>div{display:flex;flex-direction:column;min-height:0;flex:1}
.eng-side>div[hidden]{display:none}
.eng-crumb{
  display:flex;align-items:center;gap:6px;padding:5px 14px;font-size:11.5px;color:var(--text-dim);
  border-bottom:1px solid var(--border-color);background:rgba(0,0,0,.18);
  overflow:hidden;white-space:nowrap;
}
.eng-crumb:empty{display:none}
.eng-crumb-sep{opacity:.5}
.eng-crumb-file{color:var(--text-main)}
.eng-status{justify-content:space-between}
.eng-status .eng-st-l,.eng-status .eng-st-r{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eng-status .eng-st-r{font-size:11px}
/* Search panel */
.eng-search-box{padding:10px 12px 6px}
.eng-search-box .form-control{height:34px;font-size:12.5px}
#eng-search-results{overflow-y:auto;flex:1;padding:0 6px 10px;scrollbar-width:thin}
.eng-search-count{font-size:11px;color:var(--text-dim);padding:6px 8px}
.eng-search-file{font-size:11.5px;font-weight:700;color:var(--text-main);padding:8px 8px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eng-search-hit{
  display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:transparent;border:0;
  color:var(--text-muted);font-size:11.5px;padding:4px 8px;border-radius:6px;cursor:pointer;
}
.eng-search-hit:hover{background:rgba(255,161,77,.12);color:#fff}
.eng-search-hit span{font-family:var(--font-mono);color:var(--text-dim);flex:none;font-size:10.5px}
.eng-search-hit code{font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
/* Command palette */
.eng-palette-box{
  width:min(560px,92vw);align-self:flex-start;margin-top:11vh;
  background:var(--bg-panel);border:1px solid var(--border-light);border-radius:12px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:authIn .22s cubic-bezier(.22,1,.36,1);
}
#eng-palette-input{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--border-color);
  color:#fff;font-size:14px;padding:13px 16px;outline:none;
}
#eng-palette-list{max-height:320px;overflow-y:auto;padding:6px;scrollbar-width:thin}
.eng-pal-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;
  color:var(--text-main);font-size:13px;padding:8px 10px;border-radius:7px;cursor:pointer;
}
.eng-pal-item:hover{background:rgba(255,161,77,.14)}
.eng-pal-item i{color:var(--text-dim);font-size:12px;flex:none}
.eng-pal-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eng-pal-item em{font-style:normal;font-size:11px;color:var(--text-dim)}
.eng-pal-empty{padding:18px;text-align:center;font-size:12.5px;color:var(--text-dim)}
/* Settings menu */
.eng-settings-menu{position:absolute;left:54px;bottom:8px;top:auto;right:auto;min-width:220px;z-index:60}
.eng-settings-menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease,visibility 0s}
.eng-set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;font-size:12.5px;color:var(--text-main)}
.eng-set-ctl{display:flex;align-items:center;gap:8px}
.eng-set-ctl button{width:24px;height:24px;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-main);color:#fff;cursor:pointer;font-size:13px;line-height:1}
.eng-set-ctl button:hover{border-color:var(--accent)}
.eng-set-ctl b{font-size:12px;min-width:20px;text-align:center}
.eng-set-toggle{display:block;width:calc(100% - 0px);margin:2px 0;text-align:left;background:transparent;border:0;color:var(--text-main);font-size:12.5px;padding:7px 12px;border-radius:7px;cursor:pointer}
.eng-set-toggle:hover{background:rgba(255,161,77,.12)}
.eng-set-toggle b{color:var(--accent)}
@media(max-width:860px){
  .eng-layout{grid-template-columns:1fr}
  .eng-activity{flex-direction:row;border-right:0;border-bottom:1px solid var(--border-color);padding:6px 8px}
  .eng-act.active::before{left:7px;right:7px;top:auto;bottom:-7px;width:auto;height:2px}
  .eng-settings-menu{left:8px;bottom:auto;top:52px}
  .eng-side{border-bottom:1px solid var(--border-color);max-height:230px}
}
.eng-tree-head{padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border-color)}
#eng-tree-body{overflow-y:auto;flex:1;padding:6px;scrollbar-width:thin;scrollbar-color:#525252 transparent}
#eng-tree-body::-webkit-scrollbar{width:8px}
#eng-tree-body::-webkit-scrollbar-thumb{background:#2c4767;border-radius:99px}
.eng-tree-empty{padding:18px 12px;font-size:12px;color:var(--text-dim);text-align:center}
.eng-dir,.eng-file{
  display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;
  font-size:12.5px;color:var(--text-muted);cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;user-select:none;-webkit-user-select:none;
}
.eng-dir:hover,.eng-file:hover{background:rgba(255,161,77,.1);color:#fff}
.eng-file.active{background:rgba(255,161,77,.16);color:#fff}
.eng-dir i{font-size:11px;color:var(--text-dim);flex:none}
.eng-chev{font-size:9px!important;transition:transform .13s}
.eng-dir.open .eng-chev{transform:rotate(90deg)}
.eng-file i{font-size:12px;flex:none}
.eng-file i.ts{color:#60a5fa}
.eng-file i.js{color:#fbbf24}
.eng-file span,.eng-dir span{overflow:hidden;text-overflow:ellipsis}
.eng-main{display:flex;flex-direction:column;min-width:0}
.eng-tabs{display:flex;align-items:stretch;gap:2px;overflow-x:auto;border-bottom:1px solid var(--border-color);background:rgba(0,0,0,.22);scrollbar-width:none;min-height:36px}
.eng-tabs::-webkit-scrollbar{display:none}
.eng-tabs:empty{display:none}
.eng-tab{
  display:flex;align-items:center;gap:7px;padding:0 8px 0 12px;height:36px;flex:none;
  font-size:12px;color:var(--text-dim);cursor:pointer;border-right:1px solid var(--border-color);
  max-width:190px;user-select:none;-webkit-user-select:none;
}
.eng-tab:hover{color:var(--text-main)}
.eng-tab.active{background:var(--bg-surface);color:#fff;box-shadow:inset 0 2px 0 var(--accent)}
.eng-tab i{font-size:11px}
.eng-tab i.ts{color:#60a5fa}
.eng-tab i.js{color:#fbbf24}
.eng-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eng-dirty{width:7px;height:7px;border-radius:50%;background:#fbbf24;flex:none;font-style:normal}
.eng-tab button{background:none;border:0;color:var(--text-dim);cursor:pointer;font-size:11px;padding:4px;border-radius:5px;display:grid;place-items:center}
.eng-tab button:hover{color:#fff;background:rgba(255,255,255,.08)}
.eng-editor{position:relative;flex:1;min-height:420px;background:#1e1e1e}
.eng-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-dim);font-size:13px;text-align:center;padding:20px}
.eng-empty i{font-size:32px;opacity:.6}
.eng-empty p{margin:0;max-width:340px;line-height:1.6}
.eng-status{
  display:flex;align-items:center;gap:8px;padding:6px 14px;font-size:11.5px;color:var(--text-dim);
  border-top:1px solid var(--border-color);background:rgba(0,0,0,.22);font-family:var(--font-mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.eng-status.warn{color:#fbbf24}
.eng-menu-wrap{position:relative}
.eng-menu{min-width:240px;right:0;left:auto}
.eng-menu-wrap.open .eng-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .22s cubic-bezier(.2,.9,.3,1.2),visibility 0s}
.eng-menu-wrap.open .eng-menu .dd-option{opacity:1;transform:none;transition:opacity .16s ease calc(var(--i)*18ms),transform .16s ease calc(var(--i)*18ms),color .12s ease}
.eng-menu .dd-option:hover{background:rgba(255,161,77,.12);color:#fff}

/* =====================================================================
   TOASTS v2 - icon, accent glow, countdown bar, slide-in
   ===================================================================== */
#toast-container{bottom:22px;right:22px;gap:9px;z-index:100000}
.toast-v2{
  position:relative;overflow:hidden;max-width:min(400px,calc(100vw - 44px));
  align-items:flex-start;text-align:left;
  background:rgba(18,18,18,.94)!important;
  border:1px solid var(--border-color)!important;border-radius:12px!important;
  padding:12px 15px 14px!important;
  box-shadow:0 16px 44px rgba(0,0,0,.55)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:toastIn .3s cubic-bezier(.2,.9,.3,1.25)!important;
  cursor:pointer;
}
.toast-v2>i{font-size:16px;margin-top:1px;flex:none}
.toast-v2>span{line-height:1.45;color:#f1f1f1}
.toast-v2.success{border-color:rgba(63,185,80,.55)!important;box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 22px rgba(63,185,80,.12)!important}
.toast-v2.success>i{color:#3fb950}
.toast-v2.error{border-color:rgba(240,112,103,.55)!important;box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 22px rgba(240,112,103,.12)!important}
.toast-v2.error>i{color:#f47067}
.toast-v2.info{border-color:rgba(255,193,138,.45)!important;box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 22px rgba(255,193,138,.1)!important}
.toast-v2.info>i{color:#ffa14d}
.toast-v2 .toast-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left;animation-name:toastBar;animation-timing-function:linear;animation-fill-mode:forwards;background:currentColor;opacity:.7}
.toast-v2.success .toast-bar{color:#3fb950}
.toast-v2.error .toast-bar{color:#f47067}
.toast-v2.info .toast-bar{color:#ffa14d}
.toast-v2.paused .toast-bar{animation-play-state:paused}
.toast-v2.out{opacity:0;transform:translateX(24px);transition:opacity .24s,transform .24s}
@keyframes toastIn{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.toast-v2{animation:none}.toast-v2 .toast-bar{display:none}}

/* =====================================================================
   GET MODAL - one copy button per part
   ===================================================================== */
.get-mod-content{max-width:520px;max-height:86vh;overflow-y:auto}
.get-mod-sub{font-size:12.5px;color:var(--text-muted);line-height:1.55;margin:0 0 14px}
.get-part{display:flex;align-items:center;gap:12px;background:var(--bg-main);border:1px solid var(--border-color);border-radius:9px;padding:10px 12px;margin-bottom:8px}
.get-part-n{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(255,161,77,.14);color:var(--accent);font-size:12px;font-weight:800}
.get-part-info{flex:1;min-width:0}
.get-part-info strong{display:block;font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.get-part-info small{font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}
.get-part .btn{flex:none}

/* =====================================================================
   MOD DETAIL + EDITOR PAGES
   ===================================================================== */
#view-mod,#view-modedit{max-width:1080px}
.mod-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-muted);text-decoration:none;margin:2px 0 16px}
.mod-back:hover{color:var(--accent)}
.mod-back i{font-size:12px}
.mod-detail-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:26px;align-items:start;margin-bottom:26px}
.mod-detail-cover{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border-color);background:#121212;min-height:240px}
.mod-detail-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.mod-detail-cover>.media-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-dim);font-size:12px}
.mod-detail-info{min-width:0}
.mod-detail-badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.mod-type-badge{font-size:11px;font-weight:700;background:#b98a2f;color:#141414;border-radius:6px;padding:3px 10px}
.mod-ver-badge{font-size:11px;font-weight:600;font-family:var(--font-mono);color:var(--text-muted);border:1px solid var(--border-color);border-radius:6px;padding:2px 9px}
.mod-detail-title{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#fff;margin:0 0 10px;overflow-wrap:anywhere}
.mod-detail-author{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-muted);margin-bottom:10px}
.mod-detail-author b{color:#fff}
.mod-detail-stats{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:13px;color:var(--text-muted);margin-bottom:14px}
.mod-detail-stats b{color:#fff;font-weight:600}
.mod-detail-stats .dot{color:var(--text-dim)}
.mod-stat-rating{color:#fbbf24;font-weight:600}
.mod-stat-rating b{color:#fbbf24}
.mod-detail-votes{display:flex;gap:8px;margin-bottom:16px}
.vote-btn{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;
  border-radius:9px;border:1px solid var(--border-color);background:var(--bg-surface);
  color:var(--text-muted);font-size:13px;font-weight:700;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.vote-btn:hover{border-color:var(--border-light);color:#fff}
.vote-btn.active{background:rgba(255,161,77,.16);border-color:var(--accent);color:var(--accent)}
.vote-btn.down.active{background:rgba(224,66,74,.13);border-color:#e0424a;color:#ff8f95}
.mod-detail-actions{display:flex;gap:9px;flex-wrap:wrap}
.mod-detail-actions .btn{height:40px;padding:0 20px;font-size:13.5px}

.mod-section{margin-bottom:26px}
.mod-section>h2{font-size:17px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:-.01em}
.mod-hint-inline{font-size:11.5px;font-weight:500;color:var(--text-dim)}
.mod-muted{font-size:13px;color:var(--text-dim);margin:0}
.mod-overview{font-size:14px;line-height:1.65;color:#cbcbcb;white-space:normal;overflow-wrap:anywhere}
.mod-tag-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.mod-tag{
  font-size:12px;font-weight:600;color:var(--text-muted);
  background:var(--bg-surface);border:1px solid var(--border-color);
  border-radius:9999px;padding:4px 13px;
}
.mod-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mod-shots img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:9px;border:1px solid var(--border-color);cursor:zoom-in;transition:border-color .13s,transform .13s}
.mod-shots img:hover{border-color:var(--accent);transform:scale(1.015)}
.shot-lightbox-inner{position:relative;max-width:min(920px,92vw)}
.shot-lightbox-inner img{width:100%;max-height:82vh;object-fit:contain;border-radius:10px;border:1px solid var(--border-color);background:#000}
.shot-lightbox-inner .modal-close{position:absolute;top:-12px;right:-12px;background:var(--bg-panel);border:1px solid var(--border-color)}

.mod-code-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.mod-code-col{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:9px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.mod-code-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-top:1px solid var(--border-color);font-size:12px;font-weight:600}
.mod-code-col pre{margin:0;padding:14px;border-top:1px solid var(--border-color);overflow:auto;flex:1;min-height:120px;max-height:380px;font-family:var(--font-mono);font-size:12.5px;line-height:1.55}
.mod-code-col pre code{font-family:inherit;background:transparent;padding:0}

.mod-rating-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;padding:18px 20px}
.mod-rating-avg strong{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1}
.mod-rating-avg small{display:block;font-size:11.5px;color:var(--text-dim);margin-top:6px}
.stars{font-size:13px;letter-spacing:2px;margin-top:8px;display:inline-block}
.stars i{color:#454545}
.stars i.on{color:#fbbf24}
.mod-rating-mine>span{font-size:12px;font-weight:600;color:var(--text-muted)}
.rate-stars{display:flex;gap:4px;margin:8px 0}
.rate-star{background:none;border:0;font-size:22px;color:#454545;cursor:pointer;padding:2px;transition:color .1s,transform .1s}
.rate-star:hover{transform:scale(1.15)}
.rate-star.on{color:#fbbf24}
.mod-rating-mine small{font-size:11.5px;color:var(--text-dim)}
.mod-rating-mine small a{color:var(--accent)}

.mod-comments-n{font-size:13px;color:var(--text-dim);font-weight:600}
.mod-comments-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.mod-comment{display:flex;gap:10px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:9px;padding:11px 13px}
.mod-comment-main{flex:1;min-width:0}
.mod-comment-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.mod-comment-head strong{font-size:12.5px;color:#fff}
.mod-comment-head span{font-size:11px;color:var(--text-dim)}
.mod-comment-del{margin-left:auto;background:none;border:0;color:var(--text-dim);cursor:pointer;font-size:12px;padding:2px 4px}
.mod-comment-del:hover{color:#ff8f95}
.mod-comment-main p{margin:0;font-size:13px;color:#cbcbcb;line-height:1.55;overflow-wrap:anywhere}
.mod-comment-form{display:flex;flex-direction:column;gap:8px}
.mod-comment-form textarea{min-height:74px;resize:vertical}
.mod-comment-form .btn{align-self:flex-end}

/* Editor (mirrors the detail layout, everything editable) */
.em-head{margin-top:16px}
.em-cover{cursor:pointer;min-height:260px}
.em-cover>span:first-child{position:absolute;inset:0}
.em-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.em-cover-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-dim);font-size:13px}
.em-cover-empty i{font-size:26px}
.em-cover-change{
  position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:#fff;background:rgba(20,15,9,.66);
  border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:7px 12px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;
}
.em-title-input{font-size:24px!important;font-weight:800!important;letter-spacing:-.02em;height:52px!important;margin-bottom:12px}
.em-row{display:grid;grid-template-columns:1fr 130px;gap:10px;margin-bottom:10px}
.em-row .dd,.em-row .form-control{width:100%}
.mod-tags-box{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  background:var(--bg-surface);border:1px solid var(--border-color);border-radius:7px;
  padding:6px 8px;min-height:38px;cursor:text;
}
.mod-tags-box:focus-within{border-color:#b26a1f;box-shadow:0 0 0 3px rgba(255,161,77,.08)}
.mod-tags-box input{flex:1;min-width:140px;background:transparent;border:0;outline:none;color:var(--text-main);font-size:12.5px;height:24px}
.mod-tag-pill{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  color:var(--accent);background:rgba(255,161,77,.12);border:1px solid rgba(255,161,77,.25);
  border-radius:9999px;padding:3px 6px 3px 11px;
}
.mod-tag-pill i{cursor:pointer;font-size:10px;color:var(--text-dim);width:18px;height:18px;display:grid;place-items:center;border-radius:50%}
.mod-tag-pill i:hover{color:#ff8f95;background:rgba(224,66,74,.15)}
.mod-screens-box{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px;margin-bottom:10px}
.mod-screens-box:empty{display:none}
.em-screen{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--border-color);aspect-ratio:16/10;background:var(--bg-main)}
.em-screen img{width:100%;height:100%;object-fit:cover;display:block}
.em-screen button{
  position:absolute;top:5px;right:5px;width:24px;height:24px;display:grid;place-items:center;
  border-radius:6px;border:1px solid rgba(255,255,255,.2);background:rgba(20,15,9,.7);
  color:#fff;font-size:11px;cursor:pointer;
}
.em-screen button:hover{background:rgba(224,66,74,.85)}
.em-actions{display:flex;justify-content:flex-end;gap:9px;margin:6px 0 30px}
.em-actions .btn{height:40px;padding:0 22px;font-size:13.5px}
#em-description{min-height:110px;resize:vertical}

@media(max-width:860px){
  .mod-detail-head{grid-template-columns:1fr}
  .mod-detail-cover{min-height:200px}
  .mod-detail-title{font-size:24px}
  .mod-shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mod-rating-grid{grid-template-columns:1fr;gap:16px}
}

/* =====================================================================
   MOD CARDS - text left, image right, actions overlaid on the image
   ===================================================================== */
#codes-grid-container.mods-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
/* Horizontal cards, 3 per row: text column left (~0.8 of the image), square
   1:1 image flush right. Outer card corners are rounded; the image itself
   sits flush with no rounding. Whole card is clickable. */
.mod-card{display:flex;flex-direction:row;align-items:stretch;min-height:172px;transition:border-color .13s,transform .13s,box-shadow .13s}
.mod-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.4),0 0 22px -8px var(--accent)}
.mod-card-main{flex:0 0 44.44%;min-width:0;display:flex;flex-direction:column;padding:13px 14px;align-self:stretch}
.mod-card-main .code-item-meta{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:0}
.mod-card-main .code-item-author{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.2}
.mod-you{font-size:9px;font-weight:800;letter-spacing:.05em;background:var(--accent);color:#141414;border-radius:4px;padding:2px 5px}
.mod-card-main .code-item-title{font-size:15px;margin:8px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mod-card-main .code-item-desc{
  margin-bottom:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:12px;line-height:1.5;color:var(--text-muted);
}
.mod-card-main .mod-card-tags{margin:auto 0 0;padding:10px 0 0}
.mod-card-media{position:relative;flex:0 0 55.56%;aspect-ratio:1/1;background:#1a1a1a;border-left:1px solid var(--border-color);overflow:hidden;align-self:flex-start}
.mod-card-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.mod-card:hover .mod-card-media>img{transform:scale(1.04)}
.mod-card-media>.media-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-dim);font-size:12px;background:#1a1a1a}
@media(max-width:1023px){
  #codes-grid-container.mods-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:639px){
  #codes-grid-container.mods-grid{grid-template-columns:1fr!important}
}

/* Genre badge: small amber badge with dark text, matching the Mod badge */
.cat-badge{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.02em;
  padding:2px 8px;border-radius:5px;border:0;background:#b98a2f;color:#141414;
  white-space:nowrap;line-height:1.5;box-shadow:none;
}
.mod-tag{
  display:inline-block;font-size:11px;font-weight:700;
  padding:2px 10px;border-radius:5px;border:0;background:#b98a2f;color:#141414;line-height:1.5;
  box-shadow:none;
}
.mod-tag-pill{
  font-size:11px;padding:2px 5px 2px 9px;
  background:#b98a2f!important;border-color:#b98a2f!important;color:#141414!important;
}
.mod-tag-pill i{width:16px;height:16px;font-size:9px;color:#141414!important}
.mod-tag-pill i:hover{background:rgba(0,0,0,.18)!important;color:#141414!important}
.mod-card-main .mod-card-tags{margin:auto 0 0;padding:10px 0 0}
@media(max-width:640px){
  #codes-grid-container.mods-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important}
}

/* Genre picker (+ button dropdown in the mod editor) */
.genre-picker{position:relative;flex:none}
.genre-plus{
  width:26px;height:26px;border-radius:50%;border:1px dashed var(--border-light);
  background:transparent;color:var(--accent);cursor:pointer;display:grid;place-items:center;font-size:11px;
  transition:background .12s,border-color .12s;
}
.genre-plus:hover{background:rgba(255,161,77,.12);border-style:solid}
.genre-menu{min-width:238px;padding:6px}
.genre-search{
  display:flex;align-items:center;gap:8px;padding:7px 10px;margin-bottom:4px;
  background:var(--bg-main);border:1px solid var(--border-color);border-radius:8px;
}
.genre-search i{font-size:11px;color:var(--text-dim);flex:none}
.genre-search input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--text-main);font-size:12.5px}
.genre-list{
  max-height:224px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#525252 transparent;-webkit-overflow-scrolling:touch;touch-action:pan-y;
}
.genre-list::-webkit-scrollbar{width:8px}
.genre-list::-webkit-scrollbar-track{background:transparent}
.genre-list::-webkit-scrollbar-thumb{background:#2c4767;border-radius:99px}
.genre-opt{opacity:1!important;transform:none!important}
.genre-picker.open .genre-opt{transition:opacity .14s ease calc(var(--i)*14ms),transform .14s ease calc(var(--i)*14ms),color .12s ease}
.genre-menu .genre-opt:hover{background:rgba(255,161,77,.13);color:#fff}
.genre-menu .genre-opt.selected{color:#fff}
.genre-empty{padding:14px;text-align:center;font-size:12px;color:var(--text-dim)}
.genre-picker.open .genre-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .22s cubic-bezier(.2,.9,.3,1.2),visibility 0s}
.genre-picker.open .genre-menu .dd-option{opacity:1;transform:none;transition:opacity .16s ease calc(var(--i)*16ms),transform .16s ease calc(var(--i)*16ms),color .12s ease}
.genre-menu .dd-option:hover{background:rgba(255,161,77,.12);color:#fff}
.genre-dot{width:10px;height:10px;border-radius:3px;flex:none;box-shadow:-1px 2px 3px rgba(0,0,0,.4)}
.eng-imp-hint{font-size:10.5px;color:var(--text-dim);margin-left:auto;flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mod-card-actions{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:2}
.mod-act{
  width:33px;height:33px;display:grid;place-items:center;
  border-radius:9px;border:1px solid rgba(255,255,255,.18);
  background:rgba(20,15,9,.62);color:#fff;font-size:13px;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .13s,border-color .13s,transform .13s;
}
.mod-act:hover{background:rgba(20,15,9,.88);border-color:rgba(255,255,255,.32)}
.mod-act:active{transform:scale(.94)}
.mod-act-copy{background:rgba(255,161,77,.78);border-color:rgba(255,193,138,.5)}
.mod-act-copy:hover{background:rgba(255,161,77,.95);border-color:#ffc98a}
.mod-act-del:hover{background:rgba(224,66,74,.85);border-color:#ff8f95}


/* =====================================================================
   TOP DEVELOPERS - category tabs
   ===================================================================== */
.topdev-tabs{display:flex;gap:5px;flex:none}
.topdev-tab{
  background:var(--bg-surface);
  border:1px solid var(--border-color);
  color:var(--text-dim);
  border-radius:9999px;
  padding:3px 11px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.topdev-tab:hover{color:var(--text-main);border-color:var(--border-light)}
.topdev-tab.active{background:#ffe2bd;color:#091321;border-color:#ffe2bd}

/* =====================================================================
   APP FEEL - no accidental text selection while clicking around.
   Form fields stay fully selectable/editable, and code is copied via
   the Copy buttons (which is also what keeps mod downloads gated).
   ===================================================================== */
html,body{user-select:none;-webkit-user-select:none}
input,textarea,select,[contenteditable="true"]{user-select:text;-webkit-user-select:text}
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

/* =====================================================================
   PORTFOLIO - autoplay volume, custom links, accent, mods strip
   ===================================================================== */
.stage-volume{
  position:absolute;left:12px;bottom:12px;z-index:6;
  display:flex;align-items:center;gap:8px;
  background:rgba(20,15,9,.66);border:1px solid rgba(255,255,255,.16);
  border-radius:9999px;padding:6px 12px 6px 10px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;font-size:12px;
}
.stage-volume input[type=range]{width:90px;accent-color:var(--accent);cursor:pointer}
.studio-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 12px}
.studio-links:empty{display:none}
.studio-links a{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--text-main);background:rgba(255,255,255,.05);
  border:1px solid var(--border-color);border-radius:9999px;padding:4px 12px;
  text-decoration:none;transition:border-color .12s,background .12s;
}
.studio-links a:hover{border-color:var(--accent);background:rgba(255,161,77,.1)}
.studio-links a i{font-size:10px;color:var(--text-dim)}
#studio-card[data-accent]{border-color:var(--pf-accent);}
#studio-card[data-accent]:not(.no-glow){box-shadow:0 0 46px -10px var(--pf-accent);}
#studio-card[data-accent] .portfolio-avatar-container{box-shadow:0 0 0 3px var(--pf-accent),0 0 26px -4px var(--pf-accent),0 12px 32px rgba(0,0,0,.45);}
#studio-card[data-accent] .portfolio-clean-subdomain{background:transparent;border-color:var(--pf-accent);color:var(--pf-accent);}
#studio-card[data-accent] .pv-stat i{color:var(--pf-accent);}
#studio-card[data-accent] .studio-socials .nav-badge i{color:var(--pf-accent);}
#studio-card[data-accent] .studio-socials .nav-badge:hover{border-color:var(--pf-accent);}
#studio-card[data-accent] .studio-links a{border-color:var(--pf-accent);}
#studio-card[data-accent] .studio-links a i{color:var(--pf-accent);}
#studio-card[data-accent] .studio-links a:hover{background:transparent;box-shadow:0 0 18px -6px var(--pf-accent);}
#studio-card[data-accent] .portfolio-audio-widget{border:1px solid var(--pf-accent);}
#studio-card[data-accent] #stage-play-btn{background:var(--pf-accent);border-color:var(--pf-accent);color:#141414}
.pv-link-row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:6px;margin-bottom:6px}
.pv-link-row .form-control{height:32px;font-size:12px;padding:0 9px}
.pv-link-row button{
  width:30px;height:30px;border-radius:6px;border:1px solid var(--border-color);
  background:transparent;color:var(--text-dim);cursor:pointer;
}
.pv-link-row button:hover{background:rgba(224,66,74,.15);border-color:rgba(224,66,74,.4);color:#ff8f95}

/* =====================================================================
   LIGHT THEME - html[data-theme="light"], dark is default
   ===================================================================== */
html[data-theme="light"]{color-scheme:light;
  --bg-main:#f1efe9;--bg-surface:#ffffff;--bg-card:#ffffff;--bg-panel:#faf8f3;--bg-elevated:#ece8dd;
  --border-color:#ddd3c0;--border-light:#c6bba2;
  --text-main:#211d18;--text-muted:#6f675c;--text-dim:#97897a;
  --accent:#d97a1e;--accent-strong:#c56f14;--accent-dim:rgba(217,122,30,.12);
}
html[data-theme="light"] body{background:#f1efe9;color:#211d18}
html[data-theme="light"] .bg-wallpaper{background:radial-gradient(circle at 12% 0%,#e7ddc9 0,transparent 42%),radial-gradient(circle at 95% 100%,#e2d5bd 0,transparent 44%),#f1efe9}
html[data-theme="light"] .bg-overlay{background:rgba(241,239,233,.5)}
html[data-theme="light"] .sidebar,html[data-theme="light"] .sidebar-footer{background:#faf8f3;border-color:#ddd3c0}
html[data-theme="light"] .sidebar-header{border-color:#ddd3c0}
html[data-theme="light"] .nav-item{color:#6f675c}
html[data-theme="light"] .nav-item i{color:#97897a}
html[data-theme="light"] .nav-item:hover{background:#efe9db;color:#211d18}
html[data-theme="light"] .nav-item.active{background:#f6e3c8;border-color:#e3b96f;color:#211d18}
html[data-theme="light"] .nav-item span{color:inherit}
html[data-theme="light"] .nav-item i{color:inherit;opacity:.75}
html[data-theme="light"] .nav-item.active i{color:#c56f14}
html[data-theme="light"] .nav-section-title{color:#97897a}
html[data-theme="light"] .app-header{background:#faf8f3;border-color:#ddd3c0}
html[data-theme="light"] .search-bar{background:#fff;border-color:#ddd3c0}
html[data-theme="light"] .clean-box,html[data-theme="light"] .forum-post-card,
html[data-theme="light"] .code-item-card,html[data-theme="light"] .roadmap-unit,
html[data-theme="light"] .doc-card,html[data-theme="light"] .tool-card,
html[data-theme="light"] .dev-creator-mini-card,html[data-theme="light"] .pv-widget,
html[data-theme="light"] .mod-card,html[data-theme="light"] .stat-card,
html[data-theme="light"] .academy-progress-bar,html[data-theme="light"] .studio-toolbar,
html[data-theme="light"] #public-view-banner,html[data-theme="light"] .studio-pop{
  background:#fff;border-color:#ddd3c0;box-shadow:0 8px 24px rgba(90,70,40,.08);
}
html[data-theme="light"] .form-control,html[data-theme="light"] .form-input,
html[data-theme="light"] .form-textarea,html[data-theme="light"] .form-select{
  background:#fff;border-color:#d8d0bd;color:#211d18;
}
html[data-theme="light"] .form-control::placeholder,html[data-theme="light"] .form-textarea::placeholder{color:#a8a094}
html[data-theme="light"] .btn-secondary{background:#f4f1e9;border-color:#d8d0bd;color:#4a443c}
html[data-theme="light"] .btn-secondary:hover{background:#ece5d3;border-color:#c6bba2}
html[data-theme="light"] .btn-primary{background:#ffcf99;border-color:#ffcf99;color:#3a2200}
html[data-theme="light"] .btn-primary:hover{background:#e8892a;border-color:#e8892a;color:#fff}
html[data-theme="light"] .category-chip{background:#fff;border-color:#ddd3c0;color:#6f675c}
html[data-theme="light"] .category-chip:hover{border-color:#c6bba2;color:#211d18;background:#faf6ec}
html[data-theme="light"] .category-chip.active{background:#3a2200;border-color:#3a2200;color:#ffe2bd}
html[data-theme="light"] .topdev-tab{background:#fff;border-color:#ddd3c0;color:#97897a}
html[data-theme="light"] .topdev-tab.active{background:#3a2200;border-color:#3a2200;color:#ffe2bd}
html[data-theme="light"] .nav-badge{background:#f4f1e9;border-color:#ddd3c0;color:#6f675c}
html[data-theme="light"] .code-item-title,html[data-theme="light"] .mod-detail-title,
html[data-theme="light"] .tool-card h3,html[data-theme="light"] .tools-title,
html[data-theme="light"] .mod-section>h2,html[data-theme="light"] .pv-widget-head h3,
html[data-theme="light"] .modal-header span,html[data-theme="light"] .doc-card-head h3,
html[data-theme="light"] #view-home .hm-title,html[data-theme="light"] .hm-section-head h2,
html[data-theme="light"] .mods-title,html[data-theme="light"] .studio-mods-head h3,
html[data-theme="light"] .portfolio-clean-name{color:#211d18}
html[data-theme="light"] .code-item-desc,html[data-theme="light"] .hm-sub,
html[data-theme="light"] .tool-card p,html[data-theme="light"] .tools-sub,
html[data-theme="light"] .mods-sub,html[data-theme="light"] .mod-overview,
html[data-theme="light"] .mod-comment-main p{color:#5c554b}
html[data-theme="light"] .modal-content,html[data-theme="light"] .auth-gate-card,
html[data-theme="light"] .dd-menu,html[data-theme="light"] .user-menu,
html[data-theme="light"] .genre-menu,html[data-theme="light"] .eng-menu{
  background:#fffdf8;border-color:#d8d0bd;box-shadow:0 24px 60px rgba(90,70,40,.18);
}
html[data-theme="light"] .modal-overlay{background:rgba(60,50,35,.45)}
html[data-theme="light"] #auth-gate-screen,html[data-theme="light"] #reset-password-screen{background:rgba(60,50,35,.5)}
html[data-theme="light"] .doc-body{color:#4a443c}
html[data-theme="light"] .doc-body h4{color:#211d18}
html[data-theme="light"] .doc-body code{background:#f4f1e9;color:#b25a09}
html[data-theme="light"] .doc-body table{font-size:12.5px}
html[data-theme="light"] .doc-body th,html[data-theme="light"] .doc-body td{border-color:#ddd3c0}
html[data-theme="light"] .doc-body th{background:#f4f1e9}
html[data-theme="light"] .doc-meta{color:#6f675c}
html[data-theme="light"] .acct-side{background:#f4f1e9;border-color:#ddd3c0}
html[data-theme="light"] .acct-tab{color:#6f675c}
html[data-theme="light"] .acct-tab:hover{background:#ece5d3;color:#211d18}
html[data-theme="light"] .acct-tab.active{background:#f6e3c8;border-color:#e3b96f;color:#8a5a12}
html[data-theme="light"] .acct-tab.active i{color:#8a5a12}
html[data-theme="light"] .acct-row{border-color:#e5ddc9}
html[data-theme="light"] .set-group{background:#faf8f3;border-color:#ddd3c0}
html[data-theme="light"] .studio-pop{background:#fffdf8;border-color:#d8d0bd}
html[data-theme="light"] .toast-v2{background:rgba(255,253,248,.96)!important}
html[data-theme="light"] .toast-v2>span{color:#211d18}
html[data-theme="light"] .portfolio-clean-card{background:rgba(255,255,255,.62);border:1px solid rgba(60,50,35,.14)}
html[data-theme="light"] .portfolio-clean-subdomain{color:#8a5a12}
html[data-theme="light"] .pv-stat{background:rgba(60,50,35,.06);border-color:#ddd3c0;color:#4a443c}
html[data-theme="light"] .studio-links a{color:#211d18;background:rgba(60,50,35,.05)}
html[data-theme="light"] .eng-layout{background:#fff;border-color:#ddd3c0}
html[data-theme="light"] .eng-tree{background:#faf8f3}
html[data-theme="light"] .eng-tabs{background:#f4f1e9}
html[data-theme="light"] .eng-status{background:#f4f1e9;color:#6f675c}
html[data-theme="light"] .docs-item-card,html[data-theme="light"] .docs-asset-row,
html[data-theme="light"] .docs-update,html[data-theme="light"] .docs-chip,
html[data-theme="light"] .mod-comment,html[data-theme="light"] .sp-block,
html[data-theme="light"] .st-ctrl,html[data-theme="light"] .st-stat,
html[data-theme="light"] .st-wave-box,html[data-theme="light"] .ut-item,
html[data-theme="light"] .ut-prev-box,html[data-theme="light"] .ut-out-box,
html[data-theme="light"] .sb-card,html[data-theme="light"] .sb-out-box,
html[data-theme="light"] .sb-pick,html[data-theme="light"] .pv-wedit,
html[data-theme="light"] .mod-code-col,html[data-theme="light"] details.mod-code{
  background:#fff;border-color:#ddd3c0;
}
html[data-theme="light"] .ut-out,html[data-theme="light"] .sb-out{background:#2b2620}
html[data-theme="light"] .st-out{background:#2b2620}
html[data-theme="light"] .hm-meta b{color:#211d18}
html[data-theme="light"] .hm-link{color:#6f675c}
html[data-theme="light"] .mod-detail-stats b,html[data-theme="light"] .mod-detail-author b{color:#211d18}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c9c0ab}
/* Appearance segmented control */
.seg{display:flex;background:var(--bg-main);border:1px solid var(--border-color);border-radius:9px;padding:3px;gap:3px}
.seg button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  background:transparent;border:0;color:var(--text-muted);font-size:12.5px;font-weight:600;
  padding:8px 10px;border-radius:6px;cursor:pointer;transition:background .13s,color .13s;
}
.seg button i{font-size:12px}
.seg button.on{background:rgba(255,161,77,.16);color:var(--accent)}

/* Profile card is glass, not a solid theme color */
.portfolio-clean-card{
  background:rgba(18,18,18,.55);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.12);
}
body.public-mode .portfolio-clean-card{
  background:rgba(18,18,18,.55);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.12);
}

/* =====================================================================
   CONFIGURATION SURFACES - pop-in animations + polished settings
   ===================================================================== */
@keyframes studioPopIn{
  0%{opacity:0;transform:scale(.9) translateY(12px);}
  60%{opacity:1;transform:scale(1.015) translateY(-1px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
.studio-pop{animation:studioPopIn .26s cubic-bezier(.2,.9,.3,1.2);}
.modal-overlay.active .modal-content{animation:studioPopIn .28s cubic-bezier(.2,.9,.3,1.15);}
@media(prefers-reduced-motion:reduce){
  .studio-pop,.modal-overlay.active .modal-content{animation:none;}
}
.studio-pop{
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(255,161,77,.07),transparent 30%),var(--bg-surface)!important;
  border:1px solid var(--border-light)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.55)!important;
  padding:16px!important;
}
.studio-pop-title{font-size:14px!important;padding-bottom:10px!important;margin-bottom:12px!important;}
.studio-pop-title>span>i{color:var(--accent);margin-right:2px;}
.studio-pop .form-group{margin-bottom:12px;}
.studio-pop .form-group>label{font-size:11.5px;font-weight:700;color:var(--text-main);margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.studio-pop .form-group>label em{font-style:normal;font-weight:500;color:var(--text-dim);font-size:10.5px;}
.studio-pop .avatar-edit-hint{font-size:11px;line-height:1.5;}
/* Settings accordion groups */
.set-group{
  border:1px solid var(--border-color);border-radius:10px;margin-bottom:8px;
  background:rgba(255,255,255,.015);overflow:hidden;
}
.set-group summary{
  list-style:none;display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:10px 12px;font-size:13px;font-weight:700;color:var(--text-main);
}
.set-group summary::-webkit-details-marker{display:none}
.set-group summary::after{
  content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:10px;
  color:var(--text-dim);margin-left:auto;transition:transform .18s;
}
.set-group[open] summary::after{transform:rotate(180deg)}
.set-group summary>i{color:var(--accent);font-size:13px}
.set-group summary em{font-style:normal;font-weight:500;color:var(--text-dim);font-size:10.5px;margin-left:4px}
.set-group summary:hover{color:#fff}
.set-group-body{padding:2px 12px 12px;}
.set-group-body .form-group{margin-bottom:10px;}
.set-group-body .form-group:last-child{margin-bottom:2px;}
/* Wide account settings with sidebar categories */
.acct-modal{max-width:860px!important;max-height:90vh;display:flex;flex-direction:column;overflow:hidden!important;}
.acct-modal .modal-header{flex:none;}
.acct-body{flex:1;min-height:0;display:grid;grid-template-columns:200px minmax(0,1fr);}
.acct-side{
  border-right:1px solid var(--border-color);padding:12px 10px;
  display:flex;flex-direction:column;gap:3px;background:rgba(0,0,0,.18);
}
.acct-tab{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;color:var(--text-muted);
  font-size:13px;font-weight:600;padding:9px 12px;border-radius:9px;cursor:pointer;
  transition:background .13s,color .13s,border-color .13s;
}
.acct-tab i{width:16px;text-align:center;font-size:13px;color:var(--text-dim)}
.acct-tab:hover{background:rgba(255,255,255,.05);color:#fff}
.acct-tab.active{background:rgba(255,161,77,.12);border-color:rgba(255,161,77,.3);color:var(--accent)}
.acct-tab.active i{color:var(--accent)}
.acct-tab.danger,.acct-tab.danger i{color:#ff8f95}
.acct-tab.danger.active{background:rgba(224,66,74,.12);border-color:rgba(224,66,74,.35);color:#ff8f95}
.acct-main{min-width:0;overflow-y:auto;padding:20px 22px;scrollbar-width:thin;max-height:calc(90vh - 57px)}
.acct-panel{display:none;animation:studioPopIn .22s ease;}
.acct-panel.active{display:block;}
@media(max-width:640px){
  .acct-body{grid-template-columns:1fr;}
  .acct-side{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border-color);padding:10px;scrollbar-width:none;}
  .acct-side::-webkit-scrollbar{display:none}
  .acct-tab{flex:none;white-space:nowrap;}
  .acct-main{max-height:none;}
}
.studio-widgets{max-width:1100px;margin:0 auto 26px;padding:0 22px;display:flex;flex-direction:column;gap:14px}
.pv-widget-empty{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  border:1px dashed var(--border-light);border-radius:12px;padding:22px;
  font-size:13px;color:var(--text-muted);
}
.pv-widget{
  background:var(--bg-surface);border:1px solid var(--border-color);
  border-radius:12px;padding:16px 18px;
}
.pv-widget-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.pv-widget-head h3{font-size:14px;font-weight:700;color:#fff;margin:0;display:flex;align-items:center;gap:8px}
.pv-widget-head h3 i{color:var(--accent);font-size:12px}
.pv-widget-text{font-size:13px;line-height:1.65;color:#cbcbcb;overflow-wrap:anywhere}
.pv-widget-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pv-mod{
  display:flex;gap:10px;align-items:center;background:var(--bg-main);
  border:1px solid var(--border-color);border-radius:9px;padding:8px;cursor:pointer;
  transition:border-color .13s,transform .13s;min-width:0;
}
.pv-mod:hover{border-color:var(--border-light);transform:translateY(-2px)}
.pv-mod img{width:44px;height:44px;border-radius:7px;object-fit:cover;flex:none;background:var(--bg-main)}
.pv-mod-empty{width:44px;height:44px;border-radius:7px;background:var(--bg-surface);display:grid;place-items:center;color:var(--text-dim);flex:none}
.pv-mod-info{min-width:0}
.pv-mod-info strong{display:block;font-size:12.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-wedit{border:1px solid var(--border-color);border-radius:9px;padding:10px;margin-bottom:8px;background:rgba(255,255,255,.015)}
.pv-wedit-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pv-wedit-head>span{font-size:12.5px;font-weight:700;color:#fff;display:flex;align-items:center;gap:7px}
.pv-wedit-head>span i{color:var(--accent);font-size:11px}
.pv-wedit-btns{display:flex;gap:4px}
.pv-wedit-btns button{
  width:26px;height:26px;border-radius:6px;border:1px solid var(--border-color);
  background:transparent;color:var(--text-dim);cursor:pointer;font-size:10px;
  display:grid;place-items:center;
}
.pv-wedit-btns button:hover{color:#fff;border-color:var(--border-light)}
.pv-wedit-btns [data-wdel]:hover{color:#ff8f95;border-color:rgba(224,66,74,.4)}
.pv-wtitle{margin-bottom:6px}
.pv-wbody{min-height:70px;resize:vertical}
.pv-wmods{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto;scrollbar-width:thin}
.pv-wmod{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);
  padding:5px 8px;border-radius:6px;cursor:pointer;
}
.pv-wmod:hover{background:rgba(255,255,255,.04);color:#fff}
.pv-wmod input{accent-color:var(--accent);margin:0}
.pv-wmod.on{color:#fff}
.pv-wmod span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =====================================================================
   DOCS SECTION - live Bloxd.io scripting reference
   ===================================================================== */
#view-docs{max-width:1100px}
.docs-searchbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.docs-searchbar .docs-search{flex:1;min-width:200px}
.docs-searchbar .docs-search input{height:36px;width:100%}
.docs-searchbar .dd{flex:none;width:auto;min-width:150px}
.docs-searchbar .dd-btn{height:36px}
.docs-searchbar .form-select{height:36px;flex:none;width:auto}
.docs-hint{font-size:11.5px;color:var(--text-dim);margin:-6px 0 12px}
.docs-hint:empty{display:none}
.docs-loading{text-align:center;padding:36px 0;color:var(--text-muted);font-size:13px}
.docs-loading i{margin-right:8px;color:var(--accent)}
.docs-empty{text-align:center;padding:56px 20px;color:var(--text-muted)}
.docs-empty i{font-size:30px;color:var(--text-dim);display:block;margin-bottom:12px}
.docs-empty p{font-size:13px;margin:0}
.docs-count{font-size:12px;color:var(--text-dim);margin-bottom:10px}

.docs-group{margin-bottom:22px}
.docs-group-title{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 10px;
}
.docs-group-title span{
  font-size:11px;font-weight:600;color:var(--accent);
  background:rgba(255,161,77,.12);border-radius:9999px;padding:1px 9px;letter-spacing:0;
}

.doc-card{
  background:var(--bg-surface);border:1px solid var(--border-color);
  border-radius:10px;padding:15px 17px;margin-bottom:10px;
}
.doc-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.doc-card-head h3{margin:0;font-size:15px;color:#fff;font-family:var(--font-mono);font-weight:600}
.doc-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted)}
.doc-meta .badge{background:var(--bg-main);border:1px solid var(--border-color);padding:2px 8px;border-radius:6px;font-size:11px}
.doc-score{font-size:11px;color:var(--accent);font-family:var(--font-mono)}
.doc-meta a{color:var(--accent);font-size:12px;white-space:nowrap}
.doc-body{color:#cbcbcb;font-size:13px;line-height:1.6;user-select:text;-webkit-user-select:text}
.doc-body p{margin:0 0 9px}
.doc-body h4{font-size:13.5px;color:#fff;margin:13px 0 7px}
.doc-body code{font-family:var(--font-mono);background:rgba(255,255,255,.06);padding:1px 5px;border-radius:4px;font-size:12px;color:#ffc98a;user-select:text;-webkit-user-select:text}
.doc-body pre{background:var(--bg-main);border:1px solid var(--border-color);border-radius:8px;padding:11px 13px;overflow:auto;margin:9px 0 12px;user-select:text;-webkit-user-select:text}
.doc-body pre code{background:none;padding:0;color:#cbcbcb}
.doc-body table{border-collapse:collapse;width:100%;margin:8px 0 13px;font-size:12px;display:block;overflow-x:auto}
.doc-body th,.doc-body td{border:1px solid var(--border-color);padding:6px 10px;text-align:left;white-space:nowrap}
.doc-body th{background:rgba(255,255,255,.03);color:#fff}
.doc-body strong{color:#fff}

.docs-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.docs-item-card{
  display:flex;gap:12px;align-items:center;
  background:var(--bg-surface);border:1px solid var(--border-color);
  border-radius:9px;padding:11px 12px;
}
.docs-item-thumb{width:44px;height:44px;border-radius:7px;background:var(--bg-main);border:1px solid var(--border-color);flex:none;object-fit:contain;image-rendering:pixelated}
.docs-item-thumb-empty{display:grid;place-items:center;color:var(--text-dim);font-size:18px}
.docs-item-info{min-width:0;flex:1}
.docs-item-info h3{margin:0 0 3px;font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docs-item-detail{font-size:11.5px;color:var(--text-muted)}
.docs-item-id{font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}

.docs-asset-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.docs-kv-list{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}
.docs-asset-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg-surface);border:1px solid var(--border-color);
  border-radius:8px;padding:7px 12px;font-size:12.5px;
}
.docs-asset-name{font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docs-row-actions{display:flex;gap:6px;flex:none}
.docs-row-actions button{
  background:var(--bg-main);border:1px solid var(--border-color);color:var(--accent);
  border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;
}
.docs-row-actions button:hover{border-color:var(--accent)}
.docs-chip-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.docs-chip{
  background:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-muted);
  padding:4px 11px;border-radius:7px;font-size:12px;font-family:var(--font-mono);cursor:pointer;
  transition:border-color .12s,color .12s;
}
.docs-chip:hover{border-color:var(--accent);color:#fff}
.docs-chip i{font-size:10px}
.docs-dl-badge{color:var(--accent)}
.docs-particle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;margin-bottom:6px}
.docs-particle{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px;padding:8px;text-align:center}
.docs-particle img{width:38px;height:38px;object-fit:contain;image-rendering:pixelated;background:var(--bg-main);border-radius:6px}
.docs-particle-name{font-size:10.5px;color:var(--text-muted);margin-top:6px;word-break:break-word}

.docs-type{margin-bottom:6px}
.docs-type-group{margin-bottom:18px}
details.docs-type{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:8px}
details.docs-type summary{padding:9px 12px;cursor:pointer;font-size:13px;list-style:none;display:flex;align-items:center;gap:8px}
details.docs-type summary::-webkit-details-marker{display:none}
.docs-type-chev{color:var(--text-dim);font-size:10px;transition:transform .15s}
details.docs-type[open] .docs-type-chev{transform:rotate(90deg)}
details.docs-type summary .mono{color:var(--accent);font-family:var(--font-mono)}
.docs-type-view{color:var(--text-dim);font-size:11px;margin-left:auto}
details.docs-type:hover{border-color:var(--border-light)}
details.docs-type pre{margin:0;padding:12px;border-top:1px solid var(--border-color);overflow:auto;font-family:var(--font-mono);font-size:12px;line-height:1.6;color:#cbcbcb;user-select:text;-webkit-user-select:text}
.docs-type-copy{
  margin:8px 12px 12px;background:var(--bg-main);border:1px solid var(--border-color);
  color:var(--text-muted);border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;
}
.docs-type-copy:hover{color:#fff;border-color:var(--border-light)}

.docs-update{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:9px;padding:13px 15px;margin-bottom:9px}
.docs-update-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.docs-update-kind{font-weight:600;font-size:13.5px;color:#fff}
.docs-update-time{color:var(--text-dim);font-size:11.5px}
.docs-update-names{margin-top:7px;color:var(--text-muted);font-size:12.5px;line-height:1.6;white-space:pre-wrap}

@media(max-width:640px){
  .docs-searchbar .docs-search{flex:1 1 100%}
  .docs-searchbar .dd,.docs-searchbar .form-select{flex:1}
}
.mods-empty{
  grid-column:1/-1;
  text-align:center;
  padding:64px 20px;
  color:var(--text-muted);
}
.mods-empty i{font-size:38px;color:var(--text-dim);display:block;margin-bottom:16px}
.mods-empty h3{font-size:16px;color:#fff;margin:0 0 6px}
.mods-empty p{font-size:13px;margin:0 0 16px}

.mod-card .code-item-content{gap:0}
.mod-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 11px}
.mod-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:600;
  color:var(--accent);
  background:rgba(255,161,77,.1);
  border:1px solid rgba(255,161,77,.2);
  border-radius:9999px;
  padding:3px 10px;
}
.mod-chip i{font-size:10px}
.mod-you{
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#141414;
  background:var(--accent);
  border-radius:4px;
  padding:1px 5px;
  margin-left:3px;
  font-weight:700;
}
@media(max-width:700px){
  .mods-toolbar-right{width:100%}
  .mods-search{flex:1 1 100%}
  .mods-search input{width:100%}
  .mods-toolbar-right .dd,.mods-toolbar-right .form-select{flex:1 1 140px}
}

/* =====================================================================
   TOOLS PAGE
   ===================================================================== */
#view-tools{max-width:1280px}
.tools-hero{margin:4px 0 26px}
.tools-kicker{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--accent);
  text-transform:uppercase;
}
.tools-title{
  font-size:46px;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.05;
  color:#fff;
  margin:10px 0 6px;
}
.tools-title span{color:var(--accent)}
.tools-lead{font-size:18px;font-weight:600;color:var(--text-main);margin:0 0 4px}
.tools-sub{font-size:13.5px;color:var(--text-muted);margin:0}
.tools-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.tool-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:20px;
  min-height:250px;
  background:var(--bg-surface);
  border:1px solid var(--border-color);
  border-radius:12px;
  transition:border-color .15s,transform .15s;
}
.tool-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0,rgba(255,161,77,.16),transparent 55%);
}
.tool-card.t2::before{background:radial-gradient(120% 90% at 100% 0,rgba(76,205,168,.16),transparent 55%)}
.tool-card.t3::before{background:radial-gradient(120% 90% at 100% 0,rgba(255,178,92,.16),transparent 55%)}
.tool-card.t4::before{background:radial-gradient(120% 90% at 100% 0,rgba(178,140,255,.18),transparent 55%)}
.tool-card.t5::before{background:radial-gradient(120% 90% at 100% 0,rgba(255,120,150,.16),transparent 55%)}
.tool-card.t6::before{background:radial-gradient(120% 90% at 100% 0,rgba(96,220,255,.16),transparent 55%)}
.tool-card:hover{border-color:var(--border-light);transform:rotate(-2deg) scale(1.02)}
.tool-card{cursor:pointer}
.tool-card:active{transform:rotate(-2deg) scale(.99)}
.pv-mod{transition:border-color .13s,transform .15s}
.pv-mod:hover{transform:rotate(-2deg) scale(1.03)}
/* Tool cover art */
.tool-visual{
  position:relative;height:148px;margin:-20px -20px 0;overflow:hidden;
  display:block;
}
.tool-visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 12px);
}
.tool-visual>i{
  position:absolute;right:10px;bottom:-24px;font-size:118px;line-height:1;
  color:rgba(255,255,255,.28);transform:rotate(-12deg);pointer-events:none;
}
.tool-visual::before{
  content:"";position:absolute;inset:auto -30% -55% -30%;height:130px;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 100%,rgba(255,255,255,.22),transparent 70%);
}
.v-music{background:linear-gradient(135deg,#2a0f45,#8b2fa8 58%,#e0499b)}
.v-ui{background:linear-gradient(135deg,#0b2a4a,#1d6fc4 58%,#54c1ff)}
.v-split{background:linear-gradient(135deg,#04291f,#0d8a63 58%,#4ade80)}
.v-shop{background:linear-gradient(135deg,#3a1c00,#c06a0a 58%,#ffb020)}
.tool-card .tool-icon{margin:-30px 0 12px;position:relative;z-index:1;box-shadow:0 8px 20px rgba(0,0,0,.4)}
@media(max-width:640px){
  .tools-grid{grid-template-columns:1fr!important}
}
.tool-card>*{position:relative;z-index:1}
.tool-card-badge{
  font-size:12px;
  font-weight:700;
  color:var(--text-dim);
  letter-spacing:.08em;
  margin-bottom:14px;
}
.tool-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:rgba(255,161,77,.14);
  color:var(--accent);
  font-size:19px;
  margin-bottom:14px;
}
.tool-card h3{font-size:16px;font-weight:700;color:#fff;margin:0 0 7px}
.tool-card p{font-size:12.5px;color:var(--text-muted);line-height:1.55;margin:0 0 16px;flex:1}
.tool-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:38px;
  padding:0 16px;
  border-radius:8px;
  border:1px solid var(--border-color);
  background:rgba(255,255,255,.02);
  color:var(--text-main);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s,border-color .12s;
}
.tool-cta:hover{background:rgba(255,161,77,.14);border-color:var(--border-light)}
.tool-cta i{font-size:11px}
.tool-cta.is-soon:hover{background:rgba(255,255,255,.05)}
@media(max-width:1000px){.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .tools-title{font-size:34px}
  .tools-grid{grid-template-columns:1fr}
  .tool-card{min-height:0}
}

/* =====================================================================
   MOD UPLOAD + VIEW MODALS
   ===================================================================== */
.mod-upload-content{max-width:720px;max-height:90vh;overflow-y:auto}
.mod-field-hint{display:block;margin-top:6px;font-size:11px;color:var(--text-dim)}
.mod-code-textarea{font-family:var(--font-mono);font-size:12px}
.mod-blocks-section{
  margin:6px 0 18px;
  padding:14px;
  border:1px solid var(--border-color);
  border-radius:9px;
  background:rgba(255,255,255,.015);
}
.mod-blocks-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.mod-blocks-head label{font-size:12.5px;font-weight:700;color:var(--text-main);margin:0}
.mod-blocks-head label em{font-style:normal;font-weight:500;color:var(--text-dim);font-size:11px;margin-left:5px}
.mod-blocks-count{font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}
#mod-blocks-list{display:flex;flex-direction:column;gap:10px}
.mod-block{
  border:1px solid var(--border-color);
  border-radius:8px;
  background:var(--bg-main);
  overflow:hidden;
}
.mod-block-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border-color)}
.mod-block-name{flex:1;height:32px;padding:0 10px;font-size:12.5px}
.mod-block-count{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);flex:none}
.mod-block-remove{
  flex:none;
  width:30px;
  height:30px;
  border-radius:6px;
  border:1px solid var(--border-color);
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.mod-block-remove:hover{background:rgba(224,66,74,.15);border-color:rgba(224,66,74,.4);color:#ff8f95}
.mod-block-code{
  width:100%;
  min-height:130px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  font-family:var(--font-mono);
  font-size:12px;
  resize:vertical;
}
.mod-block-code:focus{box-shadow:none!important}
.mod-add-block{
  width:100%;
  margin-top:10px;
  height:38px;
  border:1px dashed var(--border-light);
  border-radius:8px;
  background:transparent;
  color:var(--accent);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s,border-color .12s;
}
.mod-add-block:hover{background:rgba(255,161,77,.08);border-color:var(--accent)}
.mod-add-block:disabled{cursor:not-allowed}

.mod-view-content{max-width:780px;max-height:86vh;display:flex;flex-direction:column}
.mod-view-meta{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12.5px;
  color:var(--text-muted);
  margin-bottom:12px;
}
.mod-view-meta b{color:#fff}
.mod-view-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.mod-tab{
  background:var(--bg-surface);
  border:1px solid var(--border-color);
  color:var(--text-muted);
  border-radius:7px;
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mod-tab:hover{border-color:var(--border-light);color:#e7e7e7}
.mod-tab.active{background:#ffe2bd;color:#091321;border-color:#ffe2bd}
.mod-view-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:var(--bg-main);
  overflow:hidden;
}
.mod-view-code-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  border-bottom:1px solid var(--border-color);
  font-size:12px;
  font-weight:600;
  color:var(--text-main);
}
.mod-copy-btn{font-size:11.5px;padding:4px 10px;height:auto}
.mod-view-pre{
  margin:0;
  padding:14px;
  overflow:auto;
  flex:1;
  min-height:180px;
  max-height:52vh;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.55;
}
.mod-view-pre code{font-family:inherit;background:transparent;padding:0}

@media(max-width:600px){
  #view-home .hm-hero .hm-title{font-size:24px}
  .mods-title{font-size:19px}
}

/* =====================================================================
   TOOLS - coming soon placeholder
   ===================================================================== */
.tools-soon{
  max-width:640px;
  margin:12px auto 0;
  text-align:center;
  padding:72px 24px;
  border:1px dashed var(--border-light);
  border-radius:14px;
  background:rgba(255,255,255,.015);
}
.tools-soon-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  border-radius:16px;
  background:rgba(255,161,77,.12);
  color:var(--accent);
  font-size:24px;
}
.tools-soon h2{font-size:22px;font-weight:700;color:#fff;margin:0 0 8px;letter-spacing:-.02em}
.tools-soon p{font-size:13.5px;color:var(--text-muted);margin:0}

/* =====================================================================
   PRETTY DROPDOWN - animated custom select
   ===================================================================== */
.dd{position:relative;width:100%}
.dd-native{display:none!important}
.dd-btn{
  width:100%;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  background:var(--bg-surface);
  border:1px solid var(--border-color);
  border-radius:7px;
  color:var(--text-main);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.dd-btn:hover{background:#131313;border-color:#4a3a22}
.dd.open .dd-btn,.dd-btn:focus-visible{border-color:#b26a1f;box-shadow:0 0 0 3px rgba(255,161,77,.08);outline:none}
.dd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-chev{font-size:11px;color:var(--text-dim);transition:transform .2s ease,color .15s;flex:none}
.dd.open .dd-chev{transform:rotate(180deg);color:var(--accent)}
.dd-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:120;
  max-height:224px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:6px;
  border-radius:12px;
  border:1px solid var(--border-light);
  background:#131313;
  box-shadow:0 18px 45px rgba(0,0,0,.5);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px) scale(.985);
  transform-origin:top center;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .2s;
  scrollbar-width:thin;
  scrollbar-color:#525252 transparent;
}
.dd.open .dd-menu{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .2s ease,transform .22s cubic-bezier(.2,.9,.3,1.2),visibility 0s;
}
.dd-menu::-webkit-scrollbar{width:8px}
.dd-menu::-webkit-scrollbar-track{background:transparent}
.dd-menu::-webkit-scrollbar-thumb{background:#2c4767;border-radius:99px;border:2px solid #131313}
.dd-menu::-webkit-scrollbar-thumb:hover{background:#6e5626}
.dd-slide{
  position:absolute;
  top:0;
  left:6px;
  right:6px;
  height:0;
  border-radius:8px;
  background:rgba(255,161,77,.14);
  border:1px solid rgba(255,161,77,.25);
  opacity:0;
  pointer-events:none;
  transition:transform .18s ease,height .18s ease,opacity .15s ease;
}
.dd-option{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  margin:1px 0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-muted);
  font-size:12.5px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .14s ease,transform .14s ease,color .12s ease;
}
.dd.open .dd-option{
  opacity:1;
  transform:none;
  transition:opacity .16s ease calc(var(--i)*20ms),transform .16s ease calc(var(--i)*20ms),color .12s ease;
}
.dd-option:hover{color:#fff}
.dd-option-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-option-check{font-size:11px;color:var(--accent);opacity:0;flex:none;transition:opacity .12s}
.dd-option.selected{color:#fff}
.dd-option.selected .dd-option-check{opacity:1}


/* =====================================================================
   ACCOUNT SETTINGS POLISH - proper stacked text, saved indicator
   ===================================================================== */
.acct-row-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.acct-row-text strong{display:block;font-size:13.5px;font-weight:600;color:var(--text-main)}
.acct-row-text small{display:block;font-size:11.5px;color:var(--text-dim);line-height:1.45}
.acct-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border-color)}
.acct-row:last-of-type{border-bottom:0}
.acct-row .form-control{max-width:260px}
.acct-cap{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);padding:14px 0 4px}
.acct-cap:first-child{padding-top:2px}
.acct-link{font-family:var(--font-mono);font-size:12px;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-saved{margin-left:auto;margin-right:8px;font-size:11.5px;font-weight:600;color:#3fb950;display:flex;align-items:center;gap:6px;opacity:0;transform:translateY(2px);transition:opacity .25s,transform .25s}
.acct-saved.show{opacity:1;transform:none}
.acct-saved.show::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900}
.autosave-note{display:flex;align-items:center;gap:7px;justify-content:center;font-size:11px;color:var(--text-dim);margin-top:10px}
.autosave-note i{color:var(--accent);font-size:11px}
.switch{-webkit-appearance:none;appearance:none;width:40px;height:22px;border-radius:9999px;background:var(--bg-main);border:1px solid var(--border-light);cursor:pointer;position:relative;flex:none;transition:background .18s,border-color .18s;margin:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#9a9a9a;transition:transform .18s,background .18s}
.switch:checked{background:var(--accent);border-color:var(--accent)}
.switch:checked::after{transform:translateX(18px);background:#fff}

/* =====================================================================
   AUDIO - pretty volume slider + widget
   ===================================================================== */
.stage-volume{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 11px}
.stage-volume>i{font-size:12px;color:var(--accent)}
.stage-volume input[type=range]{-webkit-appearance:none;appearance:none;width:96px;height:4px;border-radius:9999px;background:linear-gradient(to right,var(--accent) var(--p,80%),rgba(255,255,255,.18) var(--p,80%));outline:none;cursor:pointer}
.stage-volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,161,77,.25);cursor:grab;transition:transform .12s}
.stage-volume input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.stage-volume input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;cursor:grab}
.portfolio-audio-widget{transition:border-color .13s,transform .13s}
.portfolio-audio-widget:hover{transform:translateY(-1px)}
.portfolio-audio-widget #stage-play-btn i{pointer-events:none}

/* =====================================================================
   STAGE WIDGETS - live on the portfolio, draggable, in glass boxes
   ===================================================================== */
.stage-widgets-layer{position:absolute;inset:0;z-index:5;pointer-events:none}
.stage-widget{
  position:absolute;transform:translate(-50%,-50%);
  pointer-events:auto;max-width:280px;width:max-content;min-width:150px;
  animation:pwIn .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pwIn{from{opacity:0;transform:translate(-50%,-46%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.stage-widget.editable{cursor:grab}
.stage-widget.editable:hover{outline:1px dashed rgba(255,161,77,.5);outline-offset:4px;border-radius:14px}
.stage-widget.dragging{cursor:grabbing;z-index:30}
.stage-widget.dragging *{pointer-events:none}
.pw{
  background:rgba(14,14,14,.68);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:0 14px 38px rgba(0,0,0,.42);
  padding:13px 15px;color:#fff;
  font-size:12.5px;line-height:1.5;
}
.pw-title{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.pw-sub{font-size:11px;color:rgba(255,255,255,.6)}
.pw-clock{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.pw-date{font-size:19px;font-weight:700}
.pw-weather{display:flex;align-items:center;gap:12px}
.pw-weather-ic{font-size:28px;color:var(--accent)}
.pw-weather-temp{font-size:24px;font-weight:800;line-height:1.1}
.pw-mod-grid{display:flex;flex-direction:column;gap:6px}
.pw-mod{display:flex;align-items:center;gap:9px;cursor:pointer;border-radius:8px;padding:4px 6px;transition:background .12s}
.pw-mod:hover{background:rgba(255,255,255,.07)}
.pw-mod img{width:34px;height:34px;border-radius:7px;object-fit:cover;flex:none}
.pw-mod-ic{width:34px;height:34px;border-radius:7px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--accent);flex:none}
.pw-mod strong{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.pw-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;cursor:zoom-in;transition:transform .15s}
.pw-gallery img:hover{transform:scale(1.04)}
.pw-text{font-size:12.5px;color:rgba(255,255,255,.88);overflow-wrap:anywhere}
.pw-goals{display:flex;flex-direction:column;gap:6px}
.pw-goal{display:flex;align-items:center;gap:8px;font-size:12.5px}
.pw-goal i{font-size:13px;color:var(--text-dim)}
.pw-goal.done{color:rgba(255,255,255,.55);text-decoration:line-through}
.pw-goal.done i{color:#4ade80}
.pw-faq{display:flex;flex-direction:column;gap:5px}
.pw-faq-item{border-radius:8px;background:rgba(255,255,255,.05);overflow:hidden}
.pw-faq-item summary{padding:7px 10px;font-size:12.5px;font-weight:600;cursor:pointer;list-style:none}
.pw-faq-item summary::-webkit-details-marker{display:none}
.pw-faq-a{padding:0 10px 8px;font-size:12px;color:rgba(255,255,255,.7)}
.pw-links{display:flex;flex-direction:column;gap:5px}
.pw-link{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#fff;text-decoration:none;padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.06);transition:background .12s,box-shadow .12s}
.pw-link:hover{background:rgba(255,161,77,.18);box-shadow:0 0 14px -6px var(--accent)}
.pw-link i{font-size:10px;color:var(--accent)}
.pw-quote-mark{font-size:34px;line-height:.6;color:var(--accent);font-family:Georgia,serif;margin-bottom:6px}
.pw-quote{font-size:14.5px;font-style:italic;line-height:1.5;overflow-wrap:anywhere}
.pw-quote-author{font-size:11.5px;color:rgba(255,255,255,.6);margin-top:7px}
.pw-stats{display:flex;flex-wrap:wrap;gap:6px}
.pw-stat-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;background:rgba(255,255,255,.06);border-radius:9999px;padding:4px 11px}
.pw-stat-chip i{font-size:10.5px;color:var(--accent)}
.pw-stat-chip em{font-style:normal;font-weight:600}
.pw-count-grid{display:flex;gap:6px}
.pw-count-cell{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.06);border-radius:9px;padding:7px 10px;min-width:44px}
.pw-count-cell b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.pw-count-cell span{font-size:9px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.06em}
.pw-tools{position:absolute;top:-12px;right:-10px;display:none;gap:4px;z-index:3}
.stage-widget.editable:hover .pw-tools{display:flex}
.pw-tools button{
  width:26px;height:26px;border-radius:8px;border:1px solid rgba(255,255,255,.2);
  background:rgba(14,14,14,.85);color:#fff;font-size:11px;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(6px);
}
.pw-tools button:hover{border-color:var(--accent);color:var(--accent)}
.pw-tools button.del:hover{border-color:#ff8f95;color:#ff8f95}
.pw-pick-hint{font-size:11.5px;color:var(--text-dim);margin-bottom:10px;line-height:1.5}
.pw-pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pw-pick{
  border:1px solid var(--border-color);border-radius:12px;overflow:hidden;cursor:grab;
  background:var(--bg-main);transition:border-color .13s,transform .13s;
}
.pw-pick:hover{border-color:var(--accent);transform:translateY(-2px)}
.pw-pick:active{cursor:grabbing}
.pw-pick-preview{
  height:104px;overflow:hidden;position:relative;padding:10px;
  background:
    radial-gradient(90% 90% at 85% 10%,rgba(255,161,77,.16),transparent 60%),
    linear-gradient(160deg,#3d2c18,#171310 70%);
}
.pw-pick-preview>.pw{
  transform:scale(.62);transform-origin:top left;width:180%;pointer-events:none;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
}
.pw-pick-label{display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:12px;font-weight:600;color:var(--text-main)}
.pw-pick-label i{color:var(--accent);font-size:11px}
.pw-drag-ghost{position:fixed;z-index:99999;pointer-events:none;opacity:.85;transform:scale(.8);transform-origin:top left;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.pw-form-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pw-form-head button{background:none;border:0;color:var(--accent);font-size:11.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;padding:0}
.pw-form-head button:hover{text-decoration:underline}
.pw-form-kind{margin-left:auto;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}
.pw-form-preview{margin-bottom:12px;padding:12px;border-radius:12px;background:
  radial-gradient(90% 90% at 85% 10%,rgba(255,161,77,.14),transparent 60%),
  linear-gradient(160deg,#3d2c18,#171310 70%);}
.pw-form-preview>.pw{pointer-events:none}
.pw-field{margin-bottom:10px}
.pw-field>label{display:block;font-size:11.5px;font-weight:700;color:var(--text-main);margin-bottom:6px}
.pw-field .form-control,.pw-field .form-select{width:100%}
.pw-list-edit{display:flex;flex-direction:column;gap:6px}
.pw-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.pw-list-row-multi{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto}
.pw-list-row input[type=checkbox]{accent-color:var(--accent);flex:none}
.pw-mini-del{width:30px;height:30px;border-radius:7px;border:1px solid var(--border-color);background:transparent;color:var(--text-dim);cursor:pointer;display:grid;place-items:center}
.pw-mini-del:hover{border-color:rgba(224,66,74,.45);color:#ff8f95;background:rgba(224,66,74,.1)}
.pw-wmods{display:flex;flex-direction:column;gap:4px;max-height:170px;overflow-y:auto;scrollbar-width:thin}
.pw-wmod{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);padding:5px 8px;border-radius:7px;cursor:pointer}
.pw-wmod:hover{background:rgba(255,255,255,.05);color:#fff}
.pw-wmod input{accent-color:var(--accent);margin:0}
.pw-wmod.on{color:#fff}
.pw-wmod span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Light theme touches for the new pieces */
html[data-theme="light"] .pw{background:rgba(255,255,255,.72);border-color:rgba(60,50,35,.14);color:#211d18;box-shadow:0 14px 34px rgba(90,70,40,.16)}
html[data-theme="light"] .pw-text,html[data-theme="light"] .pw-quote{color:#3a342c}
html[data-theme="light"] .pw-sub,html[data-theme="light"] .pw-quote-author{color:#7a7264}
html[data-theme="light"] .pw-link{color:#211d18;background:rgba(60,50,35,.06)}
html[data-theme="light"] .pw-stat-chip,html[data-theme="light"] .pw-count-cell,html[data-theme="light"] .pw-faq-item,html[data-theme="light"] .pw-mod-ic{background:rgba(60,50,35,.07)}
html[data-theme="light"] .pw-tools button{background:rgba(255,255,255,.92);color:#211d18}
html[data-theme="light"] .pw-goal i{color:#97897a}
html[data-theme="light"] .stage-widget.editable:hover{outline-color:rgba(217,122,30,.6)}

/* ---- Forum post page + replies ---- */
.forum-post-card:hover { border-color: var(--accent, #5f95ef); }
.forum-post-page { padding: 22px; margin-bottom: 16px; }
.forum-replies { padding: 18px 22px; }
.forum-reply { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-color); }
.forum-reply:first-child { border-top: none; }
.forum-reply-body { min-width: 0; flex: 1; }
.forum-reply-head { font-size: 13px; color: #fff; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.forum-reply-head span { font-size: 11.5px; color: var(--text-dim); }
.forum-reply-text { font-size: 14px; line-height: 1.6; color: var(--text-main); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.forum-no-replies { color: var(--text-dim); font-size: 13.5px; padding: 6px 0 12px; }
.forum-reply-form { margin-top: 14px; border-top: 1px solid var(--border-color); padding-top: 14px; }
.forum-reply-input { width: 100%; min-height: 76px; font-size: 14.5px; line-height: 1.5; padding: 10px 12px; resize: vertical; box-sizing: border-box; }
.forum-reply-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.forum-reply-hint { margin-right: auto; font-size: 12px; color: var(--text-dim); }
.forum-reply-signin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; border-top: 1px solid var(--border-color); padding-top: 14px; color: var(--text-muted); font-size: 13.5px; }
@media (max-width: 600px) { .forum-reply-hint { display: none; } .forum-post-page, .forum-replies { padding: 16px; } }

/* ---- Forum: mentions, reply tools, edited label ---- */
.forum-mention { color: #9ec5ff; background: rgba(95,149,239,.12); border-radius: 4px; padding: 0 3px; cursor: pointer; font-weight: 600; }
.forum-mention:hover { background: rgba(95,149,239,.22); }
.forum-edited { font-size: 11px; color: var(--text-dim); font-style: italic; }
.forum-reply-tools { margin-left: auto; display: inline-flex; gap: 10px; }
.forum-reply-tools button { background: none; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; padding: 0; }
.forum-reply-tools button:hover { color: #fff; }
.forum-mention-menu { position: fixed; z-index: 4000; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px; padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.forum-mention-item { padding: 6px 10px; border-radius: 6px; font-size: 13px; color: var(--text-main); cursor: pointer; }
.forum-mention-item.on, .forum-mention-item:hover { background: rgba(95,149,239,.18); color: #fff; }

.docs-item-card[data-item-id]{cursor:pointer;transition:border-color .12s,transform .12s}
.docs-item-card[data-item-id]:hover,.docs-item-card[data-item-id]:focus-visible{border-color:var(--accent,#7c6cff);outline:none}
.docs-item-modal-box{max-width:560px;width:calc(100% - 32px);max-height:86vh;overflow-y:auto}
.docs-modal-top{display:flex;gap:14px;align-items:flex-start}
.docs-modal-thumb{width:72px;height:72px;flex:none;border-radius:9px;background:var(--bg-main);border:1px solid var(--border-color);object-fit:contain;image-rendering:pixelated}
.docs-stat-list{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.docs-stat-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:5px 9px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:7px}
.docs-stat-row span{color:var(--text-muted)}
.docs-stat-row b{color:#fff;font-weight:600;text-align:right;overflow-wrap:anywhere}
.docs-modal-h{margin:16px 0 6px;font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.docs-recipe{font-size:12.5px;padding:7px 10px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:7px;margin-bottom:5px;line-height:1.7}
.docs-ref{background:none;border:0;padding:0;color:var(--accent,#7c6cff);cursor:pointer;font:inherit;text-decoration:underline dotted}
.docs-ref-more{color:var(--text-dim);font-size:11.5px;margin-left:4px}
.docs-modal-raw{margin-top:14px;font-size:12px;color:var(--text-muted)}
.docs-modal-raw pre{max-height:220px;overflow:auto;background:var(--bg-main);border:1px solid var(--border-color);border-radius:7px;padding:9px;font-size:11px;color:var(--text-main,#ddd)}


/* ==============================================================

/* Top bar removed: everything lives in the sidebar. The header stays in the DOM (hidden) so its buttons keep working. */
.app-header { display: contents !important; }
.app-header > .search-bar, .app-header > .header-right { display: none !important; }
.mobile-menu-btn { position: fixed; top: 10px; left: 10px; z-index: 80; }
body.public-mode .mobile-menu-btn { display: none !important; }
@media (max-width: 900px) { .content-area { padding-top: 56px; } }
.social-layout { height: calc(100vh - 32px) !important; height: calc(100dvh - 32px) !important; }
.sidebar-auth { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sidebar-auth:not(:has(.btn:not([style*="display: none"]):not(.guest-only))) { margin-bottom: 0; }
.sidebar-auth .btn { width: 100%; justify-content: center; font-size: 12.5px; padding: 8px 10px; }
body:not(.guest) .sidebar-auth .guest-only { display: none !important; }
body.sidebar-collapsed .sidebar-auth .btn span { display: none; }

/* Profile page: only the corner logo */
#pv-logo { display: none; }
body.public-mode #pv-logo { display: block; position: fixed; top: 14px; left: 14px; z-index: 120; line-height: 0; border-radius: 10px; }
body.public-mode #pv-logo img { border-radius: 10px; display: block; transition: transform .15s; }
body.public-mode #pv-logo:hover img { transform: scale(1.06); }
body.public-mode #public-view-banner, body.public-mode .pv-cta { display: none !important; }
#stage-lessons { display: none !important; }

/* Category pills removed from the mods page and home */
#codes-category-bar, #dashboard-category-bar { display: none !important; }

/* Community tabs */
.community-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.community-title { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -.02em; margin: 0 0 2px; }
.community-sub { font-size: 13px; color: var(--text-muted); margin: 0; }
.community-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 9px; }
.community-tab { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 6px; cursor: pointer; transition: background .12s, color .12s; }
.community-tab:hover { color: #fff; }
.community-tab.active { background: #eaeaea; color: #171717; }

/* restored after the revert undo */

/* compact chat/forum attachments */
.social-msg-image{max-width:min(240px,60vw);max-height:200px;width:auto;height:auto;object-fit:contain}
.social-msg-video{width:min(280px,60vw);max-height:200px}
.social-video-wrap{width:min(280px,60vw)}
.social-attachment-preview{max-height:64px;overflow:hidden}
.social-attachment-preview img,.social-attachment-preview video{width:44px;height:44px;object-fit:cover;border-radius:6px;flex:none}


/* Seed Explorer tool */
.tool-card.t8::before{background:radial-gradient(120% 90% at 100% 0,rgba(150,220,80,.16),transparent 55%)}
.v-seed{background:linear-gradient(135deg,#17270a,#5f8f16 58%,#c6ee6a)}
.sd-note{display:flex;gap:11px;align-items:flex-start;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;padding:12px 15px;margin-bottom:14px;font-size:13px;line-height:1.55;color:var(--text-muted)}
.sd-note>i{color:var(--text-main);margin-top:3px;flex:none}
.sd-note b{color:#fff;font-weight:600}
.sd-frame{height:min(78vh,780px);min-height:460px;background:#0a0a0a;border:1px solid var(--border-color);border-radius:12px;overflow:hidden}
.sd-frame iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:640px){.sd-frame{height:70vh;min-height:380px}}

/* Community top bar */
.community-top{display:none}
.community-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:8px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:11px}
.community-bar .community-tabs{border:0;padding:0;background:transparent}
.community-bar .mods-search{flex:1;min-width:170px;max-width:none;margin:0}
.cm-filter{position:relative}
.cm-filter-btn{gap:8px}
.cm-filter-btn.on{border-color:var(--border-light);background:var(--bg-panel)}
.cm-filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--accent);color:#171717;font-size:11px;font-weight:700}
.cm-filter-pop{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:70;width:260px;flex-direction:column;gap:6px;padding:14px;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:11px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.cm-filter-pop.open{display:flex}
.cm-filter-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--text-dim);font-weight:700;margin-top:4px}
.cm-filter-pop .form-select{width:100%}
.cm-filter-reset{margin-top:8px;justify-content:center}
@media(max-width:640px){.community-bar .mods-search{order:5;flex-basis:100%}.cm-filter-pop{right:auto;left:0}}

/* Shader cards: image collage on top, details below */
#shaders-grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.sh-card{display:flex;flex-direction:column;cursor:pointer;padding:0;overflow:hidden;min-height:0}
.sh-media{position:relative;aspect-ratio:16/10;background:#141414;overflow:hidden;border-bottom:1px solid var(--border-color)}
.sh-collage{position:absolute;inset:0;display:grid;gap:2px;background:#0c0c0c}
.sh-collage.n1{grid-template-columns:1fr}
.sh-collage.n2{grid-template-columns:1fr 1fr}
.sh-collage.n3{grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr}
.sh-collage.n3 img:first-child{grid-row:1 / span 2}
.sh-collage.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.sh-collage img{width:100%;height:100%;min-height:0;object-fit:cover;display:block;transition:transform .3s ease}
.sh-card:hover .sh-collage img{transform:scale(1.04)}
.sh-media .media-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-dim);font-size:12px}
.sh-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 13px}
.sh-body .code-item-title{margin:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-body .code-item-meta{display:flex;align-items:center;gap:7px;margin:0}
.sh-body .code-item-desc{margin:0;min-height:0}
.sh-body .mod-card-foot{margin-top:2px}

/* Clickable names and avatars */
[data-user]{cursor:pointer}
span[data-user]:hover,strong[data-user]:hover,b[data-user]:hover{text-decoration:underline;color:#fff}
img[data-user]:hover,video[data-user]:hover{box-shadow:0 0 0 2px var(--border-light)}

/* Tools page: quiet hint that more cards are below */
.tools-more{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(6px);z-index:40;display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;border:1px solid var(--border-color);background:rgba(23,23,23,.92);color:var(--text-muted);font:inherit;font-size:11.5px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.tools-more.show{opacity:.9;transform:translateX(-50%);pointer-events:auto}
.tools-more:hover{color:#fff;border-color:var(--border-light)}
.tools-more i{font-size:10px;animation:toolsBob 2.6s ease-in-out infinite}
@keyframes toolsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@media(min-width:901px){.tools-more{left:calc(var(--sidebar-width) + (100vw - var(--sidebar-width)) / 2)}}
@media(prefers-reduced-motion:reduce){.tools-more i{animation:none}}

/* Mobile fixes */
@media (max-width: 900px) {
  /* a later rule re-showed the collapse arrow; keep it off on phones */
  .sidebar-collapse-toggle { display: none !important; }
  /* iOS zooms into inputs under 16px, so never go below that on phones */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]),
  select, textarea { font-size: 16px !important; }
  /* Account settings: tab strip stays one row tall, rows stack instead of squeezing */
  .acct-body { grid-template-rows: auto minmax(0, 1fr); }
  .acct-side { align-self: start; align-items: center; }
  .acct-tab { align-self: center; }
  .acct-main { padding: 14px 16px; }
  .acct-row:has(.form-control) { flex-direction: column; align-items: stretch; gap: 8px; }
  .acct-row:has(.acct-link) { flex-direction: column; align-items: flex-start; gap: 4px; }
  .acct-row .form-control { max-width: none; width: 100%; }
  .acct-row-text { flex: none; }
  .acct-link { max-width: 100%; }
}