:root{

--bg:#1c1b1f;
--surface:#26242b;
--border:#3b3842;

--text:#f5f5f5;
--muted:#9b98a2;

--primary:#6b8cff;
--danger:#ff5d5d;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:"Space Grotesk",sans-serif;

background:var(--bg);

color:var(--text);

}

.topbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:24px 32px;

border-bottom:1px solid var(--border);

background:#222027;

position:sticky;

top:0;

z-index:100;

}

.topbar h1{

font-size:28px;

font-weight:700;

}

.topbar p{

margin-top:4px;

color:var(--muted);

}

.back-btn{

display:flex;

align-items:center;

gap:8px;

padding:10px 16px;

background:transparent;

color:var(--text);

border:1px solid var(--border);

border-radius:10px;

cursor:pointer;

}

.editor-container{

max-width:1100px;

margin:auto;

padding:40px 24px;

}

.editor-section{

background:var(--surface);

border:1px solid var(--border);

border-radius:18px;

padding:28px;

}

.section-header{

display:flex;

gap:16px;

align-items:center;

margin-bottom:28px;

}

.section-icon{

font-size:34px;

color:var(--primary);

}

.section-header h2{

font-size:24px;

}

.section-header p{

margin-top:4px;

color:var(--muted);

}

.editor-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:20px;

}

.input-group{

display:flex;

flex-direction:column;

gap:8px;

}

.input-group.full{

grid-column:1/-1;

}

label{

font-size:14px;

font-weight:600;

}

.required{

color:var(--danger);

}

input,
select{

width:100%;

padding:14px;

background:#1d1b22;

border:1px solid var(--border);

border-radius:12px;

color:var(--text);

font-family:inherit;

font-size:15px;

}

input:focus,
select:focus{

outline:none;

border-color:var(--primary);

}

@media(max-width:700px){

.topbar{

padding:20px;

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.editor-container{

padding:20px;

}

.editor-section{

padding:20px;

}

}

.editor-container{

    max-width:1100px;

    margin:auto;

    padding:40px 24px;

    display:flex;

    flex-direction:column;

    gap:28px;

}

textarea{

    width:100%;

    padding:14px;

    resize:vertical;

    min-height:170px;

    background:#1d1b22;

    border:1px solid var(--border);

    border-radius:12px;

    color:var(--text);

    font-family:inherit;

    font-size:15px;

}

textarea:focus{

    outline:none;

    border-color:var(--primary);

}

.optional{

    color:var(--muted);

    font-size:13px;

}

.screenshot-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.screenshot-row{

    display:flex;

    gap:12px;

    align-items:center;

}

.screenshot-row input{

    flex:1;

}

.icon-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

}

.add-btn{

    background:var(--primary);

    color:white;

}

.remove-btn{

    background:var(--danger);

    color:white;

}

.editor-actions{

    display:flex;

    justify-content:flex-end;

    gap:16px;

}

.cancel-btn{

    padding:14px 22px;

    border:1px solid var(--border);

    background:transparent;

    color:var(--text);

    border-radius:12px;

    cursor:pointer;

}

.save-btn{

    padding:14px 26px;

    border:none;

    background:var(--primary);

    color:white;

    border-radius:12px;

    cursor:pointer;

    font-weight:600;

}
.desc-label-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.desc-tools{
  display: flex;
  align-items: center;
  gap: 8px;
}

.load-format-btn{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.load-format-btn:hover{ border-color: var(--primary); color: var(--text); }

.md-info-btn{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.md-info-btn:hover{ border-color: var(--primary); color: var(--text); }

/* ---- Popup Info Markdown ---- */
.md-overlay{
  position: fixed;
  inset: 0;
  background: rgba(12,11,14,0.72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.md-overlay.open{ opacity: 1; pointer-events: auto; }

.md-info-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 380px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.9);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2,.8,.3,1.2), opacity .18s ease;
}
.md-overlay.open .md-info-card{ transform: scale(1); opacity: 1; }

.md-info-card h3{
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--text);
}

.md-info-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.md-info-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.md-info-row{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.md-info-row code{
  flex: 0 0 110px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--primary);
  font-family: monospace;
}
.md-info-row span{ color: var(--muted); }

/* ---- Dynamic requirements (nyesuaiin emulator) ---- */
.dyn-requirements-wrap{
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}
.dyn-requirements-hint{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.dyn-field-label{
  display: flex;
  align-items: center;
  gap: 4px;
}
.dyn-required-mark{ color: var(--danger); }
.dyn-field-input.missing{ border-color: var(--danger); }