@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ── Color Palette ─────────────────────────────────────────────────────────── */
:root {
  --bg:            #eceef8;
  --surface:       #f4f5fc;
  --glass-bg:      rgba(235,237,252,0.7);
  --glass-border:  rgba(180,185,230,0.5);
  --glass-shadow:  0 8px 32px rgba(80,80,180,0.10);
  --text:          #18181b;
  --text-muted:    #71717a;
  --sidebar-w:     220px;
  --sidebar-cw:    60px;

  --violet:  #7c3aed;
  --indigo:  #4f46e5;
  --blue:    #2563eb;
  --cyan:    #0891b2;
  --teal:    #0d9488;
  --emerald: #059669;
  --amber:   #d97706;
  --rose:    #e11d48;
  --pink:    #db2777;
  --orange:  #ea580c;

  --card-hover-shadow: 0 20px 60px rgba(80,80,200,0.15);
}

.dark {
  --bg:            #0d0d14;
  --surface:       #13131f;
  --glass-bg:      rgba(255,255,255,0.04);
  --glass-border:  rgba(255,255,255,0.08);
  --glass-shadow:  0 8px 32px rgba(0,0,0,0.5);
  --text:          #f4f4f5;
  --text-muted:    #a1a1aa;
  --card-hover-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  overflow-x: hidden;
}

