/* ==========================================================================
   brick.css – NoesisPulse Brick System
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; background: #fafafa; }
body {
  background: inherit;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}
.site-canvas { display: flex; flex-direction: column; min-height: 100vh; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

.b1 { width: 100%; padding: 3rem 1rem; }
.b2 { width: 100%; padding: 2rem 1rem; }
.b3 { width: 100%; padding: 1.5rem 1rem; }
.b4 { width: 66%; margin: 0 auto; padding: 1rem; }
.b5 { width: 50%; margin: 0 auto; padding: 1rem; }
.b6 { width: 33%; margin: 0 auto; padding: 0.75rem; }
.b7 { display: inline-block; margin: 0 auto; padding: 0.5rem; }
.b8 { display: inline-block; padding: 0.25rem; }

@media (max-width: 768px) { .b4, .b5, .b6 { width: 100%; } .b1 { padding: 2rem 0.5rem; } }

.np-nav { padding: 1rem 0; border-bottom: 1px solid #e0e0e0; justify-items: center; }
.np-nav ul { display: flex; gap: 0.75rem; list-style: none; flex-wrap: wrap; }
.np-nav-link { cursor: pointer; text-decoration: none; color: #333; font-weight: 500; transition: color 0.2s; }
.np-nav-link:hover { color: #0066cc; }

.hero-brick { text-align: center; }
.np-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.np-subtitle { font-size: 1.2rem; color: #666; }

.text-brick { line-height: 1.7; }
.np-h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.np-text { color: #444; }

.cards-brick { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; width: 100%; }
.card-item {
  width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.5rem; text-align: center;
  transition: transform 0.15s, box-shadow 0.15s; cursor: pointer;
}
.card-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.cta-brick { text-align: center; padding: 2rem; }
.np-btn {
  display: inline-block; padding: 0.75rem 2rem; background: #0066cc; color: #fff;
  text-decoration: none; border-radius: 6px; font-weight: 600;
  transition: background 0.2s, transform 0.1s;
}
.np-btn:hover { background: #004499; transform: scale(1.02); box-shadow: 0 0 20px rgba(0,102,204,0.5); }

.np-footer { margin-top: auto; padding: 1.5rem 0; text-align: center; color: #121112; font-size: 0.9rem; border-top: 1px solid #e0e0e0; }
.np-content { flex: 1; }

/* === PALETTES === */

