body {
 margin: 0;
 font: 12px/1.45 system-ui, sans-serif;
 color: #e8e8e8;
 background: #292a2d;
}

header {
 padding: 12px 14px;
 border-bottom: 1px solid #444;
}

h2 {
 margin: 0 0 6px;
 font-size: 14px;
}

header p {
 margin: 0;
 color: #aaa;
 font-size: 11px;
}

.toggle {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 12px 14px;
 background: #35363a;
 border-bottom: 1px solid #444;
 cursor: pointer;
}

.toolbar {
 display: flex;
 gap: 8px;
 padding: 10px 14px;
}

button {
 padding: 6px 12px;
 border: none;
 border-radius: 4px;
 background: #1a73e8;
 color: #fff;
 cursor: pointer;
 font-size: 12px;
}

button.secondary {
 background: #444;
}

.search-row {
 padding: 8px 14px 0;
}

.search-row input {
 width: 100%;
 padding: 7px 10px;
 border: 1px solid #555;
 border-radius: 4px;
 background: #292a2d;
 color: #e8e8e8;
 font-size: 12px;
 outline: none;
}

.search-row input:focus {
 border-color: #1a73e8;
}

.search-row input::placeholder {
 color: #777;
}

.hint-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 padding: 6px 14px;
 border-bottom: 1px solid #3a3b3e;
}

.hint {
 color: #999;
 flex: 1;
}

.sort-control {
 display: flex;
 align-items: center;
 gap: 6px;
 color: #aaa;
 font-size: 11px;
 flex-shrink: 0;
}

.sort-control select {
 padding: 4px 6px;
 border: 1px solid #555;
 border-radius: 4px;
 background: #35363a;
 color: #e8e8e8;
 font-size: 11px;
 cursor: pointer;
}

#list {
 list-style: none;
 margin: 0;
 padding: 0 10px 10px;
}

.item {
 padding: 8px 10px;
 margin-bottom: 6px;
 background: #35363a;
 border-radius: 4px;
 border-left: 3px solid #4caf50;
}

.item.paused {
 border-left-color: #ffc107;
}

.item .url {
 word-break: break-all;
 margin: 4px 0;
 color: #ccc;
}

.item .meta {
 color: #888;
 font-size: 11px;
}

.item-actions {
 display: flex;
 gap: 6px;
 margin-top: 6px;
}

.item-actions button {
 font-size: 11px;
 padding: 4px 8px;
}

.item-actions button[data-action="copy"] {
 background: #444;
 flex-shrink: 0;
}

.item-actions button[data-action="pause"],
.item-actions button[data-action="resume"] {
 flex: 1;
}

.empty-hint {
 margin: 10px;
 padding: 14px;
 text-align: center;
 color: #888;
 list-style: none;
}

.network-hint {
 padding: 12px 14px;
 border-top: 1px solid #444;
 color: #aaa;
}

.network-hint h3 {
 margin: 0 0 8px;
 font-size: 12px;
 color: #ccc;
}

.network-hint ul {
 margin: 0;
 padding-left: 18px;
}

code {
 background: #444;
 padding: 1px 4px;
 border-radius: 3px;
}