*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg:#0f172a;

    --panel:#1e293b;

    --panel2:#243449;

    --border:#334155;

    --primary:#2563eb;

    --primaryHover:#1d4ed8;

    --success:#16a34a;

    --text:#f8fafc;

    --muted:#94a3b8;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:Segoe UI,Arial,sans-serif;

}

.container{

    width:min(1450px,95%);

    margin:30px auto;

}

header{

    margin-bottom:25px;

}

header h1{

    font-size:40px;

    margin-bottom:6px;

}

header p{

    color:var(--muted);

}

.toolbar{

    display:flex;

    gap:10px;

    margin-bottom:25px;

}

.toolbar input{

    flex:1;

    padding:15px;

    border-radius:12px;

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

    background:var(--panel);

    color:white;

    outline:none;

}

.toolbar button{

    padding:15px 22px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:var(--primary);

    color:white;

    font-weight:bold;

}

.toolbar button:hover{

    background:var(--primaryHover);

}

.layout{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:30px;

    align-items:start;

}

.cards{

    display:grid;

    gap:12px;

}

.card{

    background:var(--panel);

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

    border-radius:14px;

    padding:18px;

    cursor:pointer;

    transition:.2s;

    font-weight:600;

}

.card:hover{

    transform:translateY(-2px);

}

.card.selected{

    border-color:var(--primary);

    background:#1d4ed8;

}

.card.category{

    background:var(--panel2);

}

.hidden{

    display:none;

}

aside h2{

    margin-bottom:15px;

    margin-top:20px;

}

aside h2:first-child{

    margin-top:0;

}

main{

    display:flex;

    flex-direction:column;

}

#preview{

    background:var(--panel);

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

    border-radius:16px;

    padding:24px;

    min-height:650px;

    line-height:1.8;

}

#preview p{

    margin-bottom:15px;

}

#preview ol{

    margin-left:22px;

}

#preview li{

    margin-bottom:10px;

}

#preview a{

    color:#60a5fa;

    text-decoration:none;

    font-weight:600;

}

#preview a:hover{

    text-decoration:underline;

}

.placeholder{

    color:var(--muted);

}

.actions{

    display:flex;

    gap:12px;

    margin-top:20px;

}

.actions button{

    flex:1;

    padding:18px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:white;

    font-size:16px;

    font-weight:bold;

}

#copyText{

    background:var(--success);

}

#copyHtml{

    background:var(--primary);

}

#copyText:hover,
#copyHtml:hover{

    filter:brightness(.95);

}

@media(max-width:1000px){

.layout{

    grid-template-columns:1fr;

}

#preview{

    min-height:400px;

}

}