/* =========================
   BadgeMax Pro — Production UI (fixed)
   ========================= */

/* Theme */
:root{
  --bg:        #fafcff;
  --panel:     #ffffff;
  --text:      #0f172a;
  --muted:     #475569;
  --border:    #e2e8f0;
  --field:     #f8fafc;
  --accent:    #A4B3FC;   /* refined blue */
  --accent-2:  #8895D2;   /* sky-500 */
  --accent-ink:#ffffff;
  --bevel:     #cbd5e1;
  --ring:      color-mix(in srgb, var(--accent) 28%, transparent);
  --shadow:    0 8px 28px rgba(15,23,42,.08);
  color-scheme: light;
}

/* Base */
html,body{height:100%}
*{box-sizing:border-box}
body{
  font:14px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  margin:0;
  background:
    radial-gradient(900px 540px at -10% -10%, rgba(37,99,235,.12), transparent 60%),
    radial-gradient(900px 540px at 110% 20%, rgba(14,165,233,.10), transparent 60%),
    var(--bg);
  color:var(--text);
}

/* Top bar */
.site-bar{
  position:sticky;top:0;z-index:50;
  padding:12px 16px 12px 0;            /* flush left */
  background:#ffffffd9;
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
}

/* Make the row actually flex, bottom-aligned, no wrap, no gap */
.brand-wrap{
  display:flex;                 /* not display:flex-end */
  flex-direction: row;
  align-items:flex-end;         /* bottom align */
  justify-content:flex-start;   /* keep in source order */
  gap:0;
  flex-wrap:nowrap;
}

/* Guarantee marquee before slogan (in case HTML changes) */
.box.brand-marquee{ order:1; }
.brand-slogan{ order:2; }

/* Hug the right edge tightly */
.brand-slogan{
  margin:0;
  padding:0;
  white-space:nowrap;
  line-height:1;                /* sit low */
}

/* Hide legacy title/marquee if still present */
.site-bar .brand-title{ display:none !important }
.marq3d{ display:none !important }

/* App grid */
.app{
  display:grid;gap:16px;width:100%;
  grid-template-columns:1fr;
  max-width:1100px;margin:16px auto;padding:0 12px;
}
@media (min-width: 980px){
  .app{
    grid-template-columns:minmax(300px, 420px) 1fr;
    gap:18px; margin:20px auto; padding:0 16px;
  }
  
  .site-bar {
    position: sticky;
    top: 0;
    z-index: 50;
  
    display: flex;               /* make it flex */
    justify-content: center;     /* center horizontally */
    align-items: center;         /* center vertically */
    margin: 0;
    background: #ffffffd9;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
  }
  
  .brand-slogan {
    transform:translateX(-50px); 
  }
}

/* Make Preview panel appear first on mobile, second on desktop */
.badgeBox{ order:-1 }
@media (min-width: 980px){ .badgeBox{ order:0 } }

/* Panels */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow);
}
@media (min-width: 980px){ .panel{ padding:16px } }

h1{ margin:0 0 10px; font:800 16px/1.25 system-ui; color:var(--text) }
.small{ font-size:12px; color:var(--muted) }
.inline{ display:inline-flex; align-items:center; gap:8px }

/* Forms */
.row{ display:grid; gap:6px; margin:10px 0 }
.grid2{ display:grid; grid-template-columns:1fr; gap:12px }
.grid3{ display:grid; grid-template-columns:1fr; gap:12px }
@media (min-width: 640px){
  .grid2{ grid-template-columns:1fr 1fr }
}
@media (min-width: 820px){
  .grid3{ grid-template-columns:1fr 1fr 1fr }
}

label{ font:600 12px/1.2 system-ui; color:var(--muted) }

input[type="text"],input[type="url"],input[type="number"],textarea,select{
  width:100%; min-height:48px; padding:12px; border-radius:12px;
  border:1px solid var(--border); background:var(--field);
  color:var(--text); font:600 13px/1.25 ui-sans-serif;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input[type="color"]{
  width:100%; height:48px; padding:0; background:var(--field);
  border-radius:12px; border:1px solid var(--border);
}
textarea.code{ min-height:140px; font:12px/1.5 ui-monospace; white-space:pre; }

input:focus, textarea:focus, select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring);
  outline:0;
}