/* neutral-light (default) */
[data-palette="neutral-light"] { --bg: #fafafa; --fg: #1a1a1a; --accent: #0066cc; }
[data-palette="neutral-light"] .np-nav { background: #f5f5f5; border-bottom-color: #e0e0e0; }
[data-palette="neutral-light"] .np-footer { background: #f5f5f5; border-top-color: #e0e0e0; }

/* neutral-dark */
[data-palette="neutral-dark"] { background: #1a1a1a; color: #e0e0e0; }
[data-palette="neutral-dark"] .np-nav { background: #2a2a2a; border-bottom-color: #444; }
[data-palette="neutral-dark"] .np-nav-link { color: #ccc; }
[data-palette="neutral-dark"] .np-nav-link:hover { color: #66aaff; }
[data-palette="neutral-dark"] .np-footer { background: #2a2a2a; border-top-color: #444; color: #888; }
[data-palette="neutral-dark"] .card-item { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
[data-palette="neutral-dark"] .np-btn { background: #0066cc; }
[data-palette="neutral-dark"] .np-btn:hover { box-shadow: 0 0 20px rgba(0,102,204,0.5); }
[data-palette="neutral-dark"] .np-subtitle { color: #999; }
[data-palette="neutral-dark"] .np-text { color: #ccc; }
[data-palette="neutral-dark"] .np-title { color: #fff; }
[data-palette="neutral-dark"] .np-h2 { color: #ddd; }
[data-palette="neutral-dark"] .np-input { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
[data-palette="neutral-dark"] .np-input:focus { border-color: #66aaff; }
[data-palette="neutral-dark"] .np-inline-img { box-shadow: 0 4px 20px rgba(0,0,0,0.4); }

/* warm-food */
[data-palette="warm-food"] { background: #fff8f0; color: #3d2b1a; }
[data-palette="warm-food"] .np-nav { background: #fff7ed; border-bottom-color: #fdba74; }
[data-palette="warm-food"] .np-footer { background: #fff7ed; border-top-color: #fdba74; }
[data-palette="warm-food"] .np-btn { background: #e8751a; }

/* tech-blue */
[data-palette="tech-blue"] { background: #f0f5ff; color: #0a1a3a; }
[data-palette="tech-blue"] .np-nav { background: #c5c4ff; border-bottom-color: #010c31; }
[data-palette="tech-blue"] .np-footer { background: #c5c4ff; border-top-color: #010c31; }
[data-palette="tech-blue"] .np-btn { background: #1a56db; }
[data-palette="tech-blue"] .np-btn:hover { box-shadow: 0 0 20px rgba(26,86,219,0.5); }

/* minimal-mono */
[data-palette="minimal-mono"] { font-family: 'Courier New', monospace; background: #fff; color: #111; }
[data-palette="minimal-mono"] .np-btn { background: #111; border-radius: 0; }

/* dark-blue */
[data-palette="dark-blue"] { background: #0d1b2a; color: #e0e8f0; }
[data-palette="dark-blue"] .np-nav { background: #111f30; border-bottom-color: #1a3350; }
[data-palette="dark-blue"] .np-nav-link { color: #8ab4f8; }
[data-palette="dark-blue"] .np-nav-link:hover { color: #c0d8ff; }
[data-palette="dark-blue"] .np-footer { background: #111f30; border-top-color: #1a3350; color: #8899aa; }
[data-palette="dark-blue"] .card-item { background: #152238; border-color: #1a3350; color: #e0e8f0; }
[data-palette="dark-blue"] .card-item:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(58,127,216,0.3); }
[data-palette="dark-blue"] .np-btn { background: #2a5fa8; color: #fff; border-radius: 8px; }
[data-palette="dark-blue"] .np-btn:hover { background: #3a7fd8; transform: scale(1.03); box-shadow: 0 0 24px rgba(58,127,216,0.6), 0 0 8px rgba(58,127,216,0.3); }
[data-palette="dark-blue"] .np-input { background: #152238; border-color: #1a3350; color: #e0e8f0; }
[data-palette="dark-blue"] .np-input:focus { border-color: #2a5fa8; box-shadow: 0 0 8px rgba(42,95,168,0.4); }
[data-palette="dark-blue"] .np-title { color: #ffffff; }
[data-palette="dark-blue"] .np-subtitle { color: #8aa0c0; }
[data-palette="dark-blue"] .np-h2 { color: #c0d8ff; }
[data-palette="dark-blue"] .np-text { color: #c0d0e0; }
[data-palette="dark-blue"] .hero-brick p { color: #8aa0c0; }
[data-palette="dark-blue"] .np-inline-img { box-shadow: 0 4px 20px rgba(0,0,0,0.5); }

/* nature-green */
[data-palette="nature-green"] { background: #f0f7f0; color: #1a2a1a; }
[data-palette="nature-green"] .np-nav { background: #e0efe0; border-bottom-color: #8cbf8c; }
[data-palette="nature-green"] .np-footer { background: #e0efe0; border-top-color: #8cbf8c; }
[data-palette="nature-green"] .np-btn { background: #2d7d2d; }
[data-palette="nature-green"] .np-btn:hover { background: #3da03d; box-shadow: 0 0 20px rgba(45,125,45,0.5); }
[data-palette="nature-green"] .card-item { background: #fff; border-color: #c0dfc0; }

/* luxury-gold */
[data-palette="luxury-gold"] { background: #1a1a0a; color: #e0d8c0; }
[data-palette="luxury-gold"] .np-nav { background: #2a2a10; border-bottom-color: #8a7a30; }
[data-palette="luxury-gold"] .np-nav-link { color: #d4b860; }
[data-palette="luxury-gold"] .np-nav-link:hover { color: #f0d878; }
[data-palette="luxury-gold"] .np-footer { background: #2a2a10; border-top-color: #8a7a30; color: #aa9a60; }
[data-palette="luxury-gold"] .np-btn { background: #8a7a30; }
[data-palette="luxury-gold"] .np-btn:hover { background: #a09040; box-shadow: 0 0 20px rgba(138,122,48,0.5); }
[data-palette="luxury-gold"] .card-item { background: #2a2a10; border-color: #5a4a20; color: #e0d8c0; }
[data-palette="luxury-gold"] .np-input { background: #2a2a10; border-color: #5a4a20; color: #e0d8c0; }
[data-palette="luxury-gold"] .np-input:focus { border-color: #8a7a30; }

/* bold-contrast */
[data-palette="bold-contrast"] { background: #000; color: #fff; }
[data-palette="bold-contrast"] .np-nav { background: #111; border-bottom-color: #fff; }
[data-palette="bold-contrast"] .np-nav-link { color: #fff; }
[data-palette="bold-contrast"] .np-nav-link:hover { color: #ff0; }
[data-palette="bold-contrast"] .np-footer { background: #111; border-top-color: #fff; color: #aaa; }
[data-palette="bold-contrast"] .np-btn { background: #fff; color: #000; }
[data-palette="bold-contrast"] .np-btn:hover { background: #ff0; color: #000; box-shadow: 0 0 20px rgba(255,255,255,0.5); }
[data-palette="bold-contrast"] .card-item { background: #111; border-color: #333; color: #fff; }
[data-palette="bold-contrast"] .np-input { background: #111; border-color: #333; color: #fff; }

/* cafe-warm */
[data-palette="cafe-warm"] { background: #faf0e6; color: #3d2b1a; }
[data-palette="cafe-warm"] .np-nav { background: #f5e6d3; border-bottom-color: #d4b896; }
[data-palette="cafe-warm"] .np-footer { background: #f5e6d3; border-top-color: #d4b896; }
[data-palette="cafe-warm"] .np-btn { background: #8b6914; }
[data-palette="cafe-warm"] .np-btn:hover { background: #a07820; box-shadow: 0 0 20px rgba(139,105,20,0.5); }

/* kids-playful */
[data-palette="kids-playful"] { background: #fffbe6; color: #333; }
[data-palette="kids-playful"] .np-nav { background: #ffe0f0; border-bottom-color: #ff90b0; }
[data-palette="kids-playful"] .np-footer { background: #ffe0f0; border-top-color: #ff90b0; }
[data-palette="kids-playful"] .np-btn { background: #ff60a0; border-radius: 20px; }
[data-palette="kids-playful"] .np-btn:hover { background: #ff80c0; box-shadow: 0 0 20px rgba(255,96,160,0.5); }
[data-palette="kids-playful"] .card-item { background: #fff; border-color: #ffc0d0; border-radius: 16px; }

/* clean-print */
[data-palette="clean-print"] { background: #fff; color: #111; font-family: Georgia, serif; }
[data-palette="clean-print"] .np-nav { background: #fff; border-bottom: 2px solid #111; }
[data-palette="clean-print"] .np-footer { background: #fff; border-top: 2px solid #111; }
[data-palette="clean-print"] .np-btn { background: #111; border-radius: 0; }
[data-palette="clean-print"] .card-item { background: #fff; border: 1px solid #111; border-radius: 0; }

/* sharp-fitness */
[data-palette="sharp-fitness"] { background: #0a0a0a; color: #f0f0f0; }
[data-palette="sharp-fitness"] .np-nav { background: #1a1a1a; border-bottom-color: #ff4444; }
[data-palette="sharp-fitness"] .np-nav-link { color: #ff4444; }
[data-palette="sharp-fitness"] .np-footer { background: #1a1a1a; border-top-color: #ff4444; }
[data-palette="sharp-fitness"] .np-btn { background: #ff4444; }
[data-palette="sharp-fitness"] .np-btn:hover { background: #ff6666; box-shadow: 0 0 20px rgba(255,68,68,0.5); }
[data-palette="sharp-fitness"] .card-item { background: #1a1a1a; border-color: #333; }
[data-palette="sharp-fitness"] .np-input { background: #1a1a1a; border-color: #333; color: #f0f0f0; }

/* === Global elements === */
[data-guid] { cursor: pointer; }

.image-brick { text-align: center; padding: 1rem 0; }
.np-image {
  max-width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 0 0 6px rgba(255,255,255,0), 0 0 0 6px rgba(0,0,0,0.05), 0 4px 24px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.np-image:hover { transform: scale(1.01); }
.image-brick { position: relative; display: inline-block; }
.image-brick::after { content: ''; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 20px 6px rgba(0,0,0,0.12); pointer-events: none; }
.b5 .np-image { max-width: 75%; }
.b6 .np-image { max-width: 50%; }
.b7 .np-image { max-width: 33%; }
.b8 .np-image { max-width: 25%; }

.np-inline-img { float: left; max-width: 45%; margin: 0 1.5rem 1rem 0; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

.input-brick { display: flex; gap: 0.5rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.np-input { flex: 1; min-width: 200px; max-width: 400px; padding: 0.75rem 1rem; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; outline: none; transition: border-color 0.2s; }
.np-input:focus { border-color: #0066cc; }
.np-input-btn { cursor: pointer; }

.np-text, .card-item, .np-subtitle, .hero-brick p { overflow-wrap: break-word; word-break: break-word; }
pre, code { white-space: pre-wrap; word-break: break-all; overflow-x: auto; }
.np-nav li:not(:last-child)::after { content: "|"; margin-left: 0.75rem; color: #999; pointer-events: none; }

/* Loading state */
body.np-loading { background: transparent; }
body.np-loading #np-main { pointer-events: none; }
body.np-loading::after {
  content: ''; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; z-index: 9999;
  animation: np-puzzle 1.2s ease-in-out infinite;
  --s: 26px;
  background:
    linear-gradient(#555 0 0) 0 0 / var(--s) var(--s),
    linear-gradient(#777 0 0) 100% 0 / var(--s) var(--s),
    linear-gradient(#999 0 0) 0 100% / var(--s) var(--s),
    linear-gradient(#666 0 0) 100% 100% / var(--s) var(--s);
  background-repeat: no-repeat;
}
@keyframes np-puzzle {
  0%, 100% { background-position: 0 0, 100% 0, 0 100%, 100% 100%; }
  25% { background-position: 100% 0, 100% 100%, 0 0, 0 100%; }
  50% { background-position: 100% 100%, 0 100%, 100% 0, 0 0; }
  75% { background-position: 0 100%, 0 0, 100% 100%, 100% 0; }
}

/* === BRICK LINK (external URL, no LLM interaction) === */
.brick-link {
  display: block; padding: 1.5rem; border-radius: 8px;
  text-decoration: none !important; color: inherit;
  border: 1px solid #e0e0e0; background: #fff;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.2s;
  cursor: pointer; position: relative;
}
.brick-link:hover { text-decoration: none !important; }
.brick-link:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); border-color: #aaa; }
.brick-link .np-h2 { margin-bottom: 0.3rem; }
.brick-link .np-text { font-size: 0.95rem; }
.brick-link-arrow {
  position: absolute; top: 1rem; right: 1rem;
  font-size: 1.1rem; opacity: 0.4; transition: opacity 0.2s;
}
.brick-link:hover .brick-link-arrow { opacity: 0.8; }

/* brick-link palettes */
[data-palette="dark-blue"] .brick-link { background: #152238; border-color: #1a3350; color: #e0e8f0; }
[data-palette="dark-blue"] .brick-link:hover { border-color: #2a5fa8; box-shadow: 0 4px 20px rgba(58,127,216,0.3); }
[data-palette="dark-blue"] .brick-link .np-h2 { color: #c0d8ff; }
[data-palette="dark-blue"] .brick-link .np-text { color: #c0d0e0; }

[data-palette="neutral-dark"] .brick-link { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
[data-palette="neutral-dark"] .brick-link:hover { border-color: #66aaff; box-shadow: 0 4px 12px rgba(102,170,255,0.2); }

[data-palette="warm-food"] .brick-link { background: #fff7ed; border-color: #fdba74; }
[data-palette="warm-food"] .brick-link:hover { border-color: #e8751a; }

[data-palette="tech-blue"] .brick-link { background: #f0f5ff; border-color: #a0b8ff; }
[data-palette="tech-blue"] .brick-link:hover { border-color: #1a56db; box-shadow: 0 4px 12px rgba(26,86,219,0.2); }

[data-palette="nature-green"] .brick-link { background: #fff; border-color: #c0dfc0; }
[data-palette="nature-green"] .brick-link:hover { border-color: #2d7d2d; box-shadow: 0 4px 12px rgba(45,125,45,0.2); }

[data-palette="luxury-gold"] .brick-link { background: #2a2a10; border-color: #5a4a20; color: #e0d8c0; }
[data-palette="luxury-gold"] .brick-link:hover { border-color: #8a7a30; box-shadow: 0 4px 12px rgba(138,122,48,0.3); }

[data-palette="bold-contrast"] .brick-link { background: #111; border-color: #333; color: #fff; }
[data-palette="bold-contrast"] .brick-link:hover { border-color: #fff; box-shadow: 0 4px 12px rgba(255,255,255,0.2); }

[data-palette="cafe-warm"] .brick-link { background: #f5e6d3; border-color: #d4b896; }
[data-palette="cafe-warm"] .brick-link:hover { border-color: #8b6914; }

[data-palette="kids-playful"] .brick-link { background: #fff; border-color: #ffc0d0; border-radius: 16px; }
[data-palette="kids-playful"] .brick-link:hover { border-color: #ff60a0; box-shadow: 0 4px 12px rgba(255,96,160,0.2); }

[data-palette="clean-print"] .brick-link { background: #fff; border: 1px solid #111; border-radius: 0; }
[data-palette="clean-print"] .brick-link:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

[data-palette="sharp-fitness"] .brick-link { background: #1a1a1a; border-color: #333; color: #f0f0f0; }
[data-palette="sharp-fitness"] .brick-link:hover { border-color: #ff4444; box-shadow: 0 4px 12px rgba(255,68,68,0.3); }

[data-palette="minimal-mono"] .brick-link { border-radius: 0; border-color: #111; }