: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;

}