/* Scope everything to #oe_app so site styles don’t bleed */
#oe_app {
  --bg:#0F1115;
  --glass: rgba(255,255,255,.08);
  --glass-b: rgba(255,255,255,.12);
  --ink:#111318;
  --text:#eef2f6;
  --muted:#bfc8d6;

  --c-coral:#FF4E46;
  --c-cyan:#2ED2F3;
  --c-lime:#B6F23D;
  --c-violet:#8A7CFF;
  --ring:#2ED2F3;

  --box-bg:#ffffff;
  --box-border:#e4e7ec;

  font-family:Poppins, Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(138,124,255,.18), transparent 60%),
    radial-gradient(1000px 700px at 110% 110%, rgba(46,210,243,.14), transparent 55%),
    var(--bg);
}

/* Container & utilities */
#oe_app .app-shell{max-width:1200px; margin:0 auto; padding:24px}
#oe_app .glass{
  backdrop-filter: blur(10px);
  background: var(--glass);
  border:1px solid var(--glass-b);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
#oe_app .btn{
  border:0; border-radius:14px; padding:14px 18px; font-weight:700; cursor:pointer;
  color:#fff; background:linear-gradient(135deg, var(--c-coral), #ff7a6f);
}
#oe_app .btn:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
#oe_app .btn--ghost{background:transparent; color:var(--text); border:1px solid var(--glass-b)}
#oe_app .iconbtn{
  width:42px; height:42px; border-radius:10px; border:1px solid var(--glass-b);
  background:var(--glass); color:var(--text); font-size:20px; cursor:pointer;
}
#oe_app .iconbtn:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
#oe_app .sr-only{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}

/* Screens */
#oe_app .screen{display:none; animation:fade .2s ease}
#oe_app .screen--active{display:block}
@keyframes fade{from{opacity:.001; transform:translateY(4px)} to{opacity:1; transform:none}}

/* Hero */
#oe_app .hero{margin:24px 0 8px}
#oe_app .hero__title{font-size:clamp(36px,7vw,72px); font-weight:800; margin:0}
#oe_app .hero__subtitle{font-size:clamp(16px,3.2vw,28px); color:#ffb3ad; margin:4px 0 0}

/* Setup */
#oe_app .setup{padding:24px; margin:16px 0 24px}
#oe_app .steps{display:flex; gap:18px; list-style:none; padding:0; margin:0 0 12px 0; color:var(--muted)}
#oe_app .steps li{background:rgba(255,255,255,.06); padding:8px 12px; border-radius:999px}
#oe_app .field{margin:14px 0}
#oe_app .field__label{display:block; margin-bottom:6px; color:var(--muted); font-weight:600}

#oe_app .pills{display:flex; gap:10px; flex-wrap:wrap}
#oe_app .pill{
  border-radius:999px; padding:10px 16px; border:1px solid var(--glass-b);
  background:rgba(255,255,255,.08); color:var(--text); cursor:pointer; font-weight:700;
}
#oe_app .pill[aria-pressed="true"]{background:rgba(255,255,255,.16); outline:2px solid rgba(255,255,255,.2)}
#oe_app .pills--small .pill{padding:8px 12px}

#oe_app .seg{
  display:inline-flex; gap:2px; padding:4px; background:rgba(255,255,255,.08);
  border:1px solid var(--glass-b); border-radius:999px;
}
#oe_app .seg button{
  border:0; padding:10px 16px; border-radius:999px; cursor:pointer; color:var(--text);
  background:transparent; font-weight:700;
}
#oe_app .seg button[aria-selected="true"]{background:linear-gradient(135deg, var(--c-coral), #ff7a6f); color:#fff}
#oe_app .seg--small button{padding:8px 12px}

#oe_app .actions{display:flex; flex-direction:column; gap:8px; margin-top:12px}
#oe_app .helper{color:var(--muted); margin:0}

/* FAQ */
#oe_app .faq{padding:16px; margin:8px 0 24px;}

/* App bar */
#oe_app .appbar{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  gap:12px; padding:10px 14px; position:sticky; top:12px; z-index:12;
}
#oe_app .appbar__right{display:flex; gap:8px; justify-content:flex-end}
#oe_app .appbar__center{display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap}