/* Buttons */
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
button{
  border:0; border-radius:12px; padding:12px 16px; cursor:pointer;
  font:800 13px/1 ui-sans-serif; letter-spacing:.2px;
  color:var(--accent-ink);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 6px 16px rgba(2,6,23,.15);
  transition:transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
button:hover{ filter:brightness(1.06) }
button:active{ transform: translateY(1px) }
button.secondary{
  background: var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
}
@media (max-width: 640px){
  .actions > button{ flex:1 1 100% }
}

/* Code / logs */
.codebox{
  width:100%; min-height:120px; border-radius:12px;
  border:1px solid var(--border); background:var(--field);
  color:var(--text); padding:12px; font:12px/1.5 ui-monospace;
  overflow:auto;
}

/* Status */
.ok{ color:#16a34a; font-weight:800 }
.warn{ color:#d97706; font-weight:800 }
.fail{ color:#dc2626; font-weight:800 }

/* Preview: make the SVG scale fluidly */
#preview{
  display:block;
  width:100%!important;
  height:auto!important;
  max-width:100%;
  border-radius:10px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border:1px dashed var(--border);
  aspect-ratio: 340 / 72; /* reserves space while loading */
}
/* even if someone adds width/height attributes, force it */
object#preview[width]{ width:100%!important }
object#preview[height]{ height:auto!important }

/* Dividers */
.panel hr{ border:none; border-top:1px solid var(--border); margin:12px 0 }

/* Safe areas */
@supports (padding: max(0px)){
  body{ padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* Small polish */
input[type="url"]{ word-break: break-all }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }

/* =========================
   Mobile Hardening Patch
   ========================= */

/* 1) Prevent any horizontal scroll on phones */
html, body { overflow-x: hidden }

/* 2) Force every complex grid to collapse early on narrow devices */
@media (max-width: 560px){
  .grid2, .grid3 { grid-template-columns: 1fr !important }
  .actions { gap: 8px }
}

/* 3) Make inline toolbars wrap instead of overflowing */
.inline { flex-wrap: wrap }

/* 4) Code + attestation: wrap long lines, limit height on phones, scroll vertically */
pre.codebox,
#att.codebox {
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-height: 42vh;
}

/* Textareas: never force page wider; scroll instead */
textarea.code,
.codebox {
  overflow: auto;
  max-height: 42vh;
}

/* 5) Long URLs shouldn’t blow out the layout */
input[type="url"]{
  word-break: break-all;
  font-size: clamp(12px, 3.2vw, 13px);
}

/* 6) Buttons: single-column on narrow screens, no cramping */
@media (max-width: 640px){
  .actions > button { flex: 1 1 100% }
}

/* 7) Panel + heading scale down a bit more on very small phones */
@media (max-width: 380px){
  .panel { padding: 12px }
  h1 { font-size: 15px }
}

/* 8) Prevent accidental wide content inside panels */
.panel > * { min-width: 0 }  /* allows children to shrink inside grid/flex */


/* ===== HEADER 3D MARQUEE (cubic, flush-left) ===== */
.box.brand-marquee{
  margin:0;                                          /* hard-left */
  width: clamp(320px, 42vw, 440px);                  /* keep room for slogan */
  height: clamp(50px, 8.5vw, 78px);
  display:flex;
  gap:0;
  perspective:800px;
}

/* faces */
.box.brand-marquee .inner{
  position:relative;
  flex:1 1 50%;
  height:100%;
  white-space:nowrap;
  overflow:hidden;
  border-radius:0; /* crisp cubic */
  box-shadow: inset 0 0 0 1px rgba(2,6,23,.12);
  isolation:isolate;
  display:flex;
  align-items:center;
}

/* left (cooler/darker) */
.box.brand-marquee .inner:first-child{
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.05)),
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 60%, #ffffff),
      color-mix(in srgb, var(--accent) 15%, #ffffff));
  transform-origin:right center;
  transform:perspective(220px) rotateY(-15deg);
  filter:saturate(.96);
}

/* right (brighter/near) */
.box.brand-marquee .inner:last-child{
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)),
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent-2) 65%, #ffffff),
      color-mix(in srgb, var(--accent-2) 20%, #ffffff));
  transform-origin:left center;
  transform:perspective(220px) rotateY(15deg);
}

/* edge glow */
.box.brand-marquee .inner::before{
  content:"";
  position:absolute; inset:-1px -1px;
  pointer-events:none;
  background:
    radial-gradient(180px 80px at 0% 50%, rgba(14,165,233,.25), transparent 65%),
    radial-gradient(180px 80px at 100% 50%, rgba(14,165,233,.25), transparent 65%);
  mix-blend-mode:screen; opacity:.45;
}

/* text track — tight timing: exact half-cycle offset */
.box.brand-marquee .inner span{
  position:absolute;
  left:100%;
  font:900 clamp(18px, 5.6vw, 44px)/1 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  letter-spacing:.4px;
  color:var(--text);
  text-shadow:0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(2,6,23,.18);
  will-change:transform;
  animation:bm-marquee 6s linear infinite;          /* faster loop */
  transform:translate3d(0,0,0);
}
.box.brand-marquee .inner:first-child span{
  animation-delay:-3.8s;                                /* half of 6s = seamless handoff */
}

@keyframes bm-marquee{
  0%   { transform: translate3d(0,0,0) }
  100% { transform: translate3d(-200%,0,0) }          /* right → left sweep */
}

/* hover pause (desktop only) */
@media (hover:hover){
  .box.brand-marquee:hover .inner span{ animation-play-state:paused }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .box.brand-marquee .inner span{ animation:none; transform:translate3d(0,0,0) }
}

/* small screens: keep marquee + slogan side-by-side */
@media (max-width:560px){
  .box.brand-marquee{ width:min(64vw, 320px) }
  .brand-slogan{ font-size:clamp(13px, 3.6vw, 16px) }
  .box.brand-marquee .inner:first-child span{
  animation-delay:-3.4s;  /* half of 6s = seamless handoff */
}
}

.wrapinfo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.8em;
}

#q {
  font-weight: bold;
}

#q a {
  color: black; 
}

#info {
  color: #606060;
}

.box.brand-marquee .inner::before{ content:none; }

.foot {
  text-align: center; 
}