:root{
  --bg-page:#000; 
  --bg-card:#0f0f10; 
  --bg-canvas:#111; 
  --ink:#fff;
  --chip:#1e1e1e; 
  --stroke:#2a2a2a; 
  --panel:#151515;
}

html,body{
  margin:0; 
  height:100%; 
  background:var(--bg-page); 
  color:var(--ink);
  font-family:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.app-frame{
  width:100%; 
  height:100%;
  display:flex; 
  justify-content:center; 
  align-items:center;
  padding:12px; 
  box-sizing:border-box;
}

.safari-card{
  width:min(900px,92vw);
  height:100%;
  background:var(--bg-card);
  border-radius:18px; 
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
  display:flex; 
  flex-direction:column;
  border:1px solid transparent; 
}

/* Top bar */
.safari-bar{
  background:#e8e8ea; 
  height:44px; 
  display:flex; 
  align-items:center;
  padding:0 12px; 
  border-bottom:1px solid #cfcfd4; 
  position:relative; 
  flex-shrink:0;
}
.bar-left{display:flex; gap:8px; align-items:center;}
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.red{background:#ff5f57}.yellow{background:#ffbd2e}.green{background:#28c940}

.spacer{flex:1 1 0;}
.bar-pill{
  background:#f6f6f8; 
  color:#333; 
  border:1px solid #d4d4d8;
  border-radius:10px; 
  padding:4px 10px; 
  font-size:12px; 
  line-height:1;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset; 
  white-space:nowrap;
}
.bar-pill.btn{ cursor:pointer; }
.safari-url{
  min-width:88px;
  max-width:calc(100% - 220px);
  text-align:center; 
  overflow:hidden; 
  text-overflow:ellipsis;
}
.safari-actions{ display:flex; gap:8px; margin-left:8px; }

@media (max-width: 600px){
  .spacer.left{ flex:0 0 6px; }
  .spacer.right{ flex:1 1 auto; }
  .safari-url{ text-align:left; max-width:calc(100% - 170px); }
}

.safari-content{ flex:1; position:relative; background:var(--bg-canvas); }
#canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

#ui{
  position:absolute; 
  left:50%; 
  transform:translateX(-50%); 
  bottom:12px;
  width:clamp(220px, 75%, 290px);  /* ⬅ another 5% smaller (10% total) */
  padding:6px; 
  background:rgba(20,20,22,.92);
  border:1px solid var(--stroke); 
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.5); 
  backdrop-filter:blur(6px);
}

#ui .menu-grid{
  display:grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "font color"
    "export caps";
  align-items:center;
  gap:4px;
}

#ui #fontMenuBtn{ 
  grid-area:font; 
  justify-self:start; 
  min-width:140px;  /* keep pill in one line */
}
#ui #colorBtn{ grid-area:color; justify-self:end; }
#ui #exportBtn{ grid-area:export; justify-self:start; }
#ui #capsBtn{ grid-area:caps; justify-self:end; }

.chip{ 
  border:1px solid #333; 
  background:var(--chip); 
  color:var(--ink);
  padding:6px 14px; 
  border-radius:999px; 
  cursor:pointer; 
  font-size:13px; 
  height:28px;           /* uniform pill height */
  display:flex; 
  align-items:center; 
  justify-content:center;
  white-space:nowrap;
}
.chip.success{ background:#2a9646; border-color:#2a9646; }

.chip-group{ position:relative; display:inline-block; }
.popover{
  position:absolute; 
  display:none; 
  min-width:180px; 
  padding:6px;
  background: var(--panel); 
  color: var(--ink); 
  border:1px solid #333; 
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); 
  z-index:1000;
  bottom:100%; 
  margin-bottom:6px;
}
.popover.open{ display:block; }
.menu-item{ 
  display:block; 
  padding:8px 10px; 
  border-radius:8px; 
  background:transparent; 
  color:inherit; 
  border:0; 
  cursor:pointer; 
  font-size:13px; 
}
.menu-item:hover{ background:rgba(255,255,255,.06); }

.slider-row{ 
  display:grid; 
  grid-template-columns: 1fr 1fr; 
  gap:4px; 
  margin-top:4px; 
}
.slider-card{ 
  background:#f1f1f1; 
  color:#111; 
  border:1px solid #ddd; 
  border-radius:8px;
  padding:4px 6px; 
  display:flex; 
  flex-direction:column; 
  gap:2px;
  min-width:0; 
}
.slider-label{ font-size:11px; color:#333; }
input[type="range"]{ 
  -webkit-appearance:none; 
  appearance:none; 
  height:14px; 
  background:transparent; 
  width:100%; 
}
input[type="range"]::-webkit-slider-runnable-track{ 
  height:4px; 
  background:#dedede; 
  border-radius:999px; 
  border:1px solid #d0d0d0; 
}
input[type="range"]::-webkit-slider-thumb{ 
  -webkit-appearance:none; 
  width:12px; 
  height:12px; 
  margin-top:-4px; 
  background:#fff; 
  border:1px solid #c8c8c8; 
  border-radius:50%; 
}

@media (max-width: 600px){
  .app-frame{ align-items:flex-start; }
  .safari-card{ width:calc(100vw - 24px); height:calc(100vh - 24px); }
}

/* ---------------- WHITE MODE FIX ---------------- */
.safari-card.white-mode {
  border: 1px solid #ddd;        
  box-shadow:0 30px 90px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.1) inset;
}

.safari-card.white-mode .safari-bar {
  background:#f9f9f9;
  border-bottom:1px solid #ccc;  
}

.safari-card.white-mode .bar-pill {
  background:#fff;
  border:1px solid #bbb;         
  color:#111;
}