/* Board */
#oe_app .board-wrap{position:relative; margin-top:14px}
#oe_app .board{
  display:flex; gap:18px; justify-content:center; align-items:stretch; flex-wrap:nowrap;
  overflow-x:auto; padding:18px; border-radius:18px; background:rgba(255,255,255,.04);
  min-height:360px;
}
#oe_app .box{
  background:var(--box-bg); color:var(--ink); border:2px solid var(--box-border);
  width:min(210px, 24vw); height:min(360px, 48vh); border-radius:18px;
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
#oe_app .box__placeholder{color:#9aa1ad; text-align:center; padding:6px}
#oe_app .box__input{
  width:90%; height:90%; border:none; outline:none; text-align:center;
  font-size:clamp(48px, 8vw, 92px); background:transparent;
}

/* Type mode: clean paper feel (no lines to avoid noise) */
#oe_app [data-mode="segmentWrite"] .box{
  background:#fbfcfe;
}

/* Tokens */
#oe_app .token{
  width:86%; aspect-ratio:1/1; border-radius:999px;
  box-shadow: inset 0 12px 22px rgba(255,255,255,.55), inset 0 -16px 24px rgba(0,0,0,.25);
  transform: scale(.92); transition: transform .15s ease;
}
#oe_app .token:active{transform: scale(.88)}
#oe_app .token--coral{background:#FF4E46}
#oe_app .token--cyan{background:#2ED2F3}
#oe_app .token--lime{background:#B6F23D}
#oe_app .token--violet{background:#8A7CFF}
#oe_app .token--gold{background:#FFD166}
#oe_app .token--gray{background:#adb5bd}

/* Box chrome */
#oe_app .box__icon{
  position:absolute; top:10px; right:10px; display:flex; gap:6px;
}
#oe_app .box__icon button{
  width:32px; height:32px; border-radius:10px; border:1px solid var(--glass-b);
  background:rgba(255,255,255,.9); color:#222; font-weight:700; cursor:pointer;
}
#oe_app .palette{position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:none; gap:6px}
#oe_app .palette.is-open{display:flex}
#oe_app .palette button{
  width:28px; height:28px; border-radius:999px; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.25)
}

/* Dock */
#oe_app .dock{
  position:absolute; right:10px; top:10px; display:flex; flex-direction:column; gap:8px; padding:8px;
}

/* Hint */
#oe_app .hint{margin-top:10px; padding:12px 14px; color:var(--muted);}

/* Make the app fill the viewport and center it */
#oe_app{
  /* viewport height fallbacks */
  min-height: 100vh;        /* fallback */
  min-height: 100svh;       /* modern, safe on mobile */
  /* Center the app shell */
  display: grid;
  place-items: center;
  /* Keep your existing background gradient & variables from before */
}

/* Ensure the inner app can size nicely within the centered area */
#oe_app .app-shell{
  width: 100%;
  max-width: 1200px;
  margin: 0;                /* grid centering handles it */
  padding: 24px;            /* keep your padding */
}

/* When content is taller than the viewport (e.g., many boxes),
   the page should scroll normally */
#oe_app .screen--active{
  width: 100%;
}

/* ===== Dock contrast upgrade ===== */
#oe_app .dock{
  position:absolute;
  right:12px; top:12px;
  display:flex; flex-direction:column; gap:10px;
  padding:10px;
  border-radius:20px;
  /* darker glass so it never disappears on white boards */
  background: rgba(18,20,26,.92);
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 10px 30px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
  z-index: 5;
}

#oe_app .iconbtn{
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:#fff; font-size:20px; cursor:pointer;
  transition: background .15s ease, transform .12s ease;
}
#oe_app .iconbtn:hover{ background: rgba(255,255,255,.14) }
#oe_app .iconbtn:active{ transform: translateY(1px) }

/* ====== ≤1200px ====== */
@media (max-width: 1200px){
  #oe_app .app-shell{padding:20px}
  #oe_app .hero__title{font-size: clamp(34px, 6vw, 64px)}
  #oe_app .hero__subtitle{font-size: clamp(15px, 2.6vw, 24px)}
  #oe_app .board{gap:16px; padding:16px; min-height:340px}
  #oe_app .box{width:min(200px, 25vw); height:min(340px, 46vh)}
  #oe_app .dock{right:10px; top:10px}
}