/* ── Animated Background Orbs ───────────────────────────────────────────────────────────────── */
.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.18;
  animation: drift 18s ease-in-out infinite alternate;
  transition: background 1s ease;
}
.dark .orb { opacity: 0.12; }
.orb-1 { width:600px; height:600px; background:radial-gradient(circle,#7c3aed,#4f46e5); top:-200px; left:-150px; animation-duration:20s; }
.orb-2 { width:500px; height:500px; background:radial-gradient(circle,#0891b2,#059669); bottom:-150px; right:-100px; animation-duration:25s; animation-delay:-8s; }
.orb-3 { width:350px; height:350px; background:radial-gradient(circle,#e11d48,#d97706); top:40%; left:40%; animation-duration:22s; animation-delay:-4s; }
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px,-30px) scale(1.05); }
  100% { transform: translate(-20px,20px) scale(0.97); }
}

/* ── Per-page orb tints ──────────────────────────────────────────────────────────── */
body[data-page="marketplace"] .orb-1 { background: radial-gradient(circle, #7c3aed, #4f46e5); }
body[data-page="marketplace"] .orb-2 { background: radial-gradient(circle, #6366f1, #818cf8); }
body[data-page="marketplace"] .orb-3 { background: radial-gradient(circle, #a78bfa, #7c3aed); }

body[data-page="ideas"] .orb-1 { background: radial-gradient(circle, #d97706, #f59e0b); }
body[data-page="ideas"] .orb-2 { background: radial-gradient(circle, #ea580c, #f97316); }
body[data-page="ideas"] .orb-3 { background: radial-gradient(circle, #fbbf24, #d97706); }

body[data-page="publisher"] .orb-1 { background: radial-gradient(circle, #0d9488, #059669); }
body[data-page="publisher"] .orb-2 { background: radial-gradient(circle, #10b981, #34d399); }
body[data-page="publisher"] .orb-3 { background: radial-gradient(circle, #0d9488, #0891b2); }

body[data-page="admin"] .orb-1 { background: radial-gradient(circle, #e11d48, #db2777); }
body[data-page="admin"] .orb-2 { background: radial-gradient(circle, #f43f5e, #ec4899); }
body[data-page="admin"] .orb-3 { background: radial-gradient(circle, #db2777, #e11d48); }

body[data-page="profile"] .orb-1 { background: radial-gradient(circle, #2563eb, #0891b2); }
body[data-page="profile"] .orb-2 { background: radial-gradient(circle, #0ea5e9, #38bdf8); }
body[data-page="profile"] .orb-3 { background: radial-gradient(circle, #2563eb, #4f46e5); }

body[data-page="wiki"] .orb-1 { background: radial-gradient(circle, #0891b2, #0d9488); }
body[data-page="wiki"] .orb-2 { background: radial-gradient(circle, #06b6d4, #0891b2); }
body[data-page="wiki"] .orb-3 { background: radial-gradient(circle, #0d9488, #059669); }

/* ── Per-page logo glow tint ─────────────────────────────────────────────── */
.navbar-logo-icon { transition: box-shadow 0.4s ease; }
body[data-page="marketplace"] .navbar-logo-icon { box-shadow: 0 0 14px 3px rgba(124,58,237,0.45); }
body[data-page="ideas"]       .navbar-logo-icon { box-shadow: 0 0 14px 3px rgba(217,119,6,0.45); }
body[data-page="publisher"]   .navbar-logo-icon { box-shadow: 0 0 14px 3px rgba(13,148,136,0.45); }
body[data-page="admin"]       .navbar-logo-icon { box-shadow: 0 0 14px 3px rgba(225,29,72,0.45); }
body[data-page="wiki"]        .navbar-logo-icon { box-shadow: 0 0 14px 3px rgba(8,145,178,0.45); }
body[data-page="profile"]     .navbar-logo-icon { box-shadow: 0 0 14px 3px rgba(37,99,235,0.45); }

/* ── Top Navbar ───────────────────────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--glass-border);
}
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%; padding: 0 1.5rem; height: 62px;
  overflow: visible;
}
.navbar-logo {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none; flex-shrink: 0;
}
.navbar-logo-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 14px 3px rgba(124,58,237,0.4);
}
.navbar-logo-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1;
  display: flex; flex-direction: column; gap: 0;
}
.logo-irdeto {
  font-size: 0.48rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-muted); opacity: 0.5;
  -webkit-text-fill-color: unset;
  text-align: right;
  padding-right: 0.1rem;
  margin-top: 0.2rem;
}
.logo-ai {
  background: linear-gradient(135deg, #a78bfa, #f97316);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.logo-space {
  background: linear-gradient(135deg, #f97316, #fbbf24);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-weight: 400;
}
.navbar-right { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

.theme-btn {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--glass-border); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: all 0.18s; color: var(--text);
}
.theme-btn:hover { background: var(--glass-bg); transform: scale(1.08); }

.user-chip {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  border-radius: 9999px; border: 1px solid var(--glass-border);
  background: var(--glass-bg); text-decoration: none;
  transition: background 0.18s; cursor: pointer;
}
.user-chip:hover { background: var(--surface); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 0.75rem; flex-shrink: 0;
}
.user-info { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.user-role { font-size: 0.65rem; color: var(--text-muted); text-transform: capitalize; }

.topbar-logout {
  font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
  text-decoration: none; padding: 0.38rem 0.85rem;
  border-radius: 8px; border: 1px solid var(--glass-border);
  transition: all 0.18s; white-space: nowrap;
}
.topbar-logout:hover { color: var(--rose); border-color: var(--rose); background: rgba(225,29,72,0.06); }

/* ── App Shell ───────────────────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: calc(100vh - 62px);
  position: relative; z-index: 1;
  padding: 1rem;
  gap: 1rem;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  display: flex; flex-direction: column;
  padding: 1rem 0.6rem;
  position: sticky; top: 74px;
  height: calc(100vh - 74px);
  overflow: visible;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
  isolation: isolate;
}
.sidebar.collapsed { width: var(--sidebar-cw); }

.sidebar-toggle {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--glass-border);
  background: var(--surface);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: background 0.18s, box-shadow 0.18s;
  z-index: 60;
  flex-shrink: 0;
}
.sidebar-toggle:hover {
  background: var(--violet);
  border-color: var(--violet);
  color: white;
  box-shadow: 0 4px 16px rgba(124,58,237,0.35);
}

.sidebar-section-label {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 0.6rem 0.6rem 0.3rem;
  white-space: nowrap;
  transition: opacity 0.2s, max-height 0.25s, padding 0.25s;
  max-height: 40px; overflow: hidden;
}
.sidebar.collapsed .sidebar-section-label { opacity: 0; pointer-events: none; max-height: 0; padding: 0; }

.nav-item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.65rem; border-radius: 0.75rem;
  font-size: 0.85rem; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  transition: background 0.18s, color 0.18s; margin-bottom: 2px;
  position: relative; white-space: nowrap; overflow: visible;
}
.nav-item:hover {
  background: color-mix(in srgb, var(--icon-color, var(--violet)) 6%, transparent);
  color: var(--icon-color, var(--violet));
}
.nav-item.active {
  background: color-mix(in srgb, var(--icon-color, var(--violet)) 10%, transparent);
  color: var(--icon-color, var(--violet)); font-weight: 600;
}
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 2px;
  background: var(--icon-color, var(--violet));
}
.nav-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--icon-color, var(--text-muted));
  transition: all 0.18s;
}
.nav-item:hover .nav-icon {
  background: color-mix(in srgb, var(--icon-color, var(--violet)) 12%, transparent);
  border-color: color-mix(in srgb, var(--icon-color, var(--violet)) 25%, transparent);
  color: var(--icon-color, var(--violet));
}
.nav-item.active .nav-icon {
  background: color-mix(in srgb, var(--icon-color, var(--violet)) 15%, transparent);
  border-color: color-mix(in srgb, var(--icon-color, var(--violet)) 30%, transparent);
  color: var(--icon-color, var(--violet));
}
.nav-label { transition: opacity 0.2s, width 0.25s; white-space: nowrap; overflow: hidden; }
.sidebar.collapsed .nav-label { opacity: 0; width: 0; pointer-events: none; }
/* collapsed: icon only, centered, no label space */
.sidebar.collapsed .nav-item { justify-content: center; padding: 0.55rem; }
.sidebar.collapsed .nav-item.active::before { display: none; }
.sidebar.collapsed .nav-item.active { background: transparent; }
.sidebar.collapsed .nav-item.active .nav-icon {
  background: color-mix(in srgb, var(--icon-color, var(--violet)) 12%, transparent);
  border-color: var(--icon-color, var(--violet));
  color: var(--icon-color, var(--violet));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--icon-color, var(--violet)) 30%, transparent);
}
.sidebar.collapsed .nav-item:hover .nav-icon {
  background: color-mix(in srgb, var(--icon-color, var(--violet)) 12%, transparent);
  border-color: color-mix(in srgb, var(--icon-color, var(--violet)) 25%, transparent);
  color: var(--icon-color, var(--violet));
}

/* Tooltip when collapsed */
.sidebar.collapsed .nav-item { position: relative; }
.sidebar.collapsed .nav-item:hover::after {
  content: attr(data-label);
  position: absolute; left: calc(var(--sidebar-cw) + 6px); top: 50%; transform: translateY(-50%);
  background: var(--surface); color: var(--text);
  padding: 0.3rem 0.75rem; border-radius: 8px;
  font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  white-space: nowrap; z-index: 100; pointer-events: none;
}

.sidebar-bottom {
  margin-top: auto; padding-top: 0.75rem;
  border-top: 1px solid var(--glass-border);
}
.sidebar.collapsed .user-chip { padding: 0.3rem; justify-content: center; }
.sidebar.collapsed .user-info { display: none; }

/* ── Main Content ──────────────────────────────────────────────────────────── */
.main-content {
  flex: 1; min-width: 0; position: relative; z-index: 1;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  overflow: hidden;
  min-height: calc(100vh - 74px);
}

.flash-wrapper { padding: 1.25rem 2.5rem 0; }

.page-wrapper {
  width: 100%;
  padding: 2rem 2.5rem;
  box-sizing: border-box;
}

/* ── Glass Card ────────────────────────────────────────────────────────────── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 1.25rem;
  transition: transform 0.22s, box-shadow 0.22s, background 0.22s;
}
.glass-card:hover { transform: translateY(-4px); box-shadow: var(--card-hover-shadow); }
.glass { background: var(--glass-bg); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); }

/* ── Category Color System ─────────────────────────────────────────────────── */
.cat-aiml     { --cat-from:#7c3aed; --cat-to:#4f46e5; --cat-bg:rgba(124,58,237,0.1);  --cat-color:#7c3aed; }
.cat-devtools { --cat-from:#2563eb; --cat-to:#0891b2; --cat-bg:rgba(37,99,235,0.1);   --cat-color:#2563eb; }
.cat-data     { --cat-from:#0d9488; --cat-to:#059669; --cat-bg:rgba(13,148,136,0.1);  --cat-color:#0d9488; }
.cat-auto     { --cat-from:#d97706; --cat-to:#ea580c; --cat-bg:rgba(217,119,6,0.1);   --cat-color:#d97706; }
.cat-other    { --cat-from:#db2777; --cat-to:#e11d48; --cat-bg:rgba(219,39,119,0.1);  --cat-color:#db2777; }

.cat-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--cat-from), var(--cat-to));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; box-shadow: 0 6px 20px rgba(0,0,0,0.15); flex-shrink: 0;
}
.cat-badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.7rem; border-radius: 9999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--cat-bg); color: var(--cat-color);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.3rem; border-radius: 0.75rem;
  font-weight: 600; font-size: 0.875rem;
  background: linear-gradient(135deg, var(--violet), var(--blue));
  color: white; border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35);
  transition: all 0.18s; text-decoration: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,0.45); opacity: 0.95; }

.btn-teal {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.3rem; border-radius: 0.75rem;
  font-weight: 600; font-size: 0.875rem;
  background: linear-gradient(135deg, var(--teal), var(--emerald));
  color: white; border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(13,148,136,0.3);
  transition: all 0.18s; text-decoration: none;
}
.btn-teal:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,148,136,0.4); }

.btn-rose {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.3rem; border-radius: 0.75rem;
  font-weight: 600; font-size: 0.875rem;
  background: linear-gradient(135deg, var(--rose), var(--orange));
  color: white; border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(225,29,72,0.3);
  transition: all 0.18s; text-decoration: none;
}
.btn-rose:hover { transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.3rem; border-radius: 0.75rem;
  font-weight: 500; font-size: 0.875rem;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--glass-border);
  cursor: pointer; transition: all 0.18s; text-decoration: none;
}
.btn-ghost:hover { background: var(--glass-bg); color: var(--text); }

/* ── Inputs ────────────────────────────────────────────────────────────────── */
.input-glass {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--text); border-radius: 0.75rem;
  padding: 0.65rem 1rem; width: 100%; outline: none;
  font-size: 0.875rem; font-family: 'Inter', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-glass:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.input-glass::placeholder { color: var(--text-muted); opacity: 0.7; }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 0.18rem 0.6rem; border-radius: 9999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.badge-violet { background: rgba(124,58,237,0.12); color: var(--violet); }
.badge-blue   { background: rgba(37,99,235,0.12);  color: var(--blue); }
.badge-teal   { background: rgba(13,148,136,0.12); color: var(--teal); }
.badge-amber  { background: rgba(217,119,6,0.12);  color: var(--amber); }
.badge-rose   { background: rgba(225,29,72,0.12);  color: var(--rose); }
.badge-green  { background: rgba(5,150,105,0.12);  color: var(--emerald); }
.badge-indigo { background: rgba(79,70,229,0.12);  color: var(--indigo); }
.badge-pink   { background: rgba(219,39,119,0.12); color: var(--pink); }

/* ── Tag pills ─────────────────────────────────────────────────────────────── */
.tag-pill {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 6px;
  font-size: 0.68rem; font-weight: 600;
  background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-muted);
}

/* ── Flash messages ────────────────────────────────────────────────────────── */
.flash-success { background:rgba(5,150,105,0.1);  border:1px solid rgba(5,150,105,0.25);  color:var(--emerald); border-radius:0.75rem; padding:0.75rem 1rem; }
.flash-error   { background:rgba(225,29,72,0.1);  border:1px solid rgba(225,29,72,0.25);  color:var(--rose);    border-radius:0.75rem; padding:0.75rem 1rem; }
.flash-info    { background:rgba(79,70,229,0.1);  border:1px solid rgba(79,70,229,0.25);  color:var(--indigo);  border-radius:0.75rem; padding:0.75rem 1rem; }

/* ── Stat card ─────────────────────────────────────────────────────────────── */
.stat-card {
  background: var(--glass-bg); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); border-radius: 1.25rem;
  padding: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.stat-value { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2rem; font-weight: 800; }
.stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }

/* ── Upvote button ─────────────────────────────────────────────────────────── */
.upvote-btn {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1.5px solid var(--glass-border); background: var(--glass-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.18s;
  font-size: 0.75rem; font-weight: 700; gap: 1px; color: var(--text-muted);
}
.upvote-btn:hover { border-color: var(--violet); color: var(--violet); background: rgba(124,58,237,0.08); }
.upvote-btn.voted { border-color: var(--violet); color: var(--violet); background: rgba(124,58,237,0.12); }

/* ── Typography ────────────────────────────────────────────────────────────── */
.page-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.75rem; font-weight: 800; color: var(--text); }
.page-subtitle { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.25rem; }
.divider { border: none; border-top: 1px solid var(--glass-border); margin: 1.25rem 0; }

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,0.5); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .page-wrapper { padding: 1.25rem; }
  .flash-wrapper { padding: 1rem 1.25rem 0; }
}