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

:root{
    --bg:#f5f7fb;
    --card:#ffffff;
    --border:#d9e1ec;
    --primary:#2563eb;
    --primary-hover:#1d4ed8;
    --text:#1f2937;
    --muted:#6b7280;
    --success:#16a34a;
}

@media (prefers-color-scheme:dark){

:root{
    --bg:#0f172a;
    --card:#1e293b;
    --border:#334155;
    --primary:#3b82f6;
    --primary-hover:#2563eb;
    --text:#f1f5f9;
    --muted:#94a3b8;
}

}

body{

    background:var(--bg);

    color:var(--text);

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

}

.container{

    width:min(1200px,95%);

    margin:40px auto;

}

header{

    margin-bottom:30px;

}

header h1{

    font-size:42px;

    margin-bottom:8px;

}

header p{

    color:var(--muted);

}

.toolbar{

    display:flex;

    gap:10px;

    margin-bottom:25px;

    flex-wrap:wrap;

}

.toolbar input{

    flex:1;

    min-width:250px;

    padding:14px;

    border-radius:10px;

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

    background:var(--card);

    color:var(--text);

    outline:none;

}

.toolbar button{

    border:none;

    border-radius:10px;

    background:var(--primary);

    color:white;

    padding:14px 20px;

    cursor:pointer;

    transition:.2s;

    font-weight:bold;

}

.toolbar button:hover{

    background:var(--primary-hover);

}

.cards{

    display:grid;

    grid-template-columns:

    repeat(auto-fill,minmax(240px,1fr));

    gap:14px;

    margin-bottom:30px;

}

.card{

    background:var(--card);

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

    border-radius:14px;

    padding:18px;

    cursor:pointer;

    transition:.2s;

    user-select:none;

}

.card:hover{

    transform:translateY(-3px);

}

.card.selected{

    border-color:var(--primary);

    background:rgba(37,99,235,.10);

}

.card h3{

    font-size:18px;

}

textarea{

    width:100%;

    min-height:320px;

    margin-top:15px;

    border-radius:12px;

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

    background:var(--card);

    color:var(--text);

    padding:15px;

    resize:vertical;

    font-family:Consolas,monospace;

}

#copy{

    margin-top:20px;

    width:100%;

    padding:18px;

    border:none;

    border-radius:12px;

    background:var(--success);

    color:white;

    font-size:17px;

    cursor:pointer;

    font-weight:bold;

}

#copy:hover{

    filter:brightness(.95);

}