/* ============================================================
   PIKOVERSE HUB — hub.css
   Place in: css/hub.css
   Add to index.html: <link rel="stylesheet" href="css/hub.css">
   ============================================================ */

:root {
  --hub-gold:       #c9a84c;
  --hub-gold-light: #f0c96a;
  --hub-gold-dim:   rgba(201,168,76,.15);
  --hub-green:      #4caf7a;
  --hub-orange:     #ff9f47;
  --hub-blue:       #54d1ff;
  --hub-red:        #e05252;
  --hub-bg:         rgba(6,8,16,.92);
  --hub-border:     rgba(201,168,76,.14);
  --hub-text:       rgba(255,255,255,.85);
  --hub-muted:      rgba(255,255,255,.38);
  --hub-radius:     14px;
}

/* ══════════════════════════════════════════════
   1. PROJECT DOCK
   ══════════════════════════════════════════════ */
.piko-dock {
  position: sticky;
  top: 0;
  z-index: 150;
  width: 100%;
  background: var(--hub-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hub-border);
  padding: 0 24px;
  box-shadow: 0 4px 32px rgba(0,0,0,.5);
}

.piko-dock-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.piko-dock-inner::-webkit-scrollbar { display: none; }

.piko-dock-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hub-muted);
  white-space: nowrap;
  padding-right: 16px;
  border-right: 1px solid var(--hub-border);
  margin-right: 8px;
  flex-shrink: 0;
}

/* Each project node */
.dock-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.dock-node:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--hub-border);
}
.dock-node.is-active {
  background: var(--hub-gold-dim);
  border-color: rgba(201,168,76,.3);
}

/* Icon wrapper with status ring */
.dock-icon-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.dock-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.1);
  overflow: hidden;
  transition: border-color .2s;
}
.dock-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Status ring — spins for live, pulses for beta, static for soon */
.dock-status-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
}
.dock-status-ring::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
}

/* Live — spinning gold ring */
.dock-node[data-status="live"] .dock-status-ring {
  border-color: var(--hub-gold);
  animation: dockRingSpin 4s linear infinite;
  border-style: dashed;
}
.dock-node[data-status="live"] .dock-icon {
  border-color: rgba(201,168,76,.5);
}
@keyframes dockRingSpin {
  to { transform: rotate(360deg); }
}

/* Beta — pulsing blue ring */
.dock-node[data-status="beta"] .dock-status-ring {
  border-color: var(--hub-blue);
  animation: dockRingPulse 2s ease-in-out infinite;
}
.dock-node[data-status="beta"] .dock-icon {
  border-color: rgba(84,209,255,.4);
}
@keyframes dockRingPulse {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.06); }
}

/* Coming soon — dim static ring */
.dock-node[data-status="soon"] .dock-status-ring {
  border-color: rgba(255,255,255,.12);
  border-style: dotted;
}
.dock-node[data-status="soon"] .dock-icon {
  opacity: .55;
  filter: grayscale(.6);
}

/* Status dot badge */
.dock-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #08101e;
}
[data-status="live"]  .dock-status-dot { background: var(--hub-green); }
[data-status="beta"]  .dock-status-dot { background: var(--hub-blue); }
[data-status="soon"]  .dock-status-dot { background: rgba(255,255,255,.25); }

/* Node label */
.dock-node-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--hub-muted);
  white-space: nowrap;
  transition: color .2s;
  letter-spacing: .02em;
}
.dock-node:hover .dock-node-name,
.dock-node.is-active .dock-node-name {
  color: var(--hub-gold-light);
}

/* Tooltip */
.dock-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #0d1220;
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  padding: 8px 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 10;
  min-width: 140px;
  text-align: center;
}
.dock-tooltip-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--hub-gold-light);
  display: block;
}
.dock-tooltip-status {
  font-size: 10px;
  margin-top: 3px;
  display: block;
}
[data-status="live"]  .dock-tooltip-status { color: var(--hub-green); }
[data-status="beta"]  .dock-tooltip-status { color: var(--hub-blue); }
[data-status="soon"]  .dock-tooltip-status { color: var(--hub-muted); }
.dock-node:hover .dock-tooltip { opacity: 1; }

/* Dock divider */
.dock-divider {
  width: 1px;
  height: 32px;
  background: var(--hub-border);
  flex-shrink: 0;
  margin: 0 6px;
}

/* ══════════════════════════════════════════════
   2. COMMUNITY SHOWCASE
   ══════════════════════════════════════════════ */
.piko-community {
  padding: 100px 24px;
  position: relative;
  overflow: hidden;
}

.piko-community::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(201,168,76,.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 50%, rgba(84,209,255,.04) 0%, transparent 70%);
  pointer-events: none;
}

.piko-community-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.piko-community-header {
  text-align: center;
  margin-bottom: 60px;
}
.piko-community-header .eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hub-gold);
  margin-bottom: 12px;
  display: block;
}
.piko-community-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.2;
}
.piko-community-header p {
  font-size: 15px;
  color: var(--hub-muted);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.7;
}

.piko-community-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: start;
}

/* Submission form card */
.piko-submit-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  padding: 28px;
  position: sticky;
  top: 90px;
}
.piko-submit-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--hub-gold-light);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.piko-submit-card h3::before {
  content: '';
  display: block;
  width: 4px;
  height: 16px;
  background: var(--hub-gold);
  border-radius: 2px;
}

.hub-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.hub-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hub-muted);
}
.hub-input, .hub-textarea, .hub-select {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--hub-text);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  width: 100%;
}
.hub-input:focus, .hub-textarea:focus {
  border-color: var(--hub-gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.1);
}
.hub-input::placeholder, .hub-textarea::placeholder { color: rgba(255,255,255,.22); }
.hub-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
.hub-hint { font-size: 11px; color: var(--hub-muted); }

.hub-submit-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--hub-gold), var(--hub-gold-light));
  color: #07060e;
  border: none;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  transition: box-shadow .2s, transform .15s;
  letter-spacing: .04em;
}
.hub-submit-btn:hover {
  box-shadow: 0 6px 24px rgba(201,168,76,.35);
  transform: translateY(-1px);
}

