*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --bg: #161616;
     --bg2: #121212;
     --bg3: #181a1e;
     --border: #272930;
     --border2: #2e3240;
     --text: #e8eaf0;
     --muted: #7e8493;
     --muted2: #4a5060;
     --accent: #74b42c;
     --accent2: #4a7319;
     --warn: #f0a04a;
     --danger: #f05a4a;
     --mono: 'DM Mono', monospace;
     --sans: 'Open Sans', sans-serif;
     --radius: 6px;
     --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
 }


h1 span {
    color:var(--accent);
}

 /* ---- Form card ---- */
 .form-card {
     background: var(--bg2);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 40px;
     position: relative;
     overflow: hidden;
     /* max-width: 650px; */
 }



.form-layer {
    display: flex;
    flex-direction: row;
    gap:50px;
}

 /* ---- Field groups ---- */
 .field {
     margin-bottom: 28px;
 }

 .field-search {
    margin-bottom:0px;
    min-width:50%;
 }

 .field:last-of-type {
     margin-bottom: 0;
 }

 label {
     display: block;
     font-family: var(--mono);
     font-size: 11px;
     letter-spacing: 0.1em;
     color: var(--muted);
     margin-bottom: 10px;
     text-transform: uppercase;
 }

 label .required {
     color: var(--accent);
     margin-left: 3px;
 }

 label .hint {
     font-size: 10px;
     color: var(--muted2);
     letter-spacing: 0.05em;
     margin-left: 8px;
     text-transform: none;
 }

 input[type="text"],
 input[type="url"],
 select {
     width: 100%;
     background: var(--bg3);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     color: var(--text);
     font-family: var(--mono);
     font-size: 14px;
     padding: 13px 16px;
     outline: none;
     transition: border-color var(--transition), box-shadow var(--transition);
     appearance: none;
     -webkit-appearance: none;
 }

 input[type="url"] {
     letter-spacing: 0.02em;
 }

 input:focus,
 select:focus {
     border-color: var(--accent);
     box-shadow: 0 0 0 3px rgba(74, 240, 162, 0.08);
 }

 input.error,
 select.error {
     border-color: var(--danger);
     box-shadow: 0 0 0 3px rgba(240, 90, 74, 0.08);
 }

 input.valid {
     border-color: var(--accent2);
 }

 input::placeholder {
     color: var(--muted2);
 }

 .select-wrap {
     position: relative;
 }

 .select-wrap::after {
     content: '▾';
     position: absolute;
     right: 14px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--muted);
     font-size: 12px;
     pointer-events: none;
 }

 select option {
     background: var(--bg2);
     color: var(--text);
 }

 /* ---- URL validation state ---- */
 .url-wrap {
     position: relative;
 }

 .url-indicator {
     position: absolute;
     right: 14px;
     top: 50%;
     transform: translateY(-50%);
     font-family: var(--mono);
     font-size: 11px;
     letter-spacing: 0.06em;
     opacity: 0;
     transition: opacity var(--transition);
     pointer-events: none;
 }

 .url-indicator.show {
     opacity: 1;
 }

 .url-indicator.ok {
     color: var(--accent);
 }

 .url-indicator.bad {
     color: var(--danger);
 }

 /* ---- Traffic tier pills ---- */
 .tier-group {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }

 .tier-pill input {
     display: none;
 }

 .tier-pill label {
     display: block;
     font-family: var(--mono);
     font-size: 11px;
     letter-spacing: 0.08em;
     color: var(--muted);
     border: 1px solid var(--border);
     border-radius: 20px;
     padding: 7px 16px;
     cursor: pointer;
     transition: all var(--transition);
     text-transform: uppercase;
     margin: 0;
     user-select: none;
 }

 .tier-pill input:checked+label {
     border-color: var(--accent);
     color: var(--accent);
     background: rgba(74, 240, 162, 0.06);
 }

 .tier-pill label:hover {
     border-color: var(--border2);
     color: var(--text);
 }

 /* ---- Divider ---- */
 .divider {
     border: none;
     border-top: 1px solid var(--border);
     margin: 32px 0;
 }

 /* ---- Metadata preview ---- */
 .meta-preview {
     background: var(--bg3);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 14px 16px;
     margin-top: 10px;
 }

 .meta-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 6px 16px;
 }

 .meta-row {
     display: flex;
     gap: 8px;
     align-items: baseline;
 }

 .meta-key {
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: 0.08em;
     color: var(--muted2);
     white-space: nowrap;
     flex-shrink: 0;
 }

 .meta-val {
     font-family: var(--mono);
     font-size: 11px;
     color: var(--muted);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .meta-note {
     font-family: var(--mono);
     font-size: 10px;
     color: var(--muted2);
     margin-top: 10px;
     line-height: 1.6;
 }

 /* ---- Error message ---- */
 .field-error {
     font-family: var(--mono);
     font-size: 11px;
     color: var(--danger);
     margin-top: 7px;
     letter-spacing: 0.04em;
     min-height: 16px;
     display: block;
 }

 /* ---- Submit button ---- */
 .submit-wrap {
     margin-top: 36px;
 }

 .submit-wrap-search {
    margin-top: 24px;
 }

 button[type="submit"] {
     width: 100%;
     background: var(--accent);
     color: #0b0c0e;
     border: none;
     border-radius: var(--radius);
     font-family: var(--sans);
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 0.06em;
     padding: 16px 24px;
     cursor: pointer;
     transition: all var(--transition);
     position: relative;
     overflow: hidden;
 }

 button[type="submit"]:hover {
     background: var(--accent2);
     transform: translateY(-1px);
 }

 button[type="submit"]:active {
     transform: translateY(0);
 }

 button[type="submit"]:disabled {
     opacity: 0.4;
     cursor: not-allowed;
     transform: none;
 }

 .btn-inner {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 }

 .btn-arrow {
     font-size: 16px;
     transition: transform var(--transition);
 }

 button[type="submit"]:hover .btn-arrow {
     transform: translateX(4px);
 }

 /* ---- Spinner state ---- */
 .spinner {
     width: 16px;
     height: 16px;
     border: 2px solid rgba(11, 12, 14, 0.3);
     border-top-color: #0b0c0e;
     border-radius: 50%;
     animation: spin 0.7s linear infinite;
     display: none;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* ---- Security badge row ---- */
 .security-row {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     margin-top: 20px;
     flex-wrap: wrap;
 }

 .sec-badge {
     display: flex;
     align-items: center;
     gap: 6px;
     font-family: var(--mono);
     font-size: 10px;
     letter-spacing: 0.08em;
     color: var(--muted2);
     text-transform: uppercase;
 }

 .sec-dot {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: var(--accent);
     opacity: 0.6;
 }

 /* ---- Success overlay ---- */
 #success-state {
     display: none;
     text-align: center;
     padding: 40px 20px;
     animation: fadeUp 0.4s ease forwards;
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(12px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .success-icon {
     width: 56px;
     height: 56px;
    background: #7ef04a1a;
    border: 1px solid var(--accent);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     font-size: 22px;
 }

 #success-state h2 {
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 8px;
 }

 #success-state p {
     color: var(--muted);
     font-size: 14px;
     margin-bottom: 24px;
 }

 .redirect-bar {
     height: 3px;
     background: var(--border);
     border-radius: 2px;
     overflow: hidden;
     margin: 0 auto;
     max-width: 200px;
 }

 .redirect-fill {
     height: 100%;
     width: 0%;
     background: var(--accent);
     border-radius: 2px;
     animation: fillBar 3.5s linear forwards;
     animation-delay: 0.3s;
 }

 @keyframes fillBar {
     to {
         width: 100%;
     }
 }

 .redirect-label {
     font-family: var(--mono);
     font-size: 11px;
     color: var(--muted2);
     margin-top: 8px;
     letter-spacing: 0.06em;
 }

 /* ---- Honeypot (hidden from real users) ---- */
 .hp-field {
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     height: 0;
     overflow: hidden;
     tab-index: -1;
 }


 /* ---- Responsive ---- */
 @media (max-width: 600px) {

     header{
         padding: 16px 20px;
     }

     main {
         padding: 40px 16px 60px;
     }

     .form-card {
         padding: 28px 20px;
     }

     .meta-grid {
         grid-template-columns: 1fr;
     }
    .form-layer {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
 }