:root{
  --fifi-purple:#6C4BFF;
  --bg-1:linear-gradient(135deg,#cbc5dd 0%,#dbd7e0 40%);
  --muted:#6b6b7a;
  --glass: rgba(255,255,255,0.6);
}

/* Prevent billing card content from being cropped on very small screens */
@media (max-width:480px){
  .billing-card{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:14px !important;
    overflow:visible !important;
  }

  /* Make action buttons stack and fit inside the card on mobile */
  .billing-actions{flex-direction:column !important;align-items:stretch;gap:12px}
  .billing-actions .btn,
  .billing-actions .btn-danger,
  #billingUpgrade{width:100% !important;max-width:100% !important}

  /* Ensure any internal tables or wide elements can scroll instead of overflowing */
  .billing-table{display:block;overflow-x:auto;width:100%;box-sizing:border-box}
}
*{box-sizing:border-box}
body{font-family:'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;line-height:1.4;color:#111;margin:0;background:var(--bg-1);font-weight:700;font-optical-sizing:auto;font-style:normal}
.wrap{max-width:1200px;margin:0 auto;padding:18px 28px;display:flex;align-items:center;gap:18px}
.site-header{position:sticky;top:0;backdrop-filter: blur(6px);z-index:30}
.site-header .wrap{justify-content:space-between}
.logo img{height:44px;width:auto;display:block}
.site-header, .site-header *{
  font-family: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight:700;
  font-style:normal;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.main-nav{flex:1;margin:0 24px}
.nav-list{display:flex;gap:22px;list-style:none;margin:0;padding:0;justify-content:center;align-items:center}
.nav-item{position:relative}

/* small invisible hover-buffer to keep dropdown open when mouse moves
   between the button and the menu (prevents accidental close) */
.nav-item::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0px);
  height: 12px;
  background: transparent;
  pointer-events: auto;
  z-index: 40;
}

.nav-list a,.nav-list button{font-size:16px;padding:6px 12px;color:#222;text-decoration:none}
.nav-link,.drop-btn{background:none;border:0;font-weight:700;color:#222;padding:8px 12px;border-radius:8px;cursor:pointer}
.drop-btn:hover,.nav-link:hover{background:rgba(0,0,0,0.04)}
.dropdown-menu{position:absolute;left:0;top:calc(100% + 8px);min-width:180px;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(20,20,50,0.08);padding:8px 0;opacity:0;transform:translateY(6px);pointer-events:none;transition:all .18s ease;list-style:none;margin:0;z-index:50}
.nav-item:hover .dropdown-menu{opacity:1;transform:none;pointer-events:auto}
.dropdown-menu li{padding:0;list-style:none}
.dropdown-menu a{display:block;padding:10px 14px;color:var(--muted);text-decoration:none;font-size:14px}
.dropdown-menu a:hover{background:linear-gradient(90deg,rgba(108,75,255,0.06),rgba(108,75,255,0.03));color:#111}
.nav-list .nav-item .nav-link, .nav-list .nav-item .drop-btn{ text-decoration:none }
.auth{display:flex;gap:12px;align-items:center}
.login{color:#222;text-decoration:none;font-weight:700;padding:8px 10px;border-radius:8px}
.site-header .avatar, .auth .avatar{width:44px;height:44px;border-radius:999px;overflow:hidden;border:2px solid rgba(0,0,0,0.04);display:inline-block}
.site-header .avatar img, .auth .avatar img{width:100%;height:100%;object-fit:cover}
.auth .btn-primary.header-cta{
  padding:10px 18px;
  border-radius:10px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:16px;
  min-height:44px;
}
.auth .btn-primary.header-cta{background:linear-gradient(90deg,var(--fifi-purple),#8B6BFF);color:#fff;box-shadow:0 10px 30px rgba(108,75,255,0.18);text-decoration:none}
.btn-outline{display:inline-block;padding:9px 16px;border-radius:10px;border:2px solid var(--fifi-purple);color:var(--fifi-purple);text-decoration:none;font-weight:700}
.btn-outline.large{padding:12px 22px;font-size:16px}
.btn-primary{background:linear-gradient(90deg,var(--fifi-purple),#8B6BFF);color:#fff;padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 8px 24px rgba(108,75,255,0.18);display:inline-flex;align-items:center;justify-content:center;line-height:1}

.hero{padding:72px 0}
.hero-inner{display:flex;align-items:center;gap:36px}
.hero-copy{flex:1;max-width:720px}
.hero-copy h1{font-size:44px;margin:0 0 14px;line-height:1.05;letter-spacing:-0.02em;font-weight:700}
.hero-copy .sub{color:var(--muted);font-size:18px;margin:0 0 22px}
.hero-ctas{display:flex;gap:12px}

.hero-card{width:420px;min-height:260px;height:auto;background:linear-gradient(180deg,#dbd7e0,#dbd7e0);border-radius:18px;box-shadow:0 20px 60px rgba(53,46,126,0.12);display:flex;align-items:center;justify-content:center}
.card-graphic{display:flex;flex-direction:column;gap:12px;padding:18px}
.chip{background:linear-gradient(90deg,#c4abeb,#bdb0d4);padding:10px 14px;border-radius:12px;font-weight:700;color:#2a2540;box-shadow:0 8px 30px rgba(80,60,140,0.06);display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}
.chip.alt{background:linear-gradient(90deg,#c4abeb,#bdb0d4)}

@media (max-width:900px){
  .nav-list{display:none}
  .wrap{padding:14px}
  .hero-inner{flex-direction:column;align-items:flex-start}
  .hero-card{width:100%;min-height:180px;height:auto}
  .hero-copy h1{font-size:32px}
}

/* Solutions overview styles */
.solutions-section{padding:56px 0 80px}
.solutions-inner{display:flex;gap:28px;align-items:flex-start}
.solutions-copy{flex:1;min-width:0}
.solutions-copy h2{font-size:28px;margin:0 0 10px}
.solutions-copy .lead{color:var(--muted);margin:0 0 22px}
.solutions-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.solution-card{background:rgba(255,255,255,0.7);padding:18px;border-radius:12px;box-shadow:0 8px 30px rgba(50,40,120,0.04)}
.solution-card h3{margin:0 0 8px;font-size:18px}
.solution-card p{margin:0;color:#444}

.solutions-visuals{width:360px;flex:0 0 360px}
.visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.visual-item{background:#fff;border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 12px 40px rgba(80,60,140,0.06);border:4px solid rgba(108,75,255,0.12)}
.visual-item img{width:100%;height:110px;object-fit:cover;border-radius:8px;border:3px solid var(--fifi-purple)}
.visual-item figcaption{font-size:13px;color:var(--muted)}

@media (max-width:1100px){
  .solutions-inner{flex-direction:column}
  .solutions-visuals{width:100%;order:2}
  .solutions-list{grid-template-columns:1fr}
}

/* Mobile-only overrides (<=560px): force header CTAs inline, center hero, enlarge hero-card, stack footer) */
@media (max-width:560px){
  /* Keep header auth buttons on one line and prevent wrapping */
  .auth{display:flex;gap:6px;align-items:center;flex-wrap:nowrap !important}
  .auth > a{white-space:nowrap !important;flex-shrink:0}
  .auth .btn-primary.header-cta{font-size:13px;padding:6px 12px}
  .auth .login{font-size:13px;padding:6px 10px}
  /* ensure both header buttons match size, are slightly taller, and have breathing room */
  .auth .btn-primary.header-cta,
  .auth .login{
    padding:6px 12px;
    font-size:13px;
    min-height:40px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }
  /* position auth group to the right on mobile */
  .site-header .wrap{justify-content:space-between;gap:8px}
  .site-header .wrap .auth{margin-left:auto !important}
  /* keep a moderate gap between header buttons */
  .auth{gap:12px}
  .auth .btn-primary.header-cta{margin-right:6px}

  /* Reduce horizontal padding and gap so logo and buttons sit closer on mobile */
  .wrap{padding-left:12px;padding-right:12px;gap:0px}
  .site-header .wrap{padding-left:12px;padding-right:12px}

  /* Mobile header layout: top row = logo + auth, second row = nav (full-width) */
  .site-header .wrap{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;grid-template-areas:"logo auth" "nav nav";align-items:center;row-gap:0}

  /* Override page-local header styles (e.g. ad-headlines inline CSS) on small screens */
  .site-header .wrap{display:grid !important;grid-template-columns:1fr auto !important;grid-template-rows:auto auto !important;grid-template-areas:"logo auth" "nav nav" !important;align-items:center !important;padding-left:12px !important;padding-right:12px !important}
  .site-header .wrap > .logo{grid-area:logo !important}
  .site-header .wrap > .main-nav{grid-area:nav !important;width:100% !important;margin:0 !important;display:block !important}
  .site-header .wrap > .auth{grid-area:auth !important}
  .site-header .wrap > .logo{grid-area:logo}
  .site-header .wrap > .main-nav{grid-area:nav;width:100%}
  .site-header .wrap > .auth{grid-area:auth}

  /* show the nav on mobile and layout items in a single horizontal row */
  .main-nav{display:block}
  .nav-list{display:flex;gap:6px;overflow-x:visible;white-space:nowrap;padding:0;margin:0;align-items:center}
  .nav-list .nav-item{position:relative;flex:0 0 auto}
  .nav-list .nav-item .drop-btn{padding:5px 8px;border-radius:8px;font-size:13px}
  .nav-list > .nav-item > a, .nav-list > .nav-item > .drop-btn{font-size:13px;padding:5px 8px}
  /* Match nav title color to hero subtext and vertically center labels */
  .nav-list a, .nav-list .drop-btn{color:var(--muted);display:inline-flex;align-items:center;line-height:1}
  /* Ensure uniform font-size and alignment for all nav items (fix Pricing size) */
  .nav-list > .nav-item > a,
  .nav-list > .nav-item > .drop-btn,
  .nav-list .nav-link{
    font-size:13px !important;
    line-height:1;
    padding:5px 8px;
    display:inline-flex;
    align-items:center;
    vertical-align:middle;
  }
  .site-header .wrap > .main-nav{margin-top:0 !important;margin-bottom:0 !important;padding-top:0 !important;padding-bottom:0 !important}
  .site-header .wrap .nav-list{margin-top:0 !important;margin-bottom:0 !important;padding-top:0 !important;padding-bottom:0 !important}
  .main-nav{z-index:40}
  /* dropdowns should open on click (toggle .open) */
  .dropdown-menu{position:absolute;top:100%;left:0;min-width:140px;max-width:240px;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(20,20,50,0.08);padding:8px 0;opacity:0;transform:translateY(6px);pointer-events:none;transition:all .18s ease;z-index:60}
  .nav-item.open .dropdown-menu{opacity:1;transform:none;pointer-events:auto}
  /* ensure main nav is visible below header on mobile */
  .site-header .wrap .main-nav{display:block !important;width:100%;margin:0}

  /* Remove stray vertical gaps in header/nav on mobile */
  .site-header{padding-top:0 !important;padding-bottom:0 !important}
  .site-header .wrap{padding-top:14px !important;padding-bottom:10px !important}
  .site-header .wrap .logo{margin-top:0 !important;margin-bottom:0 !important}
  .site-header .wrap .auth{margin-top:0 !important;margin-bottom:0 !important}
  .site-header .wrap .main-nav{margin-top:0 !important;margin-bottom:0 !important;padding-top:0 !important;padding-bottom:0 !important}
  .nav-list > .nav-item{margin-top:0 !important;margin-bottom:0 !important}
  .nav-item::after{height:0 !important}

  /* Pull the nav row up slightly on mobile to reduce gap between logo/auth and nav */
  .site-header .wrap{row-gap:0 !important}
  .site-header .wrap > .main-nav{margin-top:2px !important}
  .site-header .wrap > .logo,.site-header .wrap > .auth{padding-bottom:4px !important}
  .nav-list{margin-top:0 !important;padding-top:0 !important}

  /* Center hero text and CTAs on mobile */
  .hero-inner{flex-direction:column;align-items:center;gap:18px}
  .hero-copy{max-width:100%;text-align:center}
  .hero-copy h1{font-size:28px;margin-bottom:12px}
  .hero-copy .sub{font-size:16px;margin:0 auto 12px;max-width:560px}
  .hero-ctas{justify-content:center}

  /* Make hero-card taller so chips don't overflow and keep chips centered */
  .hero-card{width:100%;min-height:360px;height:auto;border-radius:16px;padding:18px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
  .card-graphic{display:flex;flex-direction:column;gap:12px;padding:6px;align-items:center}
  .chip{display:inline-flex;width:calc(100% - 24px);max-width:100%;margin:6px auto;padding:12px 25px;white-space:nowrap;overflow:visible;box-sizing:border-box;justify-content:center;align-items:center;text-align:center}

  /* Login/Signup pages: prevent 'Continue with Google' and small links from wrapping */
  .social-btn{white-space:nowrap;overflow:visible;text-overflow:clip;padding:12px 10px;font-size:15px}
  .social-btn img{margin-right:10px}
  .small{white-space:nowrap}
  .small a{white-space:nowrap}

  /* Prevent horizontal & vertical overflow on small screens (login/signup) */
  html, body { overflow-x: hidden; }
  main.wrap{max-width:100% !important;box-sizing:border-box;padding-left:12px !important;padding-right:12px !important;padding-top:24px !important;padding-bottom:24px !important}
  .card, .signup-card{margin:0 auto;box-sizing:border-box}

  /* Stretch login/signup controls so labels are visible on one line
     by reducing outer padding and allowing controls to use full width. */
  main.wrap{padding-left:8px !important;padding-right:8px !important}
  .card, .signup-card{max-width:100% !important;width:100% !important;padding-left:32px !important;padding-right:32px !important}
  .social-btn, .email-btn, .login-action, .login-action[disabled], .email-form input{width:100% !important;box-sizing:border-box}
  .email-form input{font-size:15px}

  /* reduce vertical gap between header and hero, and between hero and next section */
  .site-header{padding-bottom:6px}
  .hero{padding-top:20px;padding-bottom:20px}
  .solutions-section{padding-top:20px}
  .solutions-copy h2{text-align:center}

  /* Footer: icon above text and centered copyright/policies */
  .site-footer .wrap{flex-direction:column;align-items:center;text-align:center;padding-left:0;padding-right:0;width:100%}
  .footer-left{display:flex;flex-direction:column;align-items:center}
  .footer-left .footer-logo{margin-bottom:10px}
  .footer-right{align-items:center}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center}
  .footer-bottom p{width:100%;text-align:center;margin-bottom:8px}
  .footer-policies{white-space:nowrap;display:flex;gap:12px;justify-content:center;width:auto;margin:8px auto 0}
  .footer-policies a{font-size:11px;margin:0 6px;display:inline-block}
}

/* Stronger mobile header/layout guarantees for very small screens */
@media (max-width:480px){
   .site-header .wrap{flex-wrap:nowrap !important;align-items:center}
   .site-header .wrap .auth{margin-left:6px !important;flex-shrink:0}
  .auth > a{display:inline-block;white-space:nowrap !important}
  /* further reduce header paddings on very small screens */
  .site-header .wrap{padding-left:8px;padding-right:12px}
  .wrap{padding-left:8px;padding-right:12px}
  /* ensure main nav is visible below header on very small screens as well */
  .site-header .wrap .main-nav{display:block !important;width:100%;margin:0}
  /* slightly larger buttons on very small screens, but keep equal */
  .auth{gap:4px}
  .auth .btn-primary.header-cta{font-size:12px;padding:5px 10px}
  .auth .login{font-size:12px;padding:5px 8px}
  .auth .btn-primary.header-cta,
  .auth .login{
    padding:5px 10px;
    font-size:12px;
    min-height:36px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }
  .site-header .wrap{justify-content:space-between;gap:6px}
  .site-header .wrap .auth{margin-left:auto !important}
  .auth{gap:12px}
  .auth .btn-primary.header-cta{margin-right:0}

  /* tighten mobile nav spacing for very small screens */
  .nav-list{gap:6px;padding:2px 0;margin:2px 0}
  .nav-list .nav-item .drop-btn{padding:4px 6px;font-size:12px}

  /* constrain dropdown menus so they don't extend past viewport on very small screens */
  .dropdown-menu{
    left:0;
    min-width:140px;
    max-width:220px;
    box-sizing:border-box;
    white-space:normal;
    word-break:break-word;
    z-index:80;
  }
  .nav-item .dropdown-menu li a{white-space:normal;padding:8px 12px;display:block}
}

/* Footer: center copyright and policy links on small screens */
@media (max-width:560px){
  .site-footer .wrap.footer-bottom,
  .site-footer .wrap > .footer-bottom,
  .site-footer .wrap.footer-bottom > p{
    width:100% !important;
    box-sizing:border-box !important;
  }
  .site-footer .wrap.footer-bottom,
  .site-footer .wrap.footer-bottom{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;gap:28px}
  .site-footer .wrap.footer-bottom p{margin:0 !important}
  .footer-policies{display:flex !important;gap:14px !important;justify-content:center !important;align-items:center !important;margin:0 !important;padding:0 !important}
  .footer-policies a{margin-left:0 !important;margin-right:0rem !important}
}

/* Mobile-only policy-page footer centering adjustments */
@media (max-width:560px){
  .policy-page .footer-bottom{flex-direction:column;align-items:center;justify-content:center}
  .policy-page .footer-bottom p{order:1}
  .policy-page .footer-policies{order:2;margin-top:8px}
  .policy-page .footer-policies a{font-size:14px;margin:0 6px}
}

/* Policy pages: center footer content and tighten policy link sizing */
.policy-page .site-footer .wrap{align-items:center;text-align:center}
.policy-page .footer-bottom{justify-content:center}
.policy-page .footer-policies{display:inline-block}
.policy-page .footer-policies a{font-size:11px;margin:0 8px;white-space:nowrap}

/* Dashboard: inputs cards for Ads / Product / Ideas should match chat box width/margins on mobile */
@media (max-width:980px){
  /* Target the left inputs cards inside each tool section */
  #tool-ads .fifi-left.card,
  #products .fifi-left.card,
  #ideas .fifi-left.card {
    width: calc(100% - 0px) !important;
    max-width: none !important;
    margin: 0px 0px !important;
    padding: 20px !important; /* match #chat-results padding */
    box-sizing: border-box !important;
  }

  /* Ensure any in-flow right-side results use the same inner padding for consistency */
  .fifi-right .results {
    padding: 20px !important;
    box-sizing: border-box !important;
  }
}

/* Strong override: force inputs/results to use full content width on mobile (prevent inner controls from constraining outer box) */
@media (max-width:980px){
  /* normalize outer containers */
  .wrap{padding-left:12px !important;padding-right:12px !important}
  .main-grid, .content{width:100% !important;margin:0 !important;padding:0 !important}

  /* make cards stretch to the content width and remove external margins that created offsets */
  .content .section .fifi-grid > .fifi-left.card,
  .content .section .fifi-grid > .fifi-right .results,
  #chat-results,
  #tool-ads-results, #pd-results, #ci-results, #history-results {
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:12px !important;
    padding-right:12px !important;
    box-sizing:border-box !important;
  }

  /* ensure the visible inner card border aligns with the container by removing extra border-box offsets */
  .content .section .fifi-left.card > .field,
  .content .section .fifi-left.card .card{
    box-sizing:border-box !important;
  }
}

/* Fix: ensure form controls inside the inputs cards do not constrain width on mobile */
@media (max-width:980px){
  .fifi-left.card .field{width:100% !important;max-width:none !important;padding:0 !important;margin:0 0 12px !important;box-sizing:border-box !important;}
  .fifi-left.card .field input,
  .fifi-left.card .field textarea,
  .fifi-left.card .field select,
  .fifi-left.card .custom-select,
  .fifi-left.card .custom-select .select-trigger{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }
  /* ensure flex children can shrink to fit the full width container */
  .fifi-left.card .inline-fields .field,
  .fifi-left.card .two-cols .field{min-width:0 !important;flex:1 1 auto !important}
}

/* Ensure avatar menu is fully visible on small screens (override inline dashboard styles) */
@media (max-width:980px){
  .avatar-menu{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 66px !important;
    width: calc(100% - 24px) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    z-index: 2000 !important;
    border-radius: 12px !important;
    overflow: visible !important;
  }
}

/* Settings page: make sidebar & content use full viewport width on small screens
   Removes large left/right gaps so the settings panel stretches edge-to-edge
   (mobile only). */
@media (max-width:560px){
  main.wrap{max-width:100% !important;padding-left:18px !important;padding-right:18px !important}
  .main-grid{grid-template-columns:1fr !important;gap:10px !important;margin:0 !important}
  .main-grid > .sidebar,
  .main-grid > .content,
  .main-grid .card,
  .main-grid .card.section{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding-left:12px !important;
    padding-right:12px !important;
    box-sizing:border-box !important;
    border-radius:12px !important;
  }
  /* ensure the left nav fills the full card and its items align flush */
  .sidebar{padding-top:14px;padding-bottom:14px}
  .nav-small{display:flex;flex-direction:column;gap:8px}
  .nav-small a{width:100% !important;padding-left:12px;padding-right:12px;box-sizing:border-box}
}

/* Stack section header title and subtitle on small screens and add spacing */
@media (max-width:560px){
  .section-header{flex-direction:column;align-items:flex-start;gap:0px}
  .section-header .small-muted{margin-top:0;font-size:15px;color:var(--muted)}
}

/* Center action buttons in settings on mobile except for the Account tab */
@media (max-width:560px){
  /* center .form-row buttons for all sections except #account */
  .content .section:not(#account) .form-row{
    justify-content:center !important;
    gap:12px !important;
    flex-wrap:wrap !important;
  }

  /* center billing action buttons and allow stacking */
  .content .section:not(#account) .billing-actions{
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:12px !important;
  }

  /* make buttons remain their natural size but center them */
  .content .section:not(#account) .btn,
  .content .section:not(#account) .btn-danger,
  .content .section:not(#account) .btn-ghost{
    margin:0 !important;
  }
}

/* Further tighten settings content card on very small screens so the white
   panel doesn't leave large purple gutters. Keep small inner padding so the
   content isn't flush to the device edge. */
@media (max-width:480px){
  /* remove outer wrap gutters so content can use full viewport width */
  main.wrap{padding-left:20 !important;padding-right:20 !important;max-width:100% !important}

  /* make the content column and its card stretch fully and remove extra margins */
  .main-grid{grid-template-columns:1fr !important;gap:18px !important;margin:0 !important;padding:0 !important}
  .main-grid > .content{width:100% !important;padding:0 !important;margin:0 !important}
  .main-grid > .content .card.section,
  .main-grid > .content .card{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:16px !important;
    box-sizing:border-box !important;
    border-radius:12px !important;
  }

  /* keep a small safe inset for the sidebar/nav area so items don't touch edge */
  .main-grid > .sidebar{padding-left:8px !important;padding-right:8px !important}

  /* ensure no residual horizontal scroll from body padding */
  html, body{overflow-x:hidden}
}