.piko-submit-success {
  display: none;
  text-align: center;
  padding: 24px 0;
}
.piko-submit-success.is-visible { display: block; }
.piko-submit-success i { font-size: 36px; color: var(--hub-green); margin-bottom: 12px; display: block; }
.piko-submit-success h4 { color: #fff; font-size: 16px; margin-bottom: 8px; }
.piko-submit-success p { color: var(--hub-muted); font-size: 13px; }
.piko-submit-again {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 8px 18px;
  color: var(--hub-muted);
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  margin-top: 14px;
  transition: background .15s;
}
.piko-submit-again:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Ideas wall */
.piko-wall { display: flex; flex-direction: column; gap: 16px; }

.piko-wall-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 10px;
}
.piko-wall-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--hub-muted);
}
.piko-wall-count strong { color: var(--hub-gold-light); }

.piko-wall-filters {
  display: flex;
  gap: 6px;
}
.piko-wall-filter {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
  background: none;
  color: var(--hub-muted);
  font-size: 11px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.piko-wall-filter:hover { border-color: var(--hub-gold); color: var(--hub-gold); }
.piko-wall-filter.is-active {
  background: var(--hub-gold-dim);
  border-color: rgba(201,168,76,.3);
  color: var(--hub-gold-light);
}

/* Idea card */
.piko-idea-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--hub-radius);
  padding: 20px;
  transition: border-color .2s, background .2s;
  animation: ideaCardIn .25s ease;
  position: relative;
  overflow: hidden;
}
@keyframes ideaCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.piko-idea-card:hover {
  border-color: rgba(201,168,76,.2);
  background: rgba(255,255,255,.04);
}
.piko-idea-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hub-gold), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.piko-idea-card:hover::before { opacity: 1; }

.piko-idea-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.piko-idea-category {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 3px 9px;
  border-radius: 20px;
  flex-shrink: 0;
}
.piko-idea-category--platform  { background: rgba(201,168,76,.15); color: var(--hub-gold); }
.piko-idea-category--feature    { background: rgba(84,209,255,.12); color: var(--hub-blue); }
.piko-idea-category--content    { background: rgba(76,175,122,.12); color: var(--hub-green); }
.piko-idea-category--other      { background: rgba(255,255,255,.07); color: var(--hub-muted); }

.piko-idea-date { font-size: 11px; color: var(--hub-muted); flex-shrink: 0; }

.piko-idea-text {
  font-size: 14px;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  margin-bottom: 12px;
}

.piko-idea-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.piko-idea-author {
  font-size: 12px;
  color: var(--hub-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.piko-idea-author-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--hub-gold-dim);
  border: 1px solid rgba(201,168,76,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  color: var(--hub-gold);
  font-family: 'Montserrat', sans-serif;
}

/* Admin reply on idea card */
.piko-idea-reply {
  margin-top: 12px;
  background: rgba(201,168,76,.06);
  border: 1px solid rgba(201,168,76,.15);
  border-radius: 8px;
  padding: 10px 14px;
}
.piko-idea-reply-label {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--hub-gold);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.piko-idea-reply-text {
  font-size: 13px;
  color: rgba(240,201,106,.75);
  line-height: 1.5;
}

.piko-wall-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--hub-muted);
}
.piko-wall-empty i { font-size: 36px; opacity: .3; margin-bottom: 12px; display: block; }

/* ══════════════════════════════════════════════
   3. LIVE PULSE FEED (floating)
   ══════════════════════════════════════════════ */
.piko-pulse {
  position: fixed;
  bottom: 100px;
  left: 24px;
  z-index: 200;
  width: 260px;
}

.piko-pulse-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(6,8,16,.92);
  border: 1px solid var(--hub-border);
  border-radius: 20px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--hub-gold);
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  transition: border-color .2s;
  width: fit-content;
}
.piko-pulse-toggle:hover { border-color: var(--hub-gold); }
.piko-pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hub-green);
  animation: pulseDot 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(76,175,122,.5); }
  50%       { opacity: .7; transform: scale(1.2); box-shadow: 0 0 0 4px rgba(76,175,122,0); }
}

.piko-pulse-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 280px;
  background: rgba(6,8,16,.97);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  backdrop-filter: blur(20px);
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
.piko-pulse-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.piko-pulse-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.piko-pulse-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hub-gold);
}
.piko-pulse-refresh {
  background: none;
  border: none;
  color: var(--hub-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .15s;
}
.piko-pulse-refresh:hover { color: var(--hub-gold); }

.piko-pulse-list {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,.2) transparent;
}

.piko-pulse-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  animation: pulseItemIn .2s ease;
}
@keyframes pulseItemIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.piko-pulse-item:last-child { border-bottom: none; }

.piko-pulse-type {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.piko-pulse-type--idea       { background: rgba(201,168,76,.12); color: var(--hub-gold); }
.piko-pulse-type--suggestion { background: rgba(84,209,255,.1);  color: var(--hub-blue); }

.piko-pulse-content { min-width: 0; }
.piko-pulse-text {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.piko-pulse-meta {
  font-size: 10px;
  color: var(--hub-muted);
  margin-top: 3px;
}

.piko-pulse-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--hub-muted);
  font-size: 12px;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .piko-community-grid {
    grid-template-columns: 1fr;
  }
  .piko-submit-card {
    position: static;
  }
  .piko-pulse {
    bottom: 84px;
    left: 16px;
  }
}

@media (max-width: 600px) {
  .piko-community { padding: 60px 16px; }
  .piko-dock-inner { height: 64px; }
  .dock-icon { width: 34px; height: 34px; }
  .dock-icon-wrap { width: 34px; height: 34px; }
  .piko-pulse { display: none; } /* too cramped on small screens */
}

[hidden] { display: none !important; }

/* ══════════════════════════════════════════════
   4. PROJECT SUBMISSIONS
   ══════════════════════════════════════════════ */

