:root{
  --bg:#0d1117;
  --panel:#161b22;
  --panel2:#1e252f;
  --border:#2d333b;
  --text:#e6edf3;
  --muted:#8b949e;
  --accent:#e11d74;
  --code-bg:#0b0e14;
}

*{ -webkit-tap-highlight-color:transparent; box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; }
body{
  font-family:'Vazirmatn',sans-serif;
  background:var(--bg);
  color:var(--text);
}
.code-font{ font-family:'Fira Code','Consolas',monospace; }

#root{ height:100%; }

.app-shell{
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  background:
    radial-gradient(circle at 90% 0%, rgba(225,29,116,.08), transparent 40%),
    radial-gradient(circle at 10% 100%, rgba(109,40,217,.10), transparent 45%),
    var(--bg);
}

/* ---- Topbar ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:7px; }
.logo{
  font-family:'Fira Code',monospace;
  font-weight:500;
  color:var(--accent);
  background:rgba(225,29,116,.12);
  padding:2px 8px; border-radius:8px;
  font-size:14px;
}
.brand-name{ font-weight:700; font-size:18px; letter-spacing:.5px; }
.berry{ font-size:15px; }
.reset-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  padding:6px 12px;
  border-radius:9px;
  font-family:'Vazirmatn';
  font-size:13px;
}
.reset-btn:active{ background:var(--panel2); }

/* ---- Tabs ---- */
.tabs{
  display:flex; gap:6px;
  padding:8px 10px 6px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.tab{
  flex:1;
  min-height:46px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
  background:var(--panel2);
  border:1px solid var(--border);
  border-bottom:3px solid var(--acc);
  border-radius:11px 11px 0 0;
  color:var(--muted);
  transition:all .18s ease;
  position:relative;
}
.tab-active{
  background:var(--code-bg);
  color:var(--text);
  transform:translateY(-1px);
  box-shadow:0 -2px 12px rgba(0,0,0,.3);
}
.tab-dot{ width:8px; height:8px; border-radius:50%; opacity:.5; }
.tab-active .tab-dot{ opacity:1; }
.tab-label{ font-weight:700; font-size:14px; letter-spacing:.5px; }
.tab-ext{ font-size:10px; opacity:.6; }

/* ---- Editor zone ---- */
.editor-zone{
  flex:1 1 55%;
  min-height:0;
  display:flex;
  background:var(--code-bg);
}
.hidden-zone{ display:none !important; }

.editor-wrap{
  display:flex; flex-direction:column;
  width:100%; min-height:0;
}
.editor-scroll{
  flex:1; min-height:0;
  display:flex;
  position:relative;
  overflow:hidden;
}
.gutter{
  flex:0 0 auto;
  padding:10px 6px 10px 8px;
  text-align:right;
  color:#4b5563;
  font-size:14px; line-height:1.55;
  background:var(--code-bg);
  border-inline-end:1px solid var(--border);
  white-space:pre;
  user-select:none;
  overflow:hidden;
  direction:ltr;
}
.code-area{
  position:relative;
  flex:1; min-width:0;
  direction:ltr;
}
.hl, .ta{
  margin:0;
  padding:10px 12px;
  font-size:14px;
  line-height:1.55;
  white-space:pre;
  tab-size:2;
  border:0;
  width:100%; height:100%;
  overflow:auto;
  direction:ltr;
  text-align:left;
}
.hl{
  position:absolute; inset:0;
  color:var(--text);
  pointer-events:none;
  z-index:1;
  overflow:auto;
}
.ta{
  position:absolute; inset:0;
  background:transparent;
  color:transparent;
  caret-color:var(--accent);
  resize:none; outline:none;
  z-index:2;
  -webkit-text-fill-color:transparent;
}

/* syntax token colors */
.hl .t{ color:#7ee787; }
.hl .a{ color:#79c0ff; }
.hl .s{ color:#a5d6ff; }
.hl .k{ color:#ff7b72; }
.hl .n{ color:#f2cc60; }
.hl .c{ color:#6a737d; font-style:italic; }
.hl .p{ color:#8b949e; }
.hl .pr{ color:#79c0ff; }
.hl .v{ color:#a5d6ff; }

/* ---- Suggestion bar ---- */
.suggest-bar{
  display:flex; gap:6px;
  padding:7px 8px;
  overflow-x:auto;
  background:var(--panel2);
  border-top:1px solid var(--border);
  direction:ltr;
}
.suggest-bar::-webkit-scrollbar{ height:0; }
.suggest-chip{
  flex:0 0 auto;
  min-height:38px;
  padding:0 14px;
  background:rgba(121,192,255,.12);
  border:1px solid rgba(121,192,255,.3);
  color:#79c0ff;
  border-radius:9px;
  font-size:13px;
  white-space:nowrap;
}
.suggest-chip:active{ background:rgba(121,192,255,.28); }

/* ---- Symbol keyboard row ---- */
.symbol-row{
  display:flex; gap:5px;
  padding:6px 8px;
  overflow-x:auto;
  background:var(--panel);
  border-top:1px solid var(--border);
  direction:ltr;
}
.symbol-row::-webkit-scrollbar{ height:0; }
.sym-btn{
  flex:1 0 auto;
  min-width:42px; min-height:42px;
  background:var(--panel2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:9px;
  font-size:17px; font-weight:500;
}
.sym-btn:active{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---- Status strip ---- */
.status-strip{
  display:flex; align-items:center; gap:16px;
  padding:5px 14px;
  font-size:11px;
  color:var(--muted);
  background:var(--panel);
  border-top:1px solid var(--border);
}
.save-dot{ margin-inline-start:auto; color:#3fb950; font-size:10px; }

/* ---- Preview ---- */
.preview-zone{
  flex:0 0 34%;
  min-height:0;
  display:flex; flex-direction:column;
  background:var(--panel);
  border-top:2px solid var(--accent);
}
.preview-full{
  position:fixed; inset:0; z-index:50;
  flex:1 1 auto;
}
.preview-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 14px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.preview-title{ font-size:13px; font-weight:700; color:var(--muted); }
.preview-actions{ display:flex; gap:6px; }
.pv-btn{
  min-height:36px;
  padding:0 14px;
  background:var(--accent);
  border:0;
  color:#fff;
  border-radius:9px;
  font-family:'Vazirmatn';
  font-size:13px; font-weight:600;
}
.pv-btn:active{ opacity:.8; }
.pv-btn.ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
}
.preview-frame{
  flex:1; width:100%;
  border:0; background:#fff;
}

/* ---- Footer ---- */
.foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 14px;
  font-size:11px;
  color:var(--muted);
  background:var(--panel);
  border-top:1px solid var(--border);
}
.foot a{ color:var(--accent); text-decoration:none; font-weight:600; }
.foot a:active{ text-decoration:underline; }

/* ---- Toast ---- */
.toast{
  position:fixed;
  bottom:70px; left:50%;
  transform:translateX(-50%);
  background:var(--panel2);
  border:1px solid var(--accent);
  color:var(--text);
  padding:10px 20px;
  border-radius:12px;
  font-size:14px;
  z-index:100;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  animation:pop .25s ease;
}
@keyframes pop{
  from{ opacity:0; transform:translate(-50%,10px); }
  to{ opacity:1; transform:translate(-50%,0); }
}

/* Larger screens: editor + preview side by side */
@media (min-width:820px){
  .app-shell{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto 1fr auto auto;
  }
  .topbar{ grid-column:1/3; }
  .tabs{ grid-column:1/2; }
  .editor-zone{ grid-column:1/2; grid-row:3; }
  .status-strip{ grid-column:1/2; grid-row:4; }
  .preview-zone{ grid-column:2/3; grid-row:2/6; border-top:0; border-inline-start:2px solid var(--accent); }
  .foot{ grid-column:1/2; grid-row:5; }
}
</parameter>