.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row > *{flex:1 1 auto}
.pill{display:inline-flex; gap:6px; align-items:center; border:1px solid var(--border); padding:6px 10px; border-radius:999px; color:var(--muted); font-size:12px}
.spacer{height:6px}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    -webkit-appearance: none; /* 크롬, 사파리 */
    -moz-appearance: none;    /* 파이어폭스 */
    appearance: none;         /* 기본 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e7ecf3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 1em;
    cursor: pointer;
}

@media (prefers-color-scheme: light) {
    select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212938' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }
}
label{display:block; font-weight:600; margin-top:8px; margin-bottom:4px}
input[type="text"], input[type="number"], textarea, select, input[type="datetime-local"]{
width:100%; padding:10px 12px; background:transparent; color:var(--fg); border:1px solid var(--border);
border-radius:10px; outline:none;
}
textarea{min-height:120px; resize:vertical}
code{background:rgba(127,127,127,.08); padding:2px 6px; border-radius:6px}
footer{margin-top:20px; color:var(--muted); text-align:center; font-size:12px}