/* ── Submit section ── */
.piko-projects-section {
  padding: 100px 24px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(201,168,76,.08);
}
.piko-projects-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 70% 30%, rgba(84,209,255,.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 20% 70%, rgba(201,168,76,.04) 0%, transparent 70%);
  pointer-events: none;
}
.piko-projects-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.piko-projects-header {
  text-align: center;
  margin-bottom: 60px;
}
.piko-projects-header .eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--hub-blue); margin-bottom: 12px; display: block;
}
.piko-projects-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 700; color: #fff;
  margin-bottom: 16px; line-height: 1.2;
}
.piko-projects-header p {
  font-size: 15px; color: var(--hub-muted);
  max-width: 540px; margin: 0 auto; line-height: 1.7;
}

/* ── Two-column layout ── */
.piko-projects-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 40px;
  align-items: start;
}

/* ── Submit form card ── */
.piko-project-form-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  padding: 28px;
  position: sticky;
  top: 90px;
}
.piko-project-form-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--hub-blue);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.piko-project-form-card h3::before {
  content: '';
  display: block; width: 4px; height: 16px;
  background: var(--hub-blue); border-radius: 2px;
}

/* Stage selector pills */
.hub-stage-wrap {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hub-stage-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
  background: none;
  color: var(--hub-muted);
  font-size: 11px; font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all .15s;
}
.hub-stage-btn:hover { border-color: var(--hub-blue); color: var(--hub-blue); }
.hub-stage-btn.is-active {
  background: rgba(84,209,255,.12);
  border-color: rgba(84,209,255,.4);
  color: var(--hub-blue);
}
.hub-stage-btn[data-stage="idea"].is-active {
  background: rgba(201,168,76,.12);
  border-color: rgba(201,168,76,.4);
  color: var(--hub-gold-light);
}
.hub-stage-btn[data-stage="live"].is-active {
  background: rgba(76,175,122,.12);
  border-color: rgba(76,175,122,.4);
  color: var(--hub-green);
}

/* Tech tags input */
.hub-tags-wrap {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.hub-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: rgba(84,209,255,.08);
  border: 1px solid rgba(84,209,255,.2);
  border-radius: 20px;
  font-size: 11px; font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  color: var(--hub-blue);
  animation: tagIn .15s ease;
}
@keyframes tagIn {
  from { opacity:0; transform: scale(.85); }
  to   { opacity:1; transform: scale(1); }
}
.hub-tag-remove {
  background: none; border: none; cursor: pointer;
  color: rgba(84,209,255,.5); font-size: 12px;
  padding: 0; line-height: 1;
  transition: color .15s;
}
.hub-tag-remove:hover { color: var(--hub-blue); }

/* ── Pending approval notice ── */
.piko-project-pending-notice {
  display: none;
  text-align: center;
  padding: 28px 16px;
}
.piko-project-pending-notice.is-visible { display: block; }
.piko-project-pending-notice i {
  font-size: 36px; color: var(--hub-gold);
  margin-bottom: 12px; display: block;
}
.piko-project-pending-notice h4 { color: #fff; font-size: 16px; margin-bottom: 8px; }
.piko-project-pending-notice p  { color: var(--hub-muted); font-size: 13px; line-height: 1.6; }

/* ── Approved project cards (ecosystem section) ── */
.ecosystem-project-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(84,209,255,.12);
  border-radius: var(--hub-radius);
  padding: 22px;
  transition: border-color .2s, background .2s, transform .2s;
  position: relative;
  overflow: hidden;
  animation: ideaCardIn .25s ease;
}
.ecosystem-project-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--hub-blue), transparent);
  opacity: 0; transition: opacity .2s;
}
.ecosystem-project-card:hover {
  border-color: rgba(84,209,255,.3);
  background: rgba(255,255,255,.04);
  transform: translateY(-2px);
}
.ecosystem-project-card:hover::before { opacity: 1; }

.epc-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.epc-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 700;
  color: #fff;
}
.epc-stage {
  font-size: 10px; font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 10px; border-radius: 20px;
  flex-shrink: 0;
}
.epc-stage--idea     { background: rgba(201,168,76,.15); color: var(--hub-gold); }
.epc-stage--building { background: rgba(84,209,255,.12); color: var(--hub-blue); }
.epc-stage--live     { background: rgba(76,175,122,.12); color: var(--hub-green); }

.epc-desc {
  font-size: 13px; color: rgba(255,255,255,.6);
  line-height: 1.6; margin-bottom: 14px;
}

.epc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.epc-tag {
  font-size: 10px; font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  padding: 3px 9px; border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--hub-muted);
}

.epc-footer {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.epc-author {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--hub-muted);
}
.epc-author-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(84,209,255,.1);
  border: 1px solid rgba(84,209,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--hub-blue);
  font-family: 'Montserrat', sans-serif;
}
.epc-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  color: var(--hub-blue);
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid rgba(84,209,255,.25);
  background: rgba(84,209,255,.06);
  transition: background .15s, border-color .15s;
  text-decoration: none;
}
.epc-link:hover { background: rgba(84,209,255,.14); border-color: rgba(84,209,255,.5); }

/* Projects wall heading + empty */
.piko-proj-wall-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.piko-proj-wall-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--hub-muted);
}
.piko-proj-wall-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; color: var(--hub-muted);
}
.piko-proj-wall-count strong { color: var(--hub-blue); }

.piko-proj-wall { display: flex; flex-direction: column; gap: 14px; }

.piko-proj-empty {
  text-align: center; padding: 60px 20px;
  color: var(--hub-muted);
}
.piko-proj-empty i { font-size: 36px; opacity: .3; margin-bottom: 12px; display: block; }

/* ── Admin project review card ── */
.adm-proj-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.adm-proj-card-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.adm-proj-card-name {
  font-size: 14px; font-weight: 700; color: var(--text);
}
.adm-proj-card-stage {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 20px; flex-shrink: 0;
}
.adm-proj-card-desc {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.5; margin-bottom: 10px;
}
.adm-proj-card-meta {
  font-size: 11px; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 12px;
}
.adm-proj-card-meta a { color: var(--gold); }
.adm-proj-card-meta a:hover { color: var(--gold-light); }
.adm-proj-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .piko-projects-grid { grid-template-columns: 1fr; }
  .piko-project-form-card { position: static; }
}

