:root {
    --dw-bg: #f8fafc;
    --dw-card: #ffffff;
    --dw-text: #0f172a;
    --dw-text-mut: #64748b;
    --dw-border: #e2e8f0;
    --dw-primary: #2563eb;
    --dw-primary-hover: #1d4ed8;
    --dw-radius: 24px;
    --dw-font: 'Inter', sans-serif;
    
    /* Code Box Colors */
    --code-bg: #0f172a;
    --code-base: #e2e8f0;
    --code-param: #38bdf8;
    --code-val: #a7f3d0;
    --code-symbol: #f472b6;
}

.dw-utm-wrapper { max-width: 1100px; margin: 60px auto; padding: 0 20px; font-family: var(--dw-font); }

.dw-utm-card {
    background: var(--dw-card); border-radius: var(--dw-radius); padding: 45px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06), 0 40px 90px rgba(0,0,0,0.08);
    border: 1px solid var(--dw-border); transition: transform 0.35s ease;
}
.dw-utm-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0,0,0,0.1); }

/* Header */
.dw-utm-header { text-align: center; margin-bottom: 40px; }
.dw-badge { display: inline-block; background: #eff6ff; color: var(--dw-primary); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.5px;}
.dw-utm-header h2 { font-size: 34px; font-weight: 800; color: var(--dw-text); margin: 0 0 10px 0; letter-spacing: -1px; }
.dw-utm-header p { color: var(--dw-text-mut); font-size: 16px; margin: 0; }

/* Layout - THIS FIXES THE SPACE ISSUE */
.dw-utm-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }

/* Form Panel */
.dw-utm-form-panel { display: flex; flex-direction: column; gap: 20px; }
.dw-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.dw-input-group { display: flex; flex-direction: column; }
.dw-label-flex { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; flex-wrap: wrap; gap: 5px;}
.dw-input-group > label, .dw-label-flex > label { font-size: 14px; font-weight: 700; color: var(--dw-text); margin-bottom: 8px; }
.dw-input-group.required label span { color: #ef4444; }

.dw-input-group input { 
    padding: 14px 16px; border-radius: 12px; border: 2px solid var(--dw-border); 
    font-size: 15px; font-family: var(--dw-font); transition: 0.2s; background: var(--dw-bg); color: var(--dw-text); outline: none;
}
.dw-input-group input:focus { border-color: var(--dw-primary); background: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,0.1); }

/* Quick Presets (Pills) */
.dw-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;}
.dw-presets span { 
    background: #e2e8f0; color: #475569; font-size: 11px; font-weight: 700; 
    padding: 4px 10px; border-radius: 20px; cursor: pointer; transition: 0.2s; text-transform: uppercase;
}
.dw-presets span:hover { background: var(--dw-primary); color: #fff; }

/* Right Panel (Live Preview) */
.dw-result-sticky { position: sticky; top: 100px; background: var(--dw-bg); padding: 25px; border-radius: 20px; border: 1px solid var(--dw-border); }
.dw-preview-header { font-size: 14px; font-weight: 700; color: var(--dw-text-mut); text-transform: uppercase; margin-bottom: 15px; letter-spacing: 0.5px;}

/* Syntax Highlighted Breakdown Box */
.dw-url-breakdown { 
    background: var(--code-bg); border-radius: 14px; padding: 20px; font-family: monospace; font-size: 14px; 
    line-height: 1.8; word-break: break-all; margin-bottom: 15px; min-height: 120px; box-shadow: inset 0 4px 6px rgba(0,0,0,0.3);
}
.bd-base { color: var(--code-base); font-weight: 600; }
.bd-q, .bd-amp { color: var(--code-symbol); font-weight: bold; margin: 0 2px;}
.bd-key { color: var(--code-param); }
.bd-val { color: var(--code-val); background: rgba(167, 243, 208, 0.1); padding: 2px 4px; border-radius: 4px;}

/* Warnings & Final Output */
.dw-warning-msg { display: block; font-size: 13px; color: #b91c1c; background: #fef2f2; padding: 10px 15px; border-radius: 8px; border: 1px solid #fca5a5; margin-bottom: 20px; font-weight: 600; }

.dw-final-action-box { display: flex; flex-direction: column; gap: 15px; }
.dw-final-action-box textarea { 
    width: 100%; height: 90px; padding: 15px; border-radius: 12px; border: 2px dashed var(--dw-primary); 
    background: #eff6ff; color: var(--dw-primary); font-family: monospace; font-size: 14px; resize: none; outline: none; box-sizing: border-box; font-weight: 600;
}

.dw-result-buttons { display: flex; gap: 10px; }
.dw-btn-primary { flex: 2; border-radius: 12px; font-weight: 700; font-size: 15px; cursor: pointer; transition: 0.2s; font-family: var(--dw-font); padding: 16px; border: none; }
.dw-btn-outline { flex: 1; border-radius: 12px; font-weight: 700; cursor: pointer; transition: 0.2s; font-family: var(--dw-font); padding: 16px; }

/* ========================================== */
/* 🚨 NUCLEAR BUTTON HOVER FIX (THEME KILLER) */
/* ========================================== */

body .dw-utm-wrapper button.dw-btn-outline {
    background-color: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    color: #0f172a !important; 
    -webkit-text-fill-color: #0f172a !important; 
}

body .dw-utm-wrapper button.dw-btn-outline:hover {
    background-color: #f1f5f9 !important; 
    border-color: #cbd5e1 !important;
    color: #0f172a !important; 
    -webkit-text-fill-color: #0f172a !important; 
    opacity: 1 !important;
}

body .dw-utm-wrapper button.dw-btn-primary {
    background-color: #2563eb !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body .dw-utm-wrapper button.dw-btn-primary:hover {
    background-color: #1d4ed8 !important;
    transform: translateY(-2px); 
    box-shadow: 0 8px 15px rgba(37,99,235,0.2);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ========================================== */
/* 📱 BULLETPROOF RESPONSIVE DESIGN           */
/* ========================================== */

/* Tablet (iPad etc. - Stack layout) */
@media(max-width: 950px) {
    .dw-utm-layout { grid-template-columns: 1fr; }
    .dw-result-sticky { position: static; }
}

/* Mobile Phones */
@media(max-width: 600px) {
    .dw-utm-card { padding: 30px 20px; }
    .dw-utm-header h2 { font-size: 24px; }
    .dw-grid-2 { grid-template-columns: 1fr; }
    .dw-label-flex { flex-direction: column; align-items: flex-start; }
    .dw-result-buttons { flex-direction: column; }
    .dw-btn-outline { padding: 14px; }
}