/* ============================================================
   SOURCEHUB — MAXIMALISM UI/UX REDESIGN
   Direction: editorial tech maximalism — bold, layered, playful,
   but with disciplined spacing, hierarchy, and responsive behavior.
   Loaded last so functionality/JS stays untouched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=Space+Mono:wght@400;700&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────── */
:root {
  --bg: #fff7e8;
  --bg-2: #f3ead7;
  --white: #fffdf7;
  --card: #fffdf7;
  --border: #17140f;
  --border-2: #17140f;
  --text: #17140f;
  --text-2: #544b3f;
  --text-3: #827568;

  --blue: #7057ff;
  --blue-light: #ece8ff;
  --blue-mid: rgba(112, 87, 255, .18);
  --green: #147d64;
  --green-light: #caffdc;
  --amber: #f08b1d;
  --amber-light: #fff0a8;
  --rose: #ef476f;
  --rose-light: #ffdce7;
  --violet: #8247e5;
  --violet-light: #efe4ff;

  --maxi-purple: #7057ff;
  --maxi-lime: #c8ff3d;
  --maxi-orange: #ff643d;
  --maxi-cyan: #39d9e6;
  --maxi-pink: #ff79bd;
  --maxi-yellow: #ffd84a;
  --maxi-ink: #17140f;
  --maxi-paper: #fff7e8;

  --shadow-sm: 3px 3px 0 var(--maxi-ink);
  --shadow-md: 5px 5px 0 var(--maxi-ink);
  --shadow-lg: 8px 8px 0 var(--maxi-ink);

  --f-display: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif;
  --f-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 9999px;
  --max-w: 1320px;
  --px: clamp(1rem, 3vw, 2.4rem);

  /* Compatibility aliases used by older inline styles */
  --c-cyan: var(--maxi-cyan);
  --c-cyan-dim: rgba(57,217,230,.22);
  --c-green: var(--green);
  --c-green-dim: rgba(20,125,100,.16);
  --c-amber: var(--amber);
  --c-amber-dim: rgba(240,139,29,.18);
  --c-card-2: var(--white);
  --c-surface: var(--bg-2);
  --c-border: var(--border);
  --c-border-2: var(--border-2);
  --c-text-2: var(--text-2);
  --c-text-3: var(--text-3);
}

[data-theme="dark"] {
  --bg: #15131b;
  --bg-2: #211e29;
  --white: #24212c;
  --card: #24212c;
  --border: #f7efd9;
  --border-2: #f7efd9;
  --text: #fff8e8;
  --text-2: #d2c8b5;
  --text-3: #988f83;

  --blue: #9a89ff;
  --blue-light: #342d63;
  --blue-mid: rgba(154, 137, 255, .22);
  --green: #83e5bd;
  --green-light: #173c33;
  --amber: #ffb454;
  --amber-light: #49361d;
  --rose: #ff88a8;
  --rose-light: #4d2533;
  --violet: #c0a7ff;
  --violet-light: #3c3155;

  --maxi-purple: #8b78ff;
  --maxi-lime: #bfff3c;
  --maxi-orange: #ff7250;
  --maxi-cyan: #42e1ed;
  --maxi-pink: #ff7fc1;
  --maxi-yellow: #ffdb57;
  --maxi-ink: #0d0b11;
  --maxi-paper: #15131b;

  --shadow-sm: 3px 3px 0 #08070a;
  --shadow-md: 5px 5px 0 #08070a;
  --shadow-lg: 8px 8px 0 #08070a;

  --c-card-2: #24212c;
  --c-surface: #211e29;
  --c-border: #f7efd9;
  --c-border-2: #f7efd9;
  --c-text-2: #d2c8b5;
  --c-text-3: #988f83;
}