/* ══════════════════════════════════════════════
   COMMUNITY SHOWCASE SECTION
   ══════════════════════════════════════════════ */
.piko-showcase-section {
  padding: 100px 24px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(201,168,76,.08);
}
.piko-showcase-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 40%, rgba(201,168,76,.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 85% 60%, rgba(84,209,255,.04) 0%, transparent 70%);
  pointer-events: none;
}
.piko-showcase-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.piko-showcase-header {
  text-align: center;
  margin-bottom: 56px;
}
.piko-showcase-eyebrow {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hub-gold);
  margin-bottom: 12px;
}
.piko-showcase-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.2;
}
.piko-showcase-header p {
  font-size: 15px;
  color: var(--hub-muted);
  max-width: 540px;
  margin: 0 auto 28px;
  line-height: 1.7;
}

/* Inline submit button in section header */
.piko-share-fab-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  background: linear-gradient(135deg, #54d1ff, #7ab3ff);
  color: #07060e;
  border: none;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  letter-spacing: .04em;
  transition: box-shadow .2s, transform .15s;
}
.piko-share-fab-inline:hover {
  box-shadow: 0 6px 24px rgba(84,209,255,.35);
  transform: translateY(-2px);
}

/* ── Featured card (Root Stall) ── */
.piko-showcase-featured { margin-bottom: 48px; }
.piko-featured-card {
  display: grid;
  grid-template-columns: 480px 1fr;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(201,168,76,.15);
  background: rgba(255,255,255,.025);
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
  transition: border-color .2s, transform .2s;
}
.piko-featured-card:hover {
  border-color: rgba(201,168,76,.35);
  transform: translateY(-4px);
}
.piko-featured-img {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 320px;
}
.piko-featured-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 50%, rgba(8,11,20,.95) 100%);
}
.piko-featured-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: linear-gradient(135deg, var(--hub-gold), var(--hub-gold-light));
  color: #07060e;
  font-size: 10px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: 20px;
}
.piko-featured-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.piko-featured-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.piko-featured-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}
.piko-featured-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.piko-featured-sub {
  font-size: 12px;
  color: var(--hub-muted);
  margin: 2px 0 0;
}
.piko-featured-stage {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.piko-stage--live { background: rgba(76,175,122,.15); color: var(--hub-green); border: 1px solid rgba(76,175,122,.3); }
.piko-stage--building { background: rgba(84,209,255,.12); color: var(--hub-blue); border: 1px solid rgba(84,209,255,.3); }
.piko-stage--idea { background: var(--hub-gold-dim); color: var(--hub-gold); border: 1px solid rgba(201,168,76,.3); }
.piko-featured-desc { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.7; }
.piko-featured-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.piko-featured-tags span {
  font-size: 10px; font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  padding: 3px 10px; border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--hub-muted);
}
.piko-featured-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--hub-gold-dim);
  border: 1px solid rgba(201,168,76,.3);
  color: var(--hub-gold-light);
  font-size: 13px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  width: fit-content;
  transition: background .18s, border-color .18s;
}
.piko-featured-link:hover { background: rgba(201,168,76,.25); border-color: var(--hub-gold); }

/* ── Community project wall ── */
.piko-showcase-wall-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 8px;
}
.piko-wall-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hub-muted);
}
.piko-wall-count { font-size: 12px; color: var(--hub-muted); }
.piko-wall-count strong { color: var(--hub-blue); }

.piko-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.piko-showcase-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--hub-muted);
}
.piko-showcase-empty i { font-size: 36px; opacity: .3; margin-bottom: 12px; display: block; }

/* ══════════════════════════════════════════════
   COMBINED SUBMIT MODAL
   ══════════════════════════════════════════════ */
.piko-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}
.piko-modal-backdrop.is-open { display: flex; }

.piko-modal {
  background: #0e0c1a;
  border: 1px solid var(--hub-border);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
  animation: pikoModalIn .22s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,.2) transparent;
}
@keyframes pikoModalIn {
  from { transform: scale(.95) translateY(12px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.piko-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
  position: sticky;
  top: 0;
  background: #0e0c1a;
  z-index: 2;
}
.piko-modal-header h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--hub-gold-light);
  letter-spacing: -.01em;
}
.piko-modal-close {
  width: 30px; height: 30px;
  border-radius: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--hub-muted); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.piko-modal-close:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Tabs */
.piko-modal-tabs {
  display: flex;
  gap: 0;
  padding: 16px 24px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: sticky;
  top: 52px;
  background: #0e0c1a;
  z-index: 2;
}
.piko-modal-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--hub-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.piko-modal-tab:hover { color: var(--hub-text); }
.piko-modal-tab.is-active { color: var(--hub-gold-light); border-bottom-color: var(--hub-gold); }

.piko-modal-body { padding: 20px 24px 24px; }
.piko-modal-intro {
  font-size: 13px;
  color: var(--hub-muted);
  line-height: 1.6;
  margin-bottom: 18px;
}

.piko-tab-pane { display: none; }
.piko-tab-pane.is-active { display: block; }

