:root{
  --bg:#0b0e14;
  --panel:#11151d;
  --panel-2:#161b25;
  --panel-3:#1c2230;
  --text:#e8ecf4;
  --muted:#8d97ab;
  --line:rgba(255,255,255,.09);
  --accent:#5b8cff;
  --accent-2:#22d3ee;
  --ok:#34d399;
  --shadow:0 24px 60px -34px rgba(0,0,0,.9);
  --r:16px;
  --r-sm:11px;
  --top:66px;
  --ui:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}

[data-ui-theme="light"]{
  --bg:#eef1f7;
  --panel:#ffffff;
  --panel-2:#f6f8fc;
  --panel-3:#eaeef6;
  --text:#141a26;
  --muted:#5d6880;
  --line:rgba(15,23,42,.12);
  --accent:#3b6cf6;
  --accent-2:#0891b2;
  --shadow:0 24px 60px -40px rgba(15,23,42,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(91,140,255,.16), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(34,211,238,.12), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--ui);
  font-size:15px;
  line-height:1.6;
  overflow:hidden;
}

button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

.btn{
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text);
  border-radius:999px;
  padding:11px 22px;
  font-weight:600;
  cursor:pointer;
  transition:.18s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn:hover{transform:translateY(-2px);border-color:rgba(91,140,255,.55)}
.btn:active{transform:none}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),#7c5cff);
  border-color:transparent;
  color:#fff;
  box-shadow:0 16px 34px -18px var(--accent);
}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.sm{padding:8px 16px;font-size:13.5px}
.btn.block-btn{width:100%;padding:14px;font-size:15.5px}
.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(91,140,255,.6);outline-offset:2px
}

.topbar{
  height:var(--top);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 20px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 86%,transparent);
  backdrop-filter:blur(14px);
  position:relative;
  z-index:20;
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .topbar{background:var(--panel)}
}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.logo{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent),#7c5cff 60%,var(--accent-2));
  color:#fff;font-weight:800;font-size:19px;
  font-family:"Noto Nastaliq Urdu",serif;
  box-shadow:0 14px 30px -16px var(--accent);
}
.brand-text h1{margin:0;font-size:17px;font-weight:800;letter-spacing:.2px;font-family:"Noto Nastaliq Urdu",var(--ui)}
.brand-text p{margin:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{display:flex;gap:9px;align-items:center}

.workspace{
  height:calc(100vh - var(--top));
  display:grid;
  grid-template-columns:374px minmax(0,1fr);
  gap:14px;
  padding:14px;
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  min-height:0;
}

.controls{overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.controls::-webkit-scrollbar,.code-scroll::-webkit-scrollbar,.filebar::-webkit-scrollbar{width:10px;height:10px}
.controls::-webkit-scrollbar-thumb,.code-scroll::-webkit-scrollbar-thumb,.filebar::-webkit-scrollbar-thumb{
  background:var(--panel-3);border-radius:99px;border:3px solid transparent;background-clip:padding-box
}

.block{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:15px}
.block-title{display:block;font-weight:700;font-size:14px;margin-bottom:10px}

#prompt{
  width:100%;
  min-height:132px;
  resize:vertical;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:12px 13px;
  line-height:1.75;
  color:var(--text);
}
#prompt:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px rgba(91,140,255,.16)}
[dir="rtl"] #prompt{font-family:"Noto Nastaliq Urdu",var(--ui);font-size:14px;line-height:2.3}

.examples{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:11px 0 13px}
.ex-card{
  display:block;padding:0 0 8px;border:1px solid var(--line);background:var(--panel);
  border-radius:12px;overflow:hidden;cursor:pointer;text-align:start;
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.ex-card:hover,.ex-card:focus-visible{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.18);outline:none}
.ex-card:hover .ex-thumb{transform:scale(1.05)}
.ex-thumb{
  display:block;width:100%;aspect-ratio:400/260;object-fit:cover;
  background:#0d1117;transition:transform .26s ease;
}
.ex-text{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;
  padding:7px 9px 0;font-size:11.5px;line-height:1.7;
  height:calc(5.1em + 7px);
  color:var(--muted);overflow:hidden;
}
[dir="rtl"] .ex-text{font-size:12.5px;line-height:2;height:calc(6em + 7px)}
.ex-card:hover .ex-text{color:var(--text)}

.disclose{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:none;border:0;padding:0 0 0 0;font-weight:700;font-size:14px;cursor:pointer;
}
.disclose i{
  width:9px;height:9px;border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted);
  transform:rotate(45deg);transition:.2s;margin-inline-end:4px
}
.disclose[aria-expanded="false"] i{transform:rotate(-45deg)}
.options{display:grid;gap:13px;margin-top:14px}
.options[hidden]{display:none}

.field{display:grid;gap:6px}
.field label{font-size:12.5px;color:var(--muted);font-weight:600}
.field input,.field select{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:10px 12px;
  width:100%;
}
.field input:focus,.field select:focus{border-color:var(--accent);outline:none}
[dir="rtl"] .field input{font-family:"Noto Nastaliq Urdu",var(--ui);line-height:2.1}

.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{
  width:34px;height:34px;border-radius:11px;border:2px solid transparent;cursor:pointer;
  position:relative;transition:.16s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)
}
.swatch:hover{transform:translateY(-2px)}
.swatch.on{border-color:var(--text);transform:translateY(-2px)}
.swatch span{
  position:absolute;inset:auto 0 -19px 0;text-align:center;font-size:9.5px;color:var(--muted);
  white-space:nowrap;pointer-events:none
}