html { background: var(--bg); }
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 16px 16px, rgba(23,20,15,.07) 1.4px, transparent 1.6px),
    linear-gradient(90deg, transparent 49.7%, rgba(23,20,15,.035) 50%, transparent 50.3%);
  background-size: 32px 32px, 96px 96px;
  color: var(--text);
  font-weight: 500;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 16px 16px, rgba(255,248,232,.07) 1.2px, transparent 1.5px),
    linear-gradient(90deg, transparent 49.7%, rgba(255,248,232,.025) 50%, transparent 50.3%);
}
::selection { background: var(--maxi-lime); color: #111; }
:focus-visible { outline: 3px solid var(--maxi-cyan); outline-offset: 3px; }

/* Missing compatibility utility aliases from legacy templates */
.bg-primary { background: var(--blue) !important; }
.bg-secondary, .bg-surface, .bg-bg { background: var(--bg-2) !important; }
.text-primary { color: var(--blue) !important; }
.text-text, .text-foreground { color: var(--text) !important; }
.text-text-2 { color: var(--text-2) !important; }
.border-border { border-color: var(--border) !important; }
.border-border\/40 { border-color: color-mix(in srgb, var(--border) 40%, transparent) !important; }
.border-border\/50 { border-color: color-mix(in srgb, var(--border) 50%, transparent) !important; }
.border-border\/80 { border-color: color-mix(in srgb, var(--border) 80%, transparent) !important; }
.text-red-400 { color: #e43d64 !important; }
.text-amber-400 { color: var(--amber) !important; }
.text-emerald-400 { color: var(--green) !important; }
.text-blue-400 { color: var(--blue) !important; }
.bg-blue-500 { background: var(--blue) !important; }
.bg-emerald-500 { background: var(--green) !important; }
.bg-purple-500 { background: var(--violet) !important; }
.bg-amber-500 { background: var(--amber) !important; }
.bg-pink-500 { background: var(--rose) !important; }
.max-w-lg { max-width: 32rem; }
.max-w-md { max-width: 28rem; }
.max-w-3xl { max-width: 48rem; }
.max-h-\[75vh\] { max-height: 75vh; }
.min-h-\[420px\] { min-height: 420px; }
.w-20 { width: 5rem; }
.h-20 { height: 5rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-7 { width: 1.75rem; }
.h-7 { height: 1.75rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-3 { width: .75rem; }
.h-3 { height: .75rem; }
.w-2\/3 { width: 66.666%; }
.h-2 { height: .5rem; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.text-2xl { font-size: 1.5rem; line-height: 1.2; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.whitespace-nowrap { white-space: nowrap; }
.block { display:block; }
.overflow-y-auto { overflow-y:auto; }
.hover\:underline:hover { text-decoration: underline; }
.hover\:text-primary:hover { color: var(--blue) !important; }

/* ── GLOBAL TYPOGRAPHY ─────────────────────────────── */
.heading-xl, .heading-lg, .heading-md, .heading-sm,
.hero-title, .admin-view-title, .proj-title, .empty-title, .login-title {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 88;
}
.heading-lg { font-size: clamp(2rem, 4.2vw, 3.35rem); font-weight: 800; letter-spacing: -.055em; }
.heading-md { font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 800; letter-spacing: -.04em; }
.heading-sm { font-size: 1.08rem; font-weight: 800; }
.label-caps {
  color: var(--text);
  display: inline-flex;
  width: fit-content;
  padding: .28rem .55rem;
  border: 2px solid var(--border);
  border-radius: 7px;
  background: var(--maxi-yellow);
  box-shadow: 2px 2px 0 var(--maxi-ink);
  transform: rotate(-1deg);
}

/* ── HEADER / NAV ──────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 91%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 2px solid var(--border);
}
.maxi-ribbon {
  height: 28px;
  overflow: hidden;
  background: var(--maxi-lime);
  color: #111;
  border-bottom: 2px solid #111;
  font-family: var(--f-mono);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
}
.maxi-ribbon-track {
  min-width: max-content;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
  animation: maxi-marquee 26s linear infinite;
}
.maxi-ribbon-track span { display: inline-block; }
@keyframes maxi-marquee { to { transform: translateX(-50%); } }
.header-inner {
  min-height: 70px;
  height: auto;
  gap: 1.3rem;
}
.logo-mark { gap: .75rem; }
.logo-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px 17px 10px 15px;
  border: 2px solid var(--border);
  background: var(--maxi-purple);
  color: #fff;
  box-shadow: 3px 3px 0 var(--maxi-ink);
  transform: rotate(-3deg);
  font-size: .8rem;
}
.logo-text { font-size: 1.06rem; font-weight: 800; letter-spacing: -.04em; }
.logo-sub { color: var(--text-2); font-size: .56rem; font-weight: 700; }
.site-nav { gap: .32rem; justify-content: center; }
.nav-link {
  color: var(--text);
  font-weight: 700;
  padding: .5rem .82rem;
  border: 1.5px solid transparent;
  border-radius: 9px 14px 9px 14px;
}
.nav-link:hover {
  background: var(--maxi-yellow);
  color: #111;
  border-color: #111;
  transform: rotate(-1deg) translateY(-1px);
  box-shadow: 2px 2px 0 #111;
}
.nav-link.active {
  color: #111;
  background: var(--maxi-cyan);
  border-color: #111;
  box-shadow: 2px 2px 0 #111;
}
.header-actions { gap: .6rem; }
.header-actions .btn { min-height: 38px; }
.header-actions kbd {
  background: rgba(255,255,255,.7) !important;
  color: #111;
  border: 1px solid #111 !important;
}
#mobile-nav-drawer {
  top: 100px;
  background: var(--bg);
  border-top: 2px solid var(--border);
  padding-top: 1.4rem;
  gap: .6rem;
}
#mobile-nav-drawer .nav-link {
  border: 2px solid var(--border);
  background: var(--white);
  box-shadow: 3px 3px 0 var(--maxi-ink);
  border-radius: 12px 18px 11px 15px;
}

/* ── BUTTONS ───────────────────────────────────────── */
.btn {
  border-width: 2px;
  border-color: var(--border);
  border-radius: 10px 15px 10px 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: 3px 3px 0 var(--maxi-ink);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { transform: translate(-1px,-2px) rotate(-.5deg); box-shadow: 5px 5px 0 var(--maxi-ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--maxi-ink); }
.btn-primary { background: var(--maxi-purple); color: #fff; border-color: var(--border); box-shadow: 3px 3px 0 var(--maxi-ink); }
.btn-primary:hover { background: #5d45ef; box-shadow: 5px 5px 0 var(--maxi-ink); }
.btn-secondary { background: var(--maxi-yellow); color: #111; border-color: #111; box-shadow: 3px 3px 0 var(--maxi-ink); }
.btn-secondary:hover { background: var(--maxi-lime); color: #111; border-color: #111; }
.btn-ghost { box-shadow: none; border-color: transparent; }
.btn-ghost:hover { background: var(--maxi-cyan); color: #111; border-color: #111; box-shadow: 2px 2px 0 #111; }
.btn-outline { color: var(--text); border-color: var(--border); background: transparent; }
.btn-outline:hover { color: #111; background: var(--maxi-pink); border-color: #111; }
.btn-danger { background: var(--maxi-pink); color: #111; border-color: #111; }
.btn-green { background: var(--maxi-lime); color: #111; border-color: #111; }
.btn-icon { border-radius: 12px; }

/* ── HERO ──────────────────────────────────────────── */
.hero {
  background:
    linear-gradient(135deg, rgba(255,216,74,.64) 0 18%, transparent 18% 100%),
    linear-gradient(315deg, rgba(57,217,230,.34) 0 15%, transparent 15% 100%),
    var(--bg);
  border-bottom: 2px solid var(--border);
  padding: clamp(3.4rem, 7vw, 6.2rem) 0 clamp(4.8rem, 8vw, 7rem);
  overflow: hidden;
}
.hero::before {
  top: 7%;
  right: -70px;
  width: 280px;
  height: 280px;
  border: 22px solid var(--maxi-pink);
  border-radius: 50%;
  background: transparent;
  opacity: .8;
  transform: rotate(12deg);
}
.hero::after {
  width: 190px;
  height: 190px;
  bottom: -54px;
  left: 8%;
  background: repeating-linear-gradient(45deg, var(--maxi-purple) 0 10px, transparent 10px 20px);
  opacity: .25;
  transform: rotate(15deg);
}
.hero-inner { max-width: var(--max-w); }
.hero-cols {
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.hero-sticker {
  position: absolute;
  z-index: 3;
  font-family: var(--f-mono);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  color: #111;
  border: 2px solid #111;
  box-shadow: 4px 4px 0 #111;
}
.hero-sticker-code {
  position: relative;
  display: inline-block;
  width: fit-content;
  background: var(--maxi-pink);
  padding: .42rem .7rem;
  border-radius: 8px;
  transform: rotate(-2deg);
  margin-bottom: .9rem;
  font-size: .67rem;
}
.hero-eyebrow {
  background: var(--maxi-lime);
  color: #111;
  border: 2px solid #111;
  box-shadow: 3px 3px 0 #111;
  border-radius: 8px 14px 8px 14px;
  padding: .42rem .75rem;
  margin-bottom: 1.2rem;
}
.live-dot { background: #111; box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.hero-title {
  max-width: 850px;
  font-size: clamp(3rem, 7vw, 6.6rem);
  line-height: .88;
  font-weight: 800;
  letter-spacing: -.075em;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.hero-title .accent {
  color: #111;
  display: inline-block;
  background: var(--maxi-cyan);
  border: 3px solid #111;
  box-shadow: 6px 6px 0 #111;
  padding: .05em .12em .11em;
  transform: rotate(-1deg);
  margin-top: .14em;
}
[data-theme="dark"] .hero-title .accent { color:#111; }
.hero-desc {
  max-width: 650px;
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 2rem;
  font-weight: 600;
}
.hero-cta-row { gap: .95rem; margin-bottom: 2.4rem; }
.hero-stats {
  border-top: 0;
  padding-top: 0;
  gap: .8rem;
}
.hero-stats > div {
  min-width: 115px;
  background: var(--white);
  border: 2px solid var(--border);
  box-shadow: 3px 3px 0 var(--maxi-ink);
  border-radius: 10px 15px 10px 15px;
  padding: .9rem 1rem;
}
.hero-stats > div:nth-child(1) { background: var(--maxi-yellow); color:#111; transform: rotate(-1deg); }
.hero-stats > div:nth-child(2) { background: var(--maxi-lime); color:#111; transform: rotate(1deg); }
.hero-stats > div:nth-child(3) { background: var(--maxi-pink); color:#111; transform: rotate(-.5deg); }
.hero-stat-val { font-size: 1.6rem; color: inherit !important; }
.hero-stat-key { color: inherit; opacity: .72; font-weight: 700; }

.hero-visual {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-orbit {
  position: absolute;
  width: min(82vw, 390px);
  aspect-ratio: 1;
  border: 3px solid var(--border);
  border-radius: 49% 51% 42% 58% / 55% 38% 62% 45%;
  background:
    radial-gradient(circle at 25% 30%, var(--maxi-yellow) 0 10%, transparent 10.5%),
    radial-gradient(circle at 74% 73%, var(--maxi-pink) 0 12%, transparent 12.5%),
    var(--maxi-cyan);
  transform: rotate(11deg);
  box-shadow: 10px 10px 0 var(--maxi-ink);
}
.hero-terminal {
  position: relative;
  z-index: 2;
  width: min(100%, 445px);
  background: #141117;
  border: 3px solid #111;
  border-radius: 15px 24px 15px 24px;
  box-shadow: 10px 10px 0 #111;
  transform: rotate(-2deg);
}
.terminal-bar { background: var(--maxi-purple); border-bottom: 2px solid #111; }
.terminal-title { color: rgba(255,255,255,.82); font-weight:700; }
.terminal-body { font-size: .78rem; color: #cfc7d7; min-height: 245px; padding: 1.4rem; }
.term-prompt { color: var(--maxi-cyan); }
.term-cmd { color: var(--maxi-lime); }
.term-out { color: #aaa2b4; }
.term-str { color: var(--maxi-lime); }
.term-num { color: var(--maxi-yellow); }
.hero-sticker-build {
  top: 2%; right: -1%;
  background: var(--maxi-orange);
  padding: .78rem .9rem;
  font-size: .88rem;
  border-radius: 50% 42% 48% 45%;
  transform: rotate(9deg);
}
.hero-sticker-open {
  left: -1%; bottom: 4%;
  background: var(--maxi-lime);
  padding: .7rem .85rem;
  font-size: .76rem;
  border-radius: 7px 14px 8px 13px;
  transform: rotate(-7deg);
}

/* ── DISCOVERY: SEARCH + CATEGORY ──────────────────── */
.search-section {
  position: relative;
  z-index: 4;
  background: transparent;
  border: 0;
  padding: 0 var(--px);
  margin: -31px auto 0;
}
.search-pill {
  max-width: 780px;
  margin: 0 auto;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 14px 22px 14px 22px;
  box-shadow: 6px 6px 0 var(--maxi-ink);
  padding: 1rem 1.15rem;
}
.search-pill:hover { border-color: var(--border); box-shadow: 8px 8px 0 var(--maxi-ink); transform: translate(-1px,-2px); }
.search-pill-placeholder { color: var(--text-2); font-weight: 700; }
.search-pill-hint { background: var(--maxi-cyan); color:#111; border:2px solid #111; border-radius:6px; font-weight:700; }
.cat-section {
  background: transparent;
  border: 0;
  padding: 2.8rem var(--px) 1rem;
}
.cat-section-header { margin-bottom: 1.2rem; }
.cat-scroll { gap: .85rem; padding: .2rem .25rem .7rem; }
.cat-chip {
  background: var(--accent-bg, var(--white));
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 9px 15px 9px 15px;
  padding: .58rem 1rem;
  box-shadow: 3px 3px 0 var(--maxi-ink);
  font-weight: 800;
}
.cat-chip:nth-child(3n+1) { transform: rotate(-1deg); }
.cat-chip:nth-child(3n+2) { transform: rotate(.7deg); }
.cat-chip:hover { color:#111; border-color:#111; transform: translate(-1px,-2px) rotate(-1deg); box-shadow:5px 5px 0 #111; }
.cat-chip-dot { border: 1px solid #111; }
.section-link {
  color: var(--text);
  font-weight: 800;
  border-bottom: 2px solid currentColor;
  padding-bottom: .1rem;
}
.section-link:hover { color: var(--blue); }

/* ── SECTIONS / BENTO ──────────────────────────────── */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-alt { background: transparent; }
.section-header { margin-bottom: 2rem; align-items: end; }
.section-header .text-muted { max-width: 600px; font-weight: 600; }
.bento-wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.bento-wrap > * { grid-column: span 4; }
.bento-wrap > .bento-hero { grid-column: span 8; grid-row: span 2; }
.bento-wrap > *:nth-child(4n+2) .proj-card { transform: rotate(.5deg); }
.bento-wrap > *:nth-child(4n+3) .proj-card { transform: rotate(-.45deg); }
.bento-wrap > *:nth-child(4n+4) .proj-card { transform: translateY(10px); }
.maxi-list-panels > div {
  background: var(--white);
  border: 2px solid var(--border);
  box-shadow: 5px 5px 0 var(--maxi-ink);
  border-radius: 16px 24px 16px 24px;
  padding: clamp(1rem, 2vw, 1.4rem);
}
.maxi-list-panels > div:first-child { background: color-mix(in srgb, var(--maxi-yellow) 32%, var(--white)); }
.maxi-list-panels > div:last-child { background: color-mix(in srgb, var(--maxi-cyan) 22%, var(--white)); }

/* ── PROJECT CARDS ─────────────────────────────────── */
.proj-grid { gap: 1.35rem; }
.proj-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 14px 23px 15px 22px;
  box-shadow: 5px 5px 0 var(--maxi-ink);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.proj-card:hover { border-color: var(--border); transform: translate(-2px,-4px) rotate(-.35deg); box-shadow: 9px 9px 0 var(--maxi-ink); }
.proj-thumb-wrap { border-bottom: 2px solid var(--border); }
.proj-thumb-overlay { background: linear-gradient(to top, rgba(17,14,20,.82), transparent 62%); }
.proj-thumb-badges { top: .8rem; left: .8rem; gap: .5rem; }
.proj-thumb-dl {
  background: var(--maxi-lime);
  color: #111;
  border: 2px solid #111;
  padding: .25rem .5rem;
  border-radius: 7px;
  box-shadow: 2px 2px 0 #111;
}
.proj-body { padding: 1.15rem 1.2rem 1rem; gap: .58rem; }
.proj-lang {
  width: fit-content;
  background: var(--maxi-cyan);
  color: #111;
  border: 1.5px solid #111;
  border-radius: 6px;
  padding: .18rem .42rem;
}
.proj-title { font-size: 1.07rem; font-weight: 800; letter-spacing: -.03em; }
.proj-card:hover .proj-title { color: var(--blue); }
.proj-desc { font-weight: 550; line-height: 1.62; }
.proj-footer { border-top: 2px dashed color-mix(in srgb, var(--border) 60%, transparent); background: color-mix(in srgb, var(--bg-2) 74%, var(--white)); }
.hero-card .proj-title { font-size: clamp(1.15rem, 2vw, 1.45rem); }
.hero-card .proj-thumb-wrap { aspect-ratio: 16 / 8; }
.compact-row {
  border: 2px solid var(--border);
  border-radius: 11px 17px 11px 17px;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--maxi-ink);
  padding: .75rem .8rem;
}
.compact-row:hover { border-color: var(--border); transform: translate(-2px,-2px); box-shadow:5px 5px 0 var(--maxi-ink); }
.compact-row-rank {
  width: 1.7rem; height: 1.7rem;
  display:flex; align-items:center; justify-content:center;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--maxi-yellow);
  color:#111;
}
.compact-row-thumb { border:2px solid var(--border); border-radius:9px 13px 9px 13px; }
.compact-row-count { color: var(--text); }

/* ── BADGES ────────────────────────────────────────── */
.badge {
  border-width: 1.5px;
  border-color: var(--border);
  border-radius: 6px 10px 6px 10px;
  color: #111;
  font-weight: 700;
}
.badge-blue, .badge-primary { background: var(--maxi-cyan); color:#111; border-color:#111; }
.badge-green, .badge-success { background: var(--maxi-lime); color:#111; border-color:#111; }
.badge-amber, .badge-warning { background: var(--maxi-yellow); color:#111; border-color:#111; }
.badge-rose, .badge-danger { background: var(--maxi-pink); color:#111; border-color:#111; }
.badge-violet { background: #d9c6ff; color:#111; border-color:#111; }
.badge-muted, .badge-secondary { background: var(--white); color:var(--text); border-color:var(--border); }
.badge-outline { background: transparent; color:var(--text-2); border-color:color-mix(in srgb, var(--border) 65%, transparent); }

/* ── DRIVE BANNER ──────────────────────────────────── */
.drive-banner {
  position: relative;
  overflow: hidden;
  background: var(--maxi-purple);
  color: #fff;
  border: 3px solid #111;
  border-radius: 20px 34px 20px 34px;
  box-shadow: 9px 9px 0 #111;
  padding: clamp(1.7rem, 4vw, 3rem);
}
.drive-banner::before {
  content:'5TB';
  position:absolute;
  right:-.03em; top:-.16em;
  font-size:clamp(7rem,16vw,13rem);
  line-height:1;
  font-weight:800;
  color:rgba(255,255,255,.1);
  letter-spacing:-.08em;
  pointer-events:none;
}
.drive-banner .heading-lg, .drive-banner .text-muted { color:#fff; position:relative; }
.drive-banner .label-caps { background:var(--maxi-lime); color:#111; border-color:#111; }
.drive-meter {
  position:relative;
  background:var(--maxi-yellow);
  color:#111;
  border:3px solid #111;
  border-radius:14px 22px 14px 22px;
  box-shadow:6px 6px 0 #111;
  min-width:210px;
  transform:rotate(2deg);
}
.drive-meter-val { color:#111; font-size:2.35rem; }
.drive-meter .text-muted { color:#111; opacity:.7; }
.drive-meter .storage-bar-wrap { background:rgba(17,17,17,.2); border:1px solid #111; height:10px; }
.drive-meter .storage-bar-fill { background:var(--maxi-orange); }

/* ── CATALOG / FILTERS ─────────────────────────────── */
.filter-panel {
  background: color-mix(in srgb, var(--maxi-yellow) 30%, var(--white));
  border: 2px solid var(--border);
  border-radius: 15px 24px 15px 24px;
  box-shadow: 5px 5px 0 var(--maxi-ink);
  position: sticky;
  top: 120px;
  padding: 1.2rem;
}
.filter-panel-title {
  border-bottom: 2px solid var(--border);
  padding-bottom: .8rem;
  margin-bottom: 1rem;
  font-weight: 800;
}
.form-label { color: var(--text); font-weight: 800; font-size: .78rem; }
.form-input, select.form-input, textarea.form-input {
  background: var(--white);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 9px 14px 9px 14px;
  box-shadow: 2px 2px 0 var(--maxi-ink);
  padding: .72rem .85rem;
  font-weight: 600;
}
.form-input:focus, select.form-input:focus, textarea.form-input:focus {
  border-color: var(--border);
  box-shadow: 4px 4px 0 var(--maxi-purple);
  transform: translate(-1px,-1px);
}

/* ── GENERIC CARDS / DETAILS / TABS ───────────────── */
.card, .settings-section, .storage-gauge, .chart-container {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 15px 24px 15px 24px;
  box-shadow: 5px 5px 0 var(--maxi-ink);
}
.detail-tabs-nav {
  border-bottom: 2px solid var(--border);
  gap:.4rem;
}
.tab-btn {
  border: 2px solid transparent;
  border-bottom:0;
  border-radius:10px 10px 0 0;
  font-weight:800;
}
.tab-btn:hover { color:#111; background:var(--maxi-yellow); border-color:#111; }
.tab-btn.active { color:#111; background:var(--maxi-cyan); border-color:#111; }
.version-item {
  border:2px solid var(--border);
  border-radius:12px 18px 12px 18px;
  box-shadow:3px 3px 0 var(--maxi-ink);
  background:var(--white);
}
.file-tree-container, .code-viewer-card {
  border:2px solid var(--border) !important;
  box-shadow:4px 4px 0 var(--maxi-ink);
  border-radius:14px 21px 14px 21px !important;
  overflow:hidden;
}
.code-viewer-header, .file-tree-header { border-bottom:2px solid var(--border) !important; }
.code-viewer-body { background:#16131a; color:#eee7f5; }
.code-content, .code-line-numbers { color:#c9c0d1; }

/* ── CATEGORY / TECHNOLOGY CARDS ───────────────────── */
.cat-admin-card,
.drive-file-item,
.admin-project-row,
.audit-row {
  border-width:2px;
  border-color:var(--border);
}
.cat-admin-card, .drive-file-item, .admin-project-row {
  background:var(--white);
  border-radius:12px 19px 12px 19px;
  box-shadow:3px 3px 0 var(--maxi-ink);
}
.cat-admin-card:hover, .drive-file-item:hover, .admin-project-row:hover {
  border-color:var(--border);
  transform:translate(-1px,-2px);
  box-shadow:5px 5px 0 var(--maxi-ink);
}

/* ── SEARCH + MODALS ───────────────────────────────── */
.modal-overlay {
  background: rgba(10,8,13,.68);
  backdrop-filter: blur(8px);
  padding-top: 7rem;
}
.search-palette, .search-palette-card, .modal-card {
  background: var(--white);
  border: 3px solid var(--border);
  border-radius: 16px 27px 16px 27px;
  box-shadow: 9px 9px 0 #0c0a0e;
}
.search-palette-input-row, .search-palette-input-wrap, .modal-header { border-bottom:2px solid var(--border); }
.search-result-item { border:1.5px solid transparent; border-radius:10px 15px 10px 15px; }
.search-result-item:hover { background:var(--maxi-yellow); color:#111; border-color:#111; }
.modal-footer { border-top:2px solid var(--border); background:var(--bg-2); }

/* ── EMPTY STATES ──────────────────────────────────── */
.empty-state {
  background: color-mix(in srgb, var(--maxi-cyan) 14%, var(--white));
  border: 2px dashed var(--border);
  border-radius: 18px 28px 18px 28px;
  min-height: 300px;
}
.empty-icon {
  background: var(--maxi-lime);
  color:#111;
  border:2px solid #111;
  box-shadow:4px 4px 0 #111;
  transform:rotate(-4deg);
}

/* ── ADMIN ─────────────────────────────────────────── */
.admin-wrapper, .admin-layout { background:transparent; min-height:calc(100vh - 100px); }
.admin-sidebar {
  top: 100px;
  height: calc(100vh - 100px);
  width: 250px;
  background: color-mix(in srgb, var(--maxi-purple) 13%, var(--white));
  border-right: 2px solid var(--border);
  padding-bottom:1rem;
}
.admin-sidebar > div:first-child,
.admin-sidebar-header { border-bottom:2px solid var(--border) !important; }
.admin-nav-menu { gap:.35rem; }
.admin-nav-item {
  color:var(--text);
  border:2px solid transparent;
  border-radius:10px 15px 10px 15px;
  font-weight:700;
  margin:.12rem .45rem;
  width:calc(100% - .9rem);
}
.admin-nav-item:hover {
  background:var(--maxi-yellow);
  color:#111;
  border-color:#111;
  box-shadow:2px 2px 0 #111;
}
.admin-nav-item.active {
  background:var(--maxi-cyan);
  color:#111;
  border-color:#111;
  box-shadow:3px 3px 0 #111;
  transform:rotate(-.4deg);
}
.admin-main, .admin-content {
  padding: clamp(1.3rem,3vw,2.5rem);
  background:transparent;
}
.admin-view-header {
  padding-bottom:1.1rem;
  border-bottom:2px solid var(--border);
  margin-bottom:1.7rem;
}
.admin-view-title { font-size:clamp(1.65rem,3vw,2.55rem); font-weight:800; letter-spacing:-.055em; }
.stat-grid { gap:1rem; }
.stat-card {
  border:2px solid var(--border);
  border-top:2px solid var(--border);
  border-radius:13px 20px 13px 20px;
  box-shadow:4px 4px 0 var(--maxi-ink);
  padding:1.15rem;
  position:relative;
  overflow:hidden;
}
.stat-card:nth-child(4n+1) { background:color-mix(in srgb, var(--maxi-cyan) 34%, var(--white)); transform:rotate(-.5deg); }
.stat-card:nth-child(4n+2) { background:color-mix(in srgb, var(--maxi-lime) 36%, var(--white)); transform:rotate(.6deg); }
.stat-card:nth-child(4n+3) { background:color-mix(in srgb, var(--maxi-yellow) 38%, var(--white)); transform:rotate(-.3deg); }
.stat-card:nth-child(4n+4) { background:color-mix(in srgb, var(--maxi-pink) 28%, var(--white)); transform:rotate(.35deg); }
.stat-card::after {
  content:'';
  position:absolute;
  width:48px;height:48px;
  border:8px solid color-mix(in srgb, var(--stat-color, var(--blue)) 70%, transparent);
  border-radius:50%;
  right:-12px;top:-12px;
}
.stat-icon-wrap { border:2px solid var(--border); box-shadow:2px 2px 0 var(--maxi-ink); }
.stat-label { color:var(--text-2); }
.stat-value { font-size:1.95rem; }
.chart-container { background:var(--white); padding:1.15rem; }
.admin-login-card {
  max-width:460px;
  border:3px solid var(--border);
  border-radius:18px 28px 18px 28px;
  box-shadow:9px 9px 0 var(--maxi-ink);
  overflow:hidden;
}
.login-header {
  background:var(--maxi-purple);
  border-bottom:3px solid var(--border);
  padding:2.4rem 2rem;
}
.login-icon-box { background:var(--maxi-lime); color:#111; border:2px solid #111; box-shadow:4px 4px 0 #111; transform:rotate(-4deg); }
.login-note { background:var(--maxi-yellow); color:#111; border:2px solid #111; box-shadow:2px 2px 0 #111; }
.settings-section { overflow:hidden; }
.settings-section-header { background:var(--maxi-yellow); border-bottom:2px solid var(--border); }
.storage-gauge { background:color-mix(in srgb, var(--maxi-cyan) 18%, var(--white)); }
.gauge-bar-wrap { border:1.5px solid var(--border); height:11px; background:var(--bg-2); }
.gauge-bar-fill { background:linear-gradient(90deg,var(--maxi-purple),var(--maxi-pink),var(--maxi-orange)); }
.data-table {
  border:2px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:var(--white);
}
.data-table th { background:var(--maxi-yellow); color:#111; border-bottom:2px solid #111; }
.data-table td { border-bottom:1px solid color-mix(in srgb,var(--border) 24%,transparent); }
.audit-row { border-bottom:1.5px solid color-mix(in srgb,var(--border) 35%,transparent); }
.audit-type-badge { border:1.5px solid var(--border); color:#111; }

/* ── FOOTER ────────────────────────────────────────── */
.site-footer {
  position:relative;
  overflow:hidden;
  background:var(--maxi-ink);
  color:#fff8e8;
  border-top:3px solid var(--maxi-ink);
  padding-top:4rem;
}
.site-footer::before {
  content:'SOURCEHUB / SOURCEHUB / SOURCEHUB';
  position:absolute;
  left:-1rem; top:-.18em;
  font-weight:800;
  font-size:clamp(2rem,6vw,5.8rem);
  letter-spacing:-.06em;
  color:rgba(255,255,255,.055);
  white-space:nowrap;
}
.site-footer .logo-text, .site-footer .footer-link, .site-footer p { color:#fff8e8 !important; }
.site-footer .logo-sub, .site-footer .footer-col-title, .site-footer .footer-bottom { color:#bdb5a8; }
.site-footer .logo-icon { border-color:#fff8e8; box-shadow:3px 3px 0 var(--maxi-cyan); }
.footer-link:hover { color:var(--maxi-lime) !important; transform:translateX(3px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.24); }

/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-cols { grid-template-columns:1fr 390px; gap:2.5rem; }
  .hero-title { font-size:clamp(3rem,7.5vw,5.4rem); }
  .bento-wrap > * { grid-column:span 6; }
  .bento-wrap > .bento-hero { grid-column:span 12; }
}

@media (max-width: 899px) {
  .hero { padding-top:3.5rem; }
  .hero-cols { grid-template-columns:1fr; }
  .hero-visual { min-height:430px; margin-top:1rem; }
  .hero-terminal { width:min(92%,500px); }
  .hero-sticker-build { right:5%; }
  .hero-sticker-open { left:6%; }
  .filter-panel { position:relative; top:auto; flex:1 1 100% !important; }
  .admin-sidebar { display:none; }
  .admin-main, .admin-content { padding:1.2rem var(--px); }
}

@media (max-width: 767px) {
  .maxi-ribbon { height:26px; }
  .header-inner { min-height:64px; }
  #mobile-nav-drawer { top:92px; }
  .hero { padding:3rem 0 5rem; }
  .hero-title { font-size:clamp(2.85rem,14vw,4.8rem); }
  .hero-title .accent { box-shadow:4px 4px 0 #111; }
  .hero-desc { font-size:.98rem; }
  .hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }
  .hero-stats > div { min-width:0; padding:.75rem .65rem; }
  .hero-stat-val { font-size:1.28rem; }
  .hero-stat-key { font-size:.59rem; }
  .hero-visual { min-height:380px; }
  .hero-orbit { width:310px; }
  .hero-sticker-build { top:4%; right:1%; }
  .hero-sticker-open { left:1%; bottom:2%; }
  .search-section { margin-top:-27px; }
  .bento-wrap { grid-template-columns:1fr; }
  .bento-wrap > *, .bento-wrap > .bento-hero { grid-column:auto; }
  .bento-wrap > * .proj-card { transform:none !important; }
  .drive-banner { align-items:flex-start; }
  .drive-meter { width:100%; transform:none; }
  .section { padding:3.7rem 0; }
}

@media (max-width: 520px) {
  :root { --px: .9rem; }
  .logo-sub { display:none; }
  .logo-icon { width:38px; height:38px; }
  .header-actions { gap:.35rem; }
  .header-actions .btn { box-shadow:2px 2px 0 var(--maxi-ink); }
  .hero-title { font-size:clamp(2.55rem,14.5vw,4rem); }
  .hero-cta-row { display:grid; grid-template-columns:1fr; }
  .hero-cta-row .btn { width:100%; }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .hero-stats > div:nth-child(3) { grid-column:1 / -1; }
  .hero-visual { min-height:330px; }
  .hero-orbit { width:260px; box-shadow:7px 7px 0 var(--maxi-ink); }
  .hero-terminal { width:94%; box-shadow:7px 7px 0 #111; }
  .terminal-body { min-height:215px; font-size:.68rem; padding:1rem; }
  .hero-sticker-build { font-size:.7rem; padding:.62rem .68rem; }
  .hero-sticker-open { font-size:.65rem; padding:.55rem .65rem; }
  .search-pill { padding:.85rem .9rem; }
  .search-pill-hint { display:none; }
  .cat-section { padding-top:2.3rem; }
  .section-header { align-items:flex-start; }
  .proj-grid { grid-template-columns:1fr !important; }
  .maxi-list-panels { grid-template-columns:1fr !important; }
  .stat-grid { grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
  .maxi-ribbon-track { transform:none !important; }
}

/* ── LEGACY TEMPLATE COMPLETION ────────────────────── */
/* The project templates contain a small Tailwind-like utility vocabulary.
   These definitions keep every existing view visually complete without
   adding a framework dependency. */
.grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.gap-1 { gap:.25rem; }
.gap-1\.5 { gap:.375rem; }
.gap-5 { gap:1.25rem; }
.gap-8 { gap:2rem; }
.p-1 { padding:.25rem; }
.p-2 { padding:.5rem; }
.p-2\.5 { padding:.625rem; }
.p-3 { padding:.75rem; }
.p-3\.5 { padding:.875rem; }
.p-8 { padding:2rem; }
.p-12 { padding:3rem; }
.px-1 { padding-left:.25rem; padding-right:.25rem; }
.px-1\.5 { padding-left:.375rem; padding-right:.375rem; }
.px-3 { padding-left:.75rem; padding-right:.75rem; }
.py-0\.5 { padding-top:.125rem; padding-bottom:.125rem; }
.py-1\.5 { padding-top:.375rem; padding-bottom:.375rem; }
.py-2\.5 { padding-top:.625rem; padding-bottom:.625rem; }
.py-20 { padding-top:5rem; padding-bottom:5rem; }
.pt-2 { padding-top:.5rem; }
.pt-8 { padding-top:2rem; }
.pb-2 { padding-bottom:.5rem; }
.pl-4 { padding-left:1rem; }
.pr-2 { padding-right:.5rem; }
.mt-0\.5 { margin-top:.125rem; }
.mt-6 { margin-top:1.5rem; }
.mt-auto { margin-top:auto; }
.mb-3 { margin-bottom:.75rem; }
.mb-8 { margin-bottom:2rem; }
.mb-12 { margin-bottom:3rem; }
.space-y-1 > * + * { margin-top:.25rem; }
.space-y-1\.5 > * + * { margin-top:.375rem; }
.space-y-2 > * + * { margin-top:.5rem; }
.space-y-6 > * + * { margin-top:1.5rem; }
.justify-end { justify-content:flex-end; }
.inline-block { display:inline-block; }
.flex-shrink-0 { flex-shrink:0; }
.h-full { height:100%; }
.h-48 { height:12rem; }
.h-1\.5 { height:.375rem; }
.h-2\.5 { height:.625rem; }
.h-3\.5 { height:.875rem; }
.w-1\.5 { width:.375rem; }
.w-2\.5 { width:.625rem; }
.w-3\.5 { width:.875rem; }
.w-48 { width:12rem; }
.max-w-sm { max-width:24rem; }
.max-w-5xl { max-width:64rem; }
.max-w-full { max-width:100%; }
.max-w-\[140px\] { max-width:140px; }
.max-w-\[160px\] { max-width:160px; }
.max-h-\[500px\] { max-height:500px; }
.max-h-\[85vh\] { max-height:85vh; }
.max-h-\[90vh\] { max-height:90vh; }
.min-w-\[240px\] { min-width:240px; }
.text-left { text-align:left; }
.text-white { color:#fff !important; }
.uppercase { text-transform:uppercase; }
.tracking-wider { letter-spacing:.05em; }
.break-all { word-break:break-all; }
.whitespace-pre-line { white-space:pre-line; }
.select-none { user-select:none; }
.object-contain { object-fit:contain; }
.border-r { border-right:1px solid var(--border); }
.shadow-sm { box-shadow:var(--shadow-sm); }
.shadow-lg { box-shadow:var(--shadow-lg); }
.shadow-2xl { box-shadow:12px 12px 0 var(--maxi-ink); }
.font-extrabold { font-weight:800; }
.animate-spin { animation:spin 1s linear infinite; }
.animate-pulse { animation:maxi-pulse 1.6s ease-in-out infinite; }
@keyframes maxi-pulse { 50% { opacity:.45; } }
.bg-white { background:#fff !important; }
.bg-rose-500\/80 { background:rgba(239,71,111,.8) !important; }
.bg-amber-500\/80 { background:rgba(255,216,74,.8) !important; }
.bg-emerald-500\/80 { background:rgba(20,125,100,.8) !important; }
.bg-emerald-500\/10 { background:rgba(20,125,100,.1) !important; }
.bg-primary\/20 { background:color-mix(in srgb,var(--blue) 20%,transparent) !important; }
.bg-secondary\/20 { background:color-mix(in srgb,var(--bg-2) 20%,transparent) !important; }
.bg-secondary\/30 { background:color-mix(in srgb,var(--bg-2) 30%,transparent) !important; }
.bg-secondary\/40 { background:color-mix(in srgb,var(--bg-2) 40%,transparent) !important; }
.bg-secondary\/60 { background:color-mix(in srgb,var(--bg-2) 60%,transparent) !important; }
.border-red-500\/30 { border-color:rgba(239,71,111,.3) !important; }
.hover\:bg-secondary\/60:hover { background:color-mix(in srgb,var(--bg-2) 60%,transparent) !important; }
.hover\:border-blue\/50:hover { border-color:color-mix(in srgb,var(--blue) 50%,transparent) !important; }
.hover\:text-blue:hover { color:var(--blue) !important; }
.top-4 { top:1rem; }
.right-4 { right:1rem; }

@media (min-width:1024px) {
  .lg\:col-span-1 { grid-column:span 1 / span 1; }
  .lg\:col-span-2 { grid-column:span 2 / span 2; }
  .lg\:p-8 { padding:2rem; }
}

.section-container {
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding-left:var(--px);
  padding-right:var(--px);
}
.footer-inner { position:relative; z-index:1; }

/* Search palette used by app.js */
.search-palette-card {
  width:min(92vw, 700px);
  max-height:min(78vh, 650px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.search-palette-input-wrap {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:1rem 1.1rem;
  background:color-mix(in srgb,var(--maxi-cyan) 13%,var(--white));
  flex-shrink:0;
}
.search-palette-input {
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font:700 .95rem var(--f-display);
}
.search-palette-input::placeholder { color:var(--text-3); }
.search-palette-results { overflow-y:auto; padding:.45rem; }
.palette-item {
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.72rem .8rem;
  border:1.5px solid transparent;
  border-radius:10px 15px 10px 15px;
  color:var(--text);
}
.palette-item:hover {
  background:var(--maxi-yellow);
  color:#111;
  border-color:#111;
  box-shadow:2px 2px 0 #111;
}

/* Admin layout mismatch fix: app.js uses admin-wrapper/admin-main. */
.admin-wrapper { display:flex; align-items:stretch; width:100%; }
.admin-main { flex:1; min-width:0; overflow-x:hidden; }

/* Admin dashboard storage visual generated in admin.js */
.storage-meter-visual {
  width:100%;
  height:18px;
  border:2px solid var(--border);
  border-radius:999px;
  background:var(--bg-2);
  overflow:hidden;
  box-shadow:2px 2px 0 var(--maxi-ink);
}
.storage-meter-bar {
  height:100%;
  border-right:2px solid var(--border);
  background:linear-gradient(90deg,var(--maxi-purple),var(--maxi-pink),var(--maxi-orange));
}
.table-responsive { overflow-x:auto; width:100%; }

/* Code preview micro-elements */
.code-file-icon, .file-icon, .folder-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.code-file-name, .file-name, .folder-name { color:inherit; }
.code-viewer-actions { display:flex; align-items:center; }
.file-tree-nodes { padding:.35rem; }
.line-num { color:#716879; }
.token-string { color:#bfff82; }
.token-comment { color:#756d7b; font-style:italic; }
.token-keyword { color:#ff86c5; }
.token-type { color:#71e7ee; }
.token-number { color:#ffd76d; }

@media (max-width:899px) {
  .admin-wrapper { display:block; }
}