/* Extra form helpers */
.hub-req { color: #e05252; }
.hub-opt { color: rgba(255,255,255,.3); font-size: 10px; }
.hub-hint--err { color: #e05252 !important; }
.hub-submit-btn--blue {
  background: linear-gradient(135deg, #54d1ff, #7ab3ff) !important;
}

/* Success state inside modal */
.piko-modal-success {
  text-align: center;
  padding: 28px 0;
}
.piko-modal-success i { font-size: 36px; color: var(--hub-green); margin-bottom: 12px; display: block; }
.piko-modal-success h4 { color: #fff; font-size: 17px; margin-bottom: 8px; }
.piko-modal-success p { color: var(--hub-muted); font-size: 13px; line-height: 1.6; }
.piko-modal-again {
  margin-top: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 8px 18px;
  color: var(--hub-muted);
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: background .15s;
}
.piko-modal-again:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Floating share button */
.piko-share-fab {
  position: fixed;
  bottom: 90px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #54d1ff, #7ab3ff);
  color: #07060e;
  font-size: 20px;
  border: none;
  cursor: pointer;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(84,209,255,.4);
  transition: transform .2s, box-shadow .2s;
}
.piko-share-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(84,209,255,.6);
}

@media (max-width: 900px) {
  .piko-featured-card { grid-template-columns: 1fr; }
  .piko-featured-img { min-height: 220px; }
  .piko-featured-img-overlay { background: linear-gradient(180deg, transparent 40%, rgba(8,11,20,.95) 100%); }
  .piko-showcase-section { padding: 60px 16px; }
}
@media (max-width: 540px) {
  .piko-modal { border-radius: 12px; }
  .piko-share-fab { bottom: 84px; right: 20px; width: 48px; height: 48px; font-size: 18px; }
}

[hidden] { display: none !important; }

/* ══════════════════════════════════════════════
   AMP SINGLE-SLIDE — fills card like other ecosystem cards
   ══════════════════════════════════════════════ */

/* Give the card a defined min-height so the absolute child has a canvas */
/* ── AMP card — matches other ecosystem cards exactly ──
   platform-ecosystem.css sets padding:0 on .card-amp so we restore it here.
   justify-content:flex-end inherited from .ecosystem-card base.           ── */
.ecosystem-card.card-amp {
  padding: 32px !important;
  overflow: hidden;
  min-height: 620px;
}
.ecosystem-card.card-amp .project-link {
  color: var(--hub-gold-light);
}
.ecosystem-card.card-amp .project-link:hover {
  color: #fff;
}
/* Ensure video/overlay/glow don't mess up with the restored padding */
.ecosystem-card.card-amp .card-video,
.ecosystem-card.card-amp .card-video-overlay,
.ecosystem-card.card-amp .card-top-glow {
  position: absolute !important;
  z-index: 0;
}
.ecosystem-card.card-amp .card-video-overlay { z-index: 1; }
.ecosystem-card.card-amp .card-top-glow     { z-index: 1; }
/* All direct content children sit above the video */
.ecosystem-card.card-amp > *:not(.card-video):not(.card-video-overlay):not(.card-top-glow) {
  position: relative;
  z-index: 3;
}
@media (max-width: 768px) {
  .ecosystem-card.card-amp { padding: 24px !important; min-height: 520px; }
}


@media (max-width: 480px) {
  .ecosystem-card.card-amp {
    min-height: 480px;
  }
}

/* ══════════════════════════════════════════════
   ECOSYSTEM CARD — PROJECT LINK BUTTONS (all 4 cards)
   ══════════════════════════════════════════════ */

/* Base button style for all ecosystem card links */
.ecosystem-card .project-link,
.amp-slide-single .project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .03em;
  text-decoration: none;
  width: fit-content;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 3;
}
.ecosystem-card .project-link:hover,
.amp-slide-single .project-link:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
  color: #fff;
}

/* AMP card — gold marketplace button */
.amp-market-link {
  background: linear-gradient(135deg, rgba(201,168,76,.25), rgba(240,201,106,.18)) !important;
  border-color: rgba(201,168,76,.5) !important;
  color: #f0c96a !important;
  box-shadow: 0 4px 18px rgba(201,168,76,.15);
}
.amp-market-link:hover {
  background: linear-gradient(135deg, rgba(201,168,76,.40), rgba(240,201,106,.30)) !important;
  border-color: rgba(240,201,106,.75) !important;
  box-shadow: 0 8px 28px rgba(201,168,76,.35) !important;
  color: #fff !important;
}

/* Ikeverse — blue tint */
.card-ikeverse .project-link {
  border-color: rgba(84,209,255,.3);
  color: rgba(84,209,255,.9);
}
.card-ikeverse .project-link:hover {
  background: rgba(84,209,255,.12);
  border-color: rgba(84,209,255,.6);
  color: #54d1ff;
}

/* Historical — muted purple tint */
.card-history .project-link {
  border-color: rgba(157,100,255,.3);
  color: rgba(200,160,255,.9);
}
.card-history .project-link:hover {
  background: rgba(157,100,255,.12);
  border-color: rgba(200,160,255,.5);
  color: #c8a0ff;
}

/* NaluLF — teal/green tint */
.card-nalulf .project-link {
  border-color: rgba(76,200,160,.3);
  color: rgba(76,200,160,.9);
}
.card-nalulf .project-link:hover {
  background: rgba(76,200,160,.12);
  border-color: rgba(76,200,160,.6);
  color: #4cc8a0;
}

/* ══════════════════════════════════════════════
   FEATURED SHOWCASE CARD — taller image side
   ══════════════════════════════════════════════ */
.piko-featured-card {
  grid-template-columns: 520px 1fr;
}
.piko-featured-img {
  min-height: 420px;
}

@media (max-width: 1000px) {
  .piko-featured-card { grid-template-columns: 1fr; }
  .piko-featured-img { min-height: 280px; }
}

/* ── Admin dock node — muted, not public-facing ── */
.dock-node--admin .dock-icon-wrap {
  opacity: .45;
  transition: opacity .2s;
}
.dock-node--admin:hover .dock-icon-wrap {
  opacity: .85;
}
.dock-node--admin .dock-node-name {
  color: rgba(255,255,255,.22);
}
.dock-node--admin:hover .dock-node-name {
  color: rgba(255,255,255,.55);
}
.dock-node--admin .dock-status-ring {
  border-color: rgba(255,255,255,.12) !important;
  animation: none !important;
}
.dock-node--admin .dock-status-dot {
  background: rgba(255,255,255,.2) !important;
}

/* ── Pikoverse footer admin icon ── */
.footer-admin-access {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  margin-left: 10px;
  vertical-align: middle;
  color: rgba(255,255,255,.14);
  font-size: 13px;
  text-decoration: none;
  transition: color .2s, background .2s;
}
.footer-admin-access:hover {
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════════════════════
   PIKOVERSE CHRONICLE
═══════════════════════════════════════════════════════════════ */
.piko-chronicle-section {
  padding: 80px 0 60px;
  background: linear-gradient(180deg, #07060e 0%, #0b0919 100%);
  position: relative;
  overflow: hidden;
}
.piko-chronicle-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.3), transparent);
}
.piko-chronicle-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.piko-chronicle-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.piko-chronicle-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 800;
  color: #fff;
  margin: 6px 0 10px;
  line-height: 1.15;
}
.piko-chronicle-sub {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  max-width: 480px;
  line-height: 1.6;
}

