* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #111; color: #eee; padding: 16px; font-size: 14px; }
h1 { font-size: 1.2rem; margin-bottom: 12px; }
.layout { display: flex; flex-wrap: wrap; gap: 2%; }
.controls-panel { display: flex; flex-direction: column; gap: 8px; width: 28%; min-width: 280px; }
#layer-options-container { display: flex; flex-direction: column; gap: 8px; }
label { display: flex; justify-content: space-between; align-items: center; }
select, .btn { padding: 4px 8px; background: #222; color: #eee; border: 1px solid #444; border-radius: 4px; font-size: 13px; }
select { min-width: 150px; }
.btn { cursor: pointer; background: #238636; border: none; font-weight: 600; }
.btn:hover { background: #2ea043; }
.btn.active { background: #da3633; }
.btn-secondary { background: #333; font-weight: normal; }
.url-preview-box { padding: 6px 8px; background: #1a1a1a; border: 1px solid #333; border-radius: 4px; font-family: monospace; font-size: 12px; word-break: break-all; color: #58a6ff; }
.benchmark-panel { width: 70%; flex: 1; min-width: 360px; overflow-x: auto; }
.benchmark-header { display: flex; gap: 8px; margin-bottom: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border: 1px solid #333; padding: 6px 8px; text-align: left; }
th { background: #222; color: #aaa; }
tr:nth-child(even) { background: #181818; }
td.res-url {
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 280px;
    font-family: monospace;
    font-size: 12px;
}