body { font: 15px system-ui, sans-serif; max-width: 1200px; margin: 28px auto; padding: 0 18px; color: #202124; }
input, button { font: inherit; padding: 8px; }
input[type="text"] { width: min(720px, 75%); }
button { cursor: pointer; margin: 3px; }
.small-input { width: 55px; }
.danger { background: #b3261e; color: white; border: 0; }
.muted { color: #666; }
.bar { height: 12px; background: #e8eaed; border-radius: 5px; min-width: 8px; }
.bar i { display: block; background: #1a73e8; height: 100%; border-radius: 5px; }
.row { display: grid; grid-template-columns: minmax(270px, 2fr) 110px minmax(80px, 2fr); gap: 12px; align-items: center; padding: 7px; border-bottom: 1px solid #eee; }
.path { word-break: break-all; }
.directory-row { cursor: pointer; }
.directory-row:hover { background: #f1f6ff; }
#status { white-space: pre-wrap; margin: 12px 0; }
.panel { padding: 14px; border: 1px solid #ddd; border-radius: 8px; margin-top: 18px; }
label { margin-right: 10px; }
@media (max-width: 650px) { .row { grid-template-columns: 1fr 75px; } .bar { display: none; } }