.segmented{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px}
.segmented button{
  flex:1;border:0;background:transparent;color:var(--muted);padding:8px 6px;border-radius:999px;
  cursor:pointer;font-size:13px;font-weight:600;transition:.16s
}
.segmented button.on{background:var(--accent);color:#fff}
.segmented button:hover:not(.on){color:var(--text)}

.checks{display:grid;gap:6px;max-height:214px;overflow-y:auto;padding-inline-end:4px}
.check{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;cursor:pointer;
  background:var(--panel);border:1px solid transparent;font-size:13.5px;transition:.14s
}
.check:hover{border-color:var(--line)}
.check input{accent-color:var(--accent);width:15px;height:15px}
.check.on{border-color:rgba(91,140,255,.5);background:rgba(91,140,255,.1)}

.stage{display:flex;flex-direction:column;overflow:hidden}
.stage-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel-2);
  border-radius:var(--r) var(--r) 0 0;flex-wrap:wrap
}
.tabs{display:flex;gap:5px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px}
.tab{
  border:0;background:transparent;color:var(--muted);padding:8px 20px;border-radius:999px;
  cursor:pointer;font-weight:600;font-size:13.5px;transition:.16s
}
.tab.on,.tab.active{background:var(--accent);color:#fff}
.stage-tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.devices{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px}
.devices button{
  width:34px;height:30px;border:0;background:transparent;color:var(--muted);border-radius:999px;
  cursor:pointer;font-size:14px;transition:.16s
}
.devices button.on{background:var(--panel-3);color:var(--text)}

.stage-body{position:relative;flex:1;min-height:0;background:var(--panel-2);border-radius:0 0 var(--r) var(--r);overflow:hidden}
.view{position:absolute;inset:0;display:none;flex-direction:column}
.view.on{display:flex}

.preview-view{align-items:center;justify-content:flex-start;padding:18px;overflow:auto;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:26px 26px;
}
.frame-wrap{
  width:100%;max-width:100%;height:100%;margin:auto;
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.85);
  border:1px solid var(--line);
  transition:width .28s cubic-bezier(.4,0,.2,1);
  flex:0 0 auto
}
.frame-wrap.phone{width:400px}
.frame-wrap.tablet{width:780px}
#previewFrame{width:100%;height:100%;border:0;display:block;background:#fff}

.code-view{background:var(--panel)}
.filebar{
  display:flex;gap:6px;padding:9px 10px;border-bottom:1px solid var(--line);
  overflow-x:auto;background:var(--panel-2);flex:0 0 auto
}
.file{
  border:1px solid var(--line);background:var(--panel);color:var(--muted);
  padding:6px 14px;border-radius:999px;cursor:pointer;font-size:13px;white-space:nowrap;transition:.15s
}
.file.on{background:rgba(91,140,255,.16);border-color:rgba(91,140,255,.6);color:var(--text)}
.code-scroll{flex:1;overflow:auto;min-height:0}
.code-pre{
  margin:0;padding:18px 20px;font-family:"Cascadia Code","JetBrains Mono",Consolas,monospace;
  font-size:13px;line-height:1.75;tab-size:2;white-space:pre;color:#cdd6e6;
}
[dir="rtl"] .code-pre{direction:ltr;text-align:left}
.tk-com{color:#6b7a94;font-style:italic}
.tk-str{color:#8fd98f}
.tk-num{color:#f0a76b}
.tk-key{color:#7fb2ff}
.tk-tag{color:#ff8fa3}
.tk-attr{color:#ffd479}
.tk-fn{color:#67e8f9}
.code-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-top:1px solid var(--line);background:var(--panel-2);flex-wrap:wrap
}
.code-foot span{font-size:12.5px;color:var(--muted)}
.code-foot div{display:flex;gap:8px}

.empty-state{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:32px;background:var(--panel-2);z-index:5
}
.empty-state[hidden]{display:none}
.empty-state h2{margin:0;font-size:20px}
.empty-state p{margin:0;max-width:560px;color:var(--muted);font-size:14.5px}
[dir="rtl"] .empty-state p{font-family:"Noto Nastaliq Urdu",var(--ui);line-height:2.3}
.empty-art{display:flex;gap:8px;margin-bottom:6px}
.empty-art span{
  display:block;width:56px;height:40px;border-radius:9px;
  background:linear-gradient(140deg,var(--accent),#7c5cff);
  animation:bob 1.6s ease-in-out infinite
}
.empty-art span:nth-child(2){animation-delay:.18s;opacity:.75}
.empty-art span:nth-child(3){animation-delay:.36s;opacity:.5}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.toast{
  position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:60;
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  padding:12px 18px;border-radius:12px;box-shadow:var(--shadow);
  font-size:14px;opacity:0;transform:translateY(14px);pointer-events:none;transition:.25s
}
.toast.on{opacity:1;transform:none}
.toast.ok{border-color:rgba(52,211,153,.6)}

@media (max-width:1040px){
  body{overflow:auto}
  .workspace{grid-template-columns:1fr;height:auto}
  .controls{max-height:none}
  .stage{height:78vh}
  .brand-text p{display:none}
}
@media (max-width:560px){
  .workspace{padding:10px;gap:10px}
  .topbar{padding:0 12px}
  .brand-text h1{font-size:15px}
  .devices{display:none}
}