/* Filter buttons */
.piko-chronicle-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  padding-top: 8px;
}
.piko-chron-filter {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.5);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.piko-chron-filter:hover { border-color: rgba(201,168,76,.4); color: #f0c96a; }
.piko-chron-filter.is-active {
  background: rgba(201,168,76,.12);
  border-color: rgba(201,168,76,.4);
  color: #f0c96a;
}

/* Article grid */
.piko-chronicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

/* Article card */
.piko-chron-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.piko-chron-card:hover {
  border-color: rgba(201,168,76,.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.piko-chron-card--pinned {
  border-color: rgba(201,168,76,.25);
  background: rgba(201,168,76,.04);
}

/* Card image */
.piko-chron-card-img {
  height: 160px;
  background: rgba(255,255,255,.04);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.piko-chron-default-icon {
  font-size: 48px;
  opacity: .35;
  filter: grayscale(1);
}
.piko-chron-pin-badge {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(201,168,76,.85);
  color: #080b14;
  letter-spacing: .04em;
}

/* Card body */
.piko-chron-card-body {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.piko-chron-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.piko-chron-cat {
  font-size: 11px;
  font-weight: 700;
  color: #f0c96a;
  letter-spacing: .04em;
}
.piko-chron-source {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.05);
  padding: 2px 8px;
  border-radius: 4px;
}
.piko-chron-date {
  font-size: 10px;
  color: rgba(255,255,255,.25);
  margin-left: auto;
}
.piko-chron-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}
.piko-chron-card:hover .piko-chron-title { color: #f0c96a; }
.piko-chron-excerpt {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
  flex: 1;
}
.piko-chron-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.piko-chron-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.45);
}
.piko-chron-read {
  font-size: 12px;
  font-weight: 700;
  color: rgba(201,168,76,.65);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}
.piko-chron-card:hover .piko-chron-read { color: #f0c96a; }

/* Load more */
.piko-chronicle-more { text-align: center; margin-top: 8px; }
.piko-chron-more-btn {
  padding: 10px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.5);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .18s;
}
.piko-chron-more-btn:hover { border-color: rgba(201,168,76,.4); color: #f0c96a; }

/* Empty state */
.piko-chronicle-empty {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255,255,255,.3);
}
.piko-chronicle-empty i { font-size: 40px; margin-bottom: 14px; display: block; opacity: .3; }

/* ═══════════════════════════════════════════════════════════════
   SUBMISSION CHECKER
═══════════════════════════════════════════════════════════════ */
.piko-check-section {
  padding: 40px 0;
  background: rgba(201,168,76,.03);
  border-top: 1px solid rgba(201,168,76,.1);
  border-bottom: 1px solid rgba(201,168,76,.08);
}
.piko-check-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}
.piko-check-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.piko-check-heading i {
  font-size: 22px;
  color: rgba(201,168,76,.6);
  flex-shrink: 0;
}
.piko-check-heading h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #f0c96a;
  margin: 0 0 4px;
}
.piko-check-heading p {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin: 0;
  line-height: 1.5;
}
.piko-check-form {
  display: flex;
  gap: 8px;
}
.piko-check-input {
  flex: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 11px 14px;
  color: #fff;
  font-size: 13px;
  font-family: 'Orbitron', monospace;
  outline: none;
  transition: border-color .18s;
  min-width: 0;
}
.piko-check-input:focus { border-color: rgba(201,168,76,.5); }
.piko-check-input::placeholder { font-family: 'Exo 2', sans-serif; color: rgba(255,255,255,.25); font-size: 12px; }
.piko-check-btn {
  padding: 11px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #c9a84c, #f0c96a);
  color: #080b14;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: filter .18s;
}
.piko-check-btn:hover { filter: brightness(1.08); }

/* Result card */
.piko-check-result {
  margin-top: 14px;
  border-radius: 10px;
  padding: 16px;
  font-size: 13px;
  animation: pikoFadeIn .2s ease;
}
@keyframes pikoFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.piko-check-result--found {
  background: rgba(76,175,122,.08);
  border: 1px solid rgba(76,175,122,.2);
}
.piko-check-result--error {
  background: rgba(224,82,82,.08);
  border: 1px solid rgba(224,82,82,.2);
  color: #f08080;
}

