:root{
    --primary: #181c2a;
    --secondary: #eebd3d;
    --background: #10131c;
    --card: #232946;
    --accent: #eebd3d;
    --text: #f4f4f6;
    --chip-bg: #232946;
    --border: #eebd3d;
    --shadow: 0 8px 30px rgba(35,41,70,0.18);
    --logo-size:120px; 
}

body{
    margin:0;
    background:var(--background);
    color:var(--text);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:30px;
}

.main-content{
    display:flex;
    gap:24px;
    align-items:flex-start;
    justify-content:center;
    width:100%;
    max-width:1400px; 
}

.wrap{max-width:1220px;width:100%} 

header{display:flex;align-items:center;gap:20px;margin-bottom:10px;}
  h1{margin:0;font-size:26px;letter-spacing:1px;} 

.logo-bless{
    width:var(--logo-size);
    height:var(--logo-size);
    border-radius:16px;
    background:var(--secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 12px #0002;
    margin-right:12px;
}
.logo-bless img{
    width:calc(var(--logo-size) - 12px);
    height:calc(var(--logo-size) - 12px);
    object-fit:contain;
    border-radius:12px;
    background:var(--secondary);
}

.card{
    background:var(--card);
    border-radius:18px;
    padding:32px;              
    min-height:760px;        
    border:2px solid var(--border);
    box-shadow:var(--shadow);
    color:var(--text);
}

.question{font-size:17px;color:var(--accent);margin-bottom:10px}
.input,.select{width:100%;padding:18px;border-radius:12px;border:1px solid var(--border);background:#181c2a;color:var(--text);font-size:18px}
.input:focus,.select:focus{outline:3px solid rgba(238,189,61,0.18);}

.small{font-size:13px;color:#eebd3d}
.row{display:flex;gap:10px}
.btn{background:var(--secondary);border:none;padding:12px 14px;border-radius:10px;color:var(--primary);cursor:pointer;font-weight:700;font-size:15px;}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--accent);padding:10px 12px;}
.btn:active{background:var(--accent);color:#181c2a;}

.preview{white-space:pre-wrap;background:#181c2a;padding:18px;border-radius:10px;margin-top:14px;border:1px dashed var(--border);font-family:monospace;color:var(--text);min-height:280px;font-size:15px}

  .side{width:360px} 
.progress{height:14px;background:linear-gradient(90deg,var(--secondary) 0%, var(--card) 100%);border-radius:10px;overflow:hidden}

.controls{display:flex;gap:10px;margin-top:12px}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{background:var(--chip-bg);padding:8px 10px;border-radius:10px;font-size:14px;border:1px solid var(--border);color:var(--secondary);}
.chip:hover{background:var(--secondary);color:var(--primary);}

footer{margin-top:18px;color:#eebd3d;font-size:14px}

@media(max-width:1200px){
    .main-content{flex-direction:column;align-items:center;}
    .side{width:100%;max-width:420px;margin:0 auto;}
    .wrap{max-width:100%;}
}
@media(max-width:600px){
    .main-content{padding:0;}
    .side{width:100%;max-width:100%;}
    .wrap{max-width:100%;}
    .card{padding:12px;min-height:auto;}
    .logo-bless{width:70px;height:70px;}
    .logo-bless img{width:58px;height:58px;}
    .input,.select{padding:12px;font-size:15px}
    .preview{min-height:160px}
}

.row-flex { display: flex; gap: 8px; }
.input-editable { margin-top: 8px; }