body {
    background: #0a0a0f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url("https://www.transparenttextures.com/patterns/dark-mosaic.png");
    overflow-x: hidden;
}

.container {
    background: #1a1a1f;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    width: 100%;
    padding: 20px;
}

h2, h4 {
    text-align: center;
    /* margin-bottom: 20px; */
    font-weight: 600;
}
h4 {
	margin: -12px 0px 10px 0px;
}

.form-control, .form-select {
    background-color: #2b2b33;
    border: none;
    color: #fff;
}

.form-control:focus, .form-select:focus {
    box-shadow: 1px -2px 37px 0px rgba(154,22,237,1);
    background-color: #2b2b33;
    color: #fff;
}

.form-control::placeholder {
    color: #aaa;
    opacity: 1;
}

.form-select {
    appearance: none;
    background: #2b2b33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23aaa' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 1rem center/16px 16px;
}

.btn-option {
    background: #2b2b33;
    color: #fff;
    width: 100%;
    text-align: left;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    transition: background 0.3s;
}

.btn-option:hover {
    background: #0d6efd;
}

.search-section {
	background-color: #141414;
	border-radius: 10px;
	padding: 5px;
}

.form-control:disabled {
    background-color: #1a1a1f;
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-outline-warning:disabled,
.btn-option:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-text {
    color: #aaa;
    font-size: 0.85rem;
}

#dork-list {
    transition: opacity 0.3s ease-in;
    opacity: 1;
}

#dork-list.d-none {
    opacity: 0;
}

input[type="checkbox"] {
    cursor: pointer;
}
.btn-clear {
	position: absolute;
	top: 68%;
	right: 14px;
	transform: translateY(-50%);
	border: none;
	background: transparent;
	color: #aaa;
	font-size: 2.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.btn-clear:hover {
    color: #ff4444;
}
.btn-option {
    background: #2b2b33;
    color: #fff;
    width: 100%;
    text-align: left;
    padding: 0 12px; /* Remove top/bottom padding, keep left/right */
    margin-bottom: 10px;
    border-radius: 10px;
    transition: background 0.3s;
}
.btn-option:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}
.dork-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #2b2b33;
  color: #fff;
  width: 100%;
  padding: 0px 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  transition: background 0.3s;
  cursor: pointer; /* make whole row clickable */
}

.dork-item:hover {
  background: #0d6efd;
}

.dork-item a {
  color: inherit;
  text-decoration: none;
  flex-grow: 1;
}

.dork-item a:hover {
  text-decoration: none;
}

.dork-item input[type="checkbox"] {
  cursor: pointer;
}