/* Found submission card */
.piko-check-card { display: flex; flex-direction: column; gap: 10px; }
.piko-check-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.4); }
.piko-check-text { font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.5; }
.piko-check-status { font-size: 12px; font-weight: 700; }
.piko-check-status.reviewed { color: #4caf7a; }
.piko-check-status.pending  { color: #ff9f47; }
.piko-check-status.approved { color: #4caf7a; }
.piko-check-status.dismissed{ color: rgba(255,255,255,.35); }
.piko-check-reply { background: rgba(76,175,122,.07); border-left: 2px solid #4caf7a; padding: 10px 12px; border-radius: 0 6px 6px 0; }
.piko-check-reply-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #4caf7a; margin-bottom: 5px; }
.piko-check-reply-text { font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.5; }
.piko-check-pending { font-size: 12px; color: rgba(255,255,255,.4); font-style: italic; margin: 0; }

/* Submission ID box in modal success */
.piko-modal-id-box {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
  text-align: center;
}
.piko-modal-id-label {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  margin-bottom: 6px;
}
.piko-modal-id-code {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  color: #f0c96a;
  word-break: break-all;
  display: block;
  letter-spacing: .04em;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .piko-chronicle-header { flex-direction: column; }
  .piko-chronicle-grid { grid-template-columns: 1fr; }
  .piko-chronicle-filters { gap: 4px; }
  .piko-chron-filter { font-size: 11px; padding: 5px 10px; }
  .piko-check-form { flex-direction: column; }
  .piko-check-btn { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   AMP INTRO CARDS — Mobile fixes
   Overrides css/index.css on small screens to make all 3 cards
   (Foundation, Ecosystem, Mission) match in height, layout and
   ensure no content/buttons are clipped.
═══════════════════════════════════════════════════════════════ */

/* Stack to single column on mobile */
@media (max-width: 768px) {
  .amp-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .amp-card {
    width: 100% !important;
    min-width: 0 !important;
    /* Let height grow with content — never clip */
    height: auto !important;
    min-height: 300px !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Video fills the card as a background */
  .amp-card-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    border-radius: 16px !important;
  }

  /* Overlay sits above video */
  .amp-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(
      to bottom,
      rgba(5, 8, 18, 0.3) 0%,
      rgba(5, 8, 18, 0.75) 60%,
      rgba(5, 8, 18, 0.92) 100%
    ) !important;
    border-radius: 16px !important;
  }

  .amp-card-border,
  .amp-card-sweep {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    border-radius: 16px !important;
  }

  /* Content sits on top — full height, padded, scrollable if needed */
  .amp-card-content {
    position: relative !important;
    z-index: 3 !important;
    padding: 120px 22px 28px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    /* Never clip buttons */
    overflow: visible !important;
  }

  .amp-card-content h3 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
    color: #fff !important;
  }

  .amp-card-content p {
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: 16px !important;
  }

  /* Any button / CTA inside the card — always fully visible */
  .amp-card-content a,
  .amp-card-content button {
    position: relative !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* Prevent card overflow from clipping it */
    overflow: visible !important;
    margin-bottom: 4px !important;
  }

  /* Make all 3 cards the same height */
  .amp-foundation,
  .amp-ecosystem,
  .amp-mission {
    min-height: 360px !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .amp-card-content {
    padding: 100px 18px 24px !important;
  }

  .amp-card-content h3 {
    font-size: 16px !important;
  }

  .amp-card-content p {
    font-size: 12px !important;
  }

  .amp-foundation,
  .amp-ecosystem,
  .amp-mission {
    min-height: 320px !important;
  }
}



/* ═══════════════════════════════════════════════════════════════
   AMP INTRO CARDS — Mobile fixes (Foundation / Ecosystem / Mission)
   These are the .amp-card elements in #amp-intro — separate from
   the ecosystem section .card-amp above.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .amp-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .amp-card {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 380px !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: none !important;
  }

  .amp-card-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  .amp-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(to bottom, rgba(5,8,18,.25) 0%, rgba(5,8,18,.72) 55%, rgba(5,8,18,.93) 100%) !important;
    pointer-events: none !important;
  }

  .amp-card-border, .amp-card-sweep {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .amp-card-content {
    position: relative !important;
    z-index: 3 !important;
    padding: 200px 20px 28px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .amp-card-content a,
  .amp-card-content button {
    position: relative !important;
    z-index: 4 !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .amp-card-content { padding: 220px 20px 30px !important; }
}

@media (max-width: 420px) {
  .amp-card { min-height: 340px !important; }
  .amp-card-content { padding: 180px 16px 24px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV + PIKO DOCK — definitive fix
   
   THE PROBLEM: .piko-dock is position:sticky; top:0 and is the
   FIRST element in the DOM. The fixed site-header is ALSO at
   top:0. On iOS Safari, sticky elements that occupy the same
   screen area as fixed elements intercept touch events even when
   they have a lower z-index — so the hamburger and logo get
   blocked.
   
   THE FIX: On mobile, remove sticky behaviour from piko-dock
   entirely (position:relative) AND add margin-top:80px so it
   starts below the fixed header in the normal flow. This means
   the dock will scroll with the page on mobile — acceptable
   trade-off to keep the header fully interactive.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Header must win everything */
  .site-header {
    z-index: 2000 !important;
    pointer-events: auto !important;
  }

  /* Dock scrolls with the page — no longer sticky on mobile.
     margin-top pushes its natural position BELOW the fixed header
     so it never overlaps it, even before any scrolling. */
  .piko-dock {
    position: relative !important;
    top: auto !important;
    margin-top: 80px !important;
    z-index: 50 !important;
    pointer-events: auto;
  }

  /* Mobile nav drawer — shows below header when toggle fires */
  .mobile-menu-toggle {
    position: relative !important;
    z-index: 2001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  .main-nav {
    z-index: 1999 !important;
    pointer-events: none;
  }

  .main-nav.show {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1999 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE COVER IMAGE — Drop zone
═══════════════════════════════════════════════════════════════ */
.adm-art-img-zone {
  position: relative;
  width: 100%;
  min-height: 140px;
  border: 2px dashed rgba(255,255,255,.12);
  border-radius: var(--radius, 8px);
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, background .2s;
  user-select: none;
}
.adm-art-img-zone:hover,
.adm-art-img-zone.is-dragging {
  border-color: var(--gold, #f0c96a);
  background: rgba(201,168,76,.06);
}
.adm-art-img-zone.is-dragging {
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(201,168,76,.18);
}
.adm-art-img-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.adm-art-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}
.adm-art-img-placeholder i {
  font-size: 28px;
  color: rgba(255,255,255,.2);
}
.adm-art-img-main-text {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
}
.adm-art-img-sub-text {
  font-size: 11px;
  color: rgba(255,255,255,.25);
}
.adm-art-img-preview-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.adm-art-img-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.adm-art-img-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background .15s;
}
.adm-art-img-clear:hover { background: rgba(224,82,82,.8); }

/* ═══════════════════════════════════════════════════════════════
   CHRONICLE + SUBMISSION CHECKER
═══════════════════════════════════════════════════════════════ */
══════
   PIKOVERSE CHRONICLE
═══════════════════════════════════════════════════════════════ */
.piko-chronicle-section {
  padding: 80px 0 60px;
  background: linear-gradient(180deg, #07060e 0%, #0b0919 100%);
  position: relative;
  overflow: hidden;
}
.piko-chronicle-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.3), transparent);
}
.piko-chronicle-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.piko-chronicle-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.piko-chronicle-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 800;
  color: #fff;
  margin: 6px 0 10px;
  line-height: 1.15;
}
.piko-chronicle-sub {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  max-width: 480px;
  line-height: 1.6;
}

/* Filter buttons */
.piko-chronicle-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  padding-top: 8px;
}
.piko-chron-filter {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.5);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.piko-chron-filter:hover { border-color: rgba(201,168,76,.4); color: #f0c96a; }
.piko-chron-filter.is-active {
  background: rgba(201,168,76,.12);
  border-color: rgba(201,168,76,.4);
  color: #f0c96a;
}

/* Article grid */
.piko-chronicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

/* Article card */
.piko-chron-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.piko-chron-card:hover {
  border-color: rgba(201,168,76,.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.piko-chron-card--pinned {
  border-color: rgba(201,168,76,.25);
  background: rgba(201,168,76,.04);
}

/* Card image */
.piko-chron-card-img {
  height: 160px;
  background: rgba(255,255,255,.04);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.piko-chron-default-icon {
  font-size: 48px;
  opacity: .35;
  filter: grayscale(1);
}
.piko-chron-pin-badge {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(201,168,76,.85);
  color: #080b14;
  letter-spacing: .04em;
}

/* Card body */
.piko-chron-card-body {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.piko-chron-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.piko-chron-cat {
  font-size: 11px;
  font-weight: 700;
  color: #f0c96a;
  letter-spacing: .04em;
}
.piko-chron-source {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.05);
  padding: 2px 8px;
  border-radius: 4px;
}
.piko-chron-date {
  font-size: 10px;
  color: rgba(255,255,255,.25);
  margin-left: auto;
}
.piko-chron-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}
.piko-chron-card:hover .piko-chron-title { color: #f0c96a; }
.piko-chron-excerpt {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
  flex: 1;
}
.piko-chron-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.piko-chron-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.45);
}
.piko-chron-read {
  font-size: 12px;
  font-weight: 700;
  color: rgba(201,168,76,.65);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}
.piko-chron-card:hover .piko-chron-read { color: #f0c96a; }

/* Load more */
.piko-chronicle-more { text-align: center; margin-top: 8px; }
.piko-chron-more-btn {
  padding: 10px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.5);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .18s;
}
.piko-chron-more-btn:hover { border-color: rgba(201,168,76,.4); color: #f0c96a; }

/* Empty state */
.piko-chronicle-empty {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255,255,255,.3);
}
.piko-chronicle-empty i { font-size: 40px; margin-bottom: 14px; display: block; opacity: .3; }





/* ═══════════════════════════════════════════════════════════════
   ALOHA FOUNDATION CARDS — meaning-card alignment fix
═══════════════════════════════════════════════════════════════ */
.meaning-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 260px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end; /* pin content to bottom */
}

.meaning-card .card-content {
  width: 100%;
  padding: 24px 20px 20px;
  background: linear-gradient(0deg, rgba(6,8,16,.92) 0%, rgba(6,8,16,.6) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meaning-card .card-content h3 {
  font-family: 'Orbitron', 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #f0c96a;
  margin: 0;
  line-height: 1.2;
}

.meaning-card .card-content .meaning-subtitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0 0 6px;
}

.meaning-card .card-content p:not(.meaning-subtitle) {
  font-size: 13px;
  color: rgba(255,255,255,.75);
  line-height: 1.55;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE HAMBURGER NAV — dropdown with icons
═══════════════════════════════════════════════════════════════ */

/* Hamburger button — only visible on mobile */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 8px;
  color: rgba(255,255,255,.8);
  font-size: 18px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.mobile-menu-toggle:hover {
  background: rgba(201,168,76,.1);
  color: #f0c96a;
}
.mobile-menu-toggle.is-open {
  background: rgba(201,168,76,.12);
  color: #f0c96a;
}

/* Dropdown nav panel */
.mobile-nav-dropdown {
  display: none;
  flex-direction: column;
  background: rgba(6, 8, 18, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,168,76,.15);
  padding: 8px 0;
  position: relative;
  z-index: 1900;
}

.mobile-nav-dropdown.is-open {
  display: flex;
}

.mnd-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  text-decoration: none;
  color: rgba(255,255,255,.7);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.mnd-item:last-child { border-bottom: none; }
.mnd-item i {
  width: 20px;
  text-align: center;
  color: var(--hub-gold, #c9a84c);
  font-size: 15px;
}
.mnd-item:hover,
.mnd-item:active {
  background: rgba(201,168,76,.07);
  color: #f0c96a;
}
.mnd-connect {
  color: #f0c96a;
  font-weight: 700;
}
.mnd-connect i { color: #f0c96a; }

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }
  /* Hide desktop nav links on mobile */
  .main-nav { display: none !important; }
  /* Remove the old piko-dock margin fix */
  .piko-dock {
    margin-top: 0 !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   ALOHA FOUNDATION CARD ALIGNMENT FIX
   The translateY(1rem) on .card-content hides content on mobile
   (no hover state on touch screens). Always show content fully.
   Also fix internal spacing so h3 / subtitle pill / description
   all sit cleanly without overlap.
───────────────────────────────────────────────────────────── */

/* Always show content fully — remove the hidden offset */
.meaning-card .card-content {
  transform: translateY(0) !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* Give the card-content glass panel more breathing room */
.meaning-card .card-content::before {
  height: 100% !important;
  top: 0 !important;
  border-radius: 16px !important;
}

/* Title */
.meaning-card h3 {
  font-size: clamp(1.35rem, 3.5vw, 1.8rem);
  margin-bottom: 6px !important;
  line-height: 1.2;
}

/* Subtitle pill */
.meaning-card .meaning-subtitle {
  margin-bottom: 10px !important;
  margin-top: 2px;
}

/* Body description */
.meaning-card p:last-child {
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  margin-top: 0 !important;
}

/* On mobile — always visible, no clip */
@media (max-width: 768px) {
  .meaning-card {
    min-height: 18rem !important;
    align-items: flex-end !important;
  }
  .meaning-card .card-content {
    transform: none !important;
    padding: 1.15rem !important;
  }
  .meaning-card h3 { font-size: 1.35rem !important; }
  .meaning-card p:last-child { font-size: 0.9rem !important; }
}