/* ====== ≤992px (tablet landscape / small laptop) ====== */
@media (max-width: 992px){
  #oe_app .appbar{
    grid-template-columns: 1fr; 
    justify-items: center;
    row-gap:10px;
    top:8px;
  }
  #oe_app .appbar__center{flex-wrap:wrap}
  #oe_app .pills--small .pill{padding:8px 12px}
  #oe_app .board{gap:14px; padding:14px; min-height:320px}
  #oe_app .box{width:min(190px, 28vw); height:min(320px, 44vh)}
  #oe_app .hint{font-size:14px}
}

/* ====== ≤768px (tablet portrait) ====== */
@media (max-width: 768px){
  /* center only the setup screen vertically; activity stays top-aligned for space */
  #oe_app{ min-height:100svh; display:grid; }
  #oe_app #setupSection.screen--active{ place-self:center; width:100% }

  #oe_app .setup{padding:18px}
  #oe_app .steps{gap:12px}
  #oe_app .seg button{padding:8px 12px}
  #oe_app .pills .pill{padding:9px 14px}

  #oe_app .board{gap:12px; padding:12px; min-height:300px}
  #oe_app .box{width:min(170px, 30vw); height:min(300px, 42vh)}

  /* dock shifts a bit inward so it never kisses the bezel */
  #oe_app .dock{right:8px; top:8px}
}

/* ====== ≤600px (large phones) ====== */
@media (max-width: 600px){
  #oe_app .hero__title{font-size: clamp(30px, 8.4vw, 48px)}
  #oe_app .hero__subtitle{font-size: clamp(14px, 3.6vw, 20px)}
  #oe_app .setup{padding:16px}
  #oe_app .appbar{top:6px}

  #oe_app .board{
    gap:10px; padding:10px;
    min-height:280px;
    border-radius:14px;
  }
  #oe_app .box{
    width:min(150px, 34vw);
    height:min(260px, 40vh);
    border-radius:16px;
  }
  #oe_app .box__input{font-size: clamp(42px, 10vw, 76px)}

  /* Make the dock a floating pill on the right center for thumb reach */
  #oe_app .dock{
    right:6px; top:50%; transform: translateY(-50%);
    padding:8px; border-radius:18px;
  }
  #oe_app .iconbtn{width:42px; height:42px; border-radius:12px}
}

/* ====== ≤480px (typical phones) ====== */
@media (max-width: 480px){
  #oe_app .app-shell{padding:14px}
  #oe_app .setup{padding:14px}
  #oe_app .pills{gap:8px}
  #oe_app .pill{padding:8px 12px}
  #oe_app .seg{gap:2px}
  #oe_app .seg button{padding:7px 10px}
  #oe_app .btn{padding:12px 16px; border-radius:12px}

  #oe_app .board{gap:8px; padding:8px; min-height:250px}
  #oe_app .box{
    width:min(136px, 38vw);
    height:min(230px, 38vh);
  }
  #oe_app .box__input{font-size: clamp(38px, 11vw, 68px)}

  /* dock goes bottom-right; avoids covering box corners */
  #oe_app .dock{
    top:auto; right:8px; bottom:8px; transform:none;
    display:grid; gap:8px;
    padding:8px; border-radius:16px;
  }
}

/* ====== ≤360px (small phones) ====== */
@media (max-width: 360px){
  #oe_app .hero__title{font-size: 26px}
  #oe_app .hero__subtitle{font-size: 13px}
  #oe_app .board{gap:6px; padding:6px}
  #oe_app .box{
    width:min(120px, 42vw);
    height:min(200px, 36vh);
    border-radius:14px;
  }
  #oe_app .box__input{font-size: clamp(32px, 12vw, 56px)}
  #oe_app .iconbtn{width:40px; height:40px}
  #oe_app .palette button{width:24px; height:24px}
}



/* Print cleanly */
@media print{
  #oe_app {background:#fff; color:#000}
  #oe_app .hero,#oe_app .appbar,#oe_app .dock,#oe_app .hint,#oe_app .faq{display:none !important}
  #oe_app .board{background:#fff}
  #oe_app .box{box-shadow:none}
}
@media (max-width:900px){
  #oe_app .appbar{grid-template-columns:1fr; gap:10px}
  #oe_app .board{gap:12px}
  #oe_app .box{width:min(180px, 30vw); height:min(300px, 46vh)}
}
@media (prefers-reduced-motion: reduce){
  #oe_app *{animation:none !important; transition:none !important}
}