#ug-tool, #ug-tool * { box-sizing: border-box; }
#ug-tool { font-family: 'Poppins', Arial, sans-serif; background: #f3f0ff; padding: 20px; border-radius: 16px; color: #1a1a2e; }
#ug-tool .ug-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
#ug-tool .ug-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 2px 10px rgba(80,70,200,.06); margin-bottom: 18px; }
#ug-tool .ug-form .ug-h { font-size: 16px; margin: 22px 0 10px; font-weight: 600; }
#ug-tool .ug-h small { font-weight: 400; color: #6b7280; }
#ug-tool .ug-steps { display: flex; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #e5e7f5; font-size: 14px; font-weight: 600; color: #6b7280; flex-wrap: wrap; }
#ug-tool .ug-step.active { color: #5b54ff; }
#ug-tool input[type=text] { width: 100%; padding: 14px 16px; border: 1px solid #d9dcf0; border-radius: 10px; font-size: 15px; outline: none; background: #fff; }
#ug-tool input[type=text]:focus { border-color: #5b54ff; }
#ug-tool .ug-hint { font-size: 13px; color: #6b7280; margin: 6px 0; }

/* Chips grid */
#ug-tool .ug-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 10px; }
#ug-tool .ug-chip { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; padding: 11px 6px; border: 1px solid #d9dcf0; background: #fff; border-radius: 10px; cursor: pointer; font-size: 12.5px; color: #1a1a2e; transition: .15s; }
#ug-tool .ug-chip:hover { border-color: #5b54ff; }
#ug-tool .ug-chip.active { background: #5b54ff; color: #fff; border-color: #5b54ff; }

/* Advanced options */
#ug-tool .ug-adv { margin-top: 22px; border: 1px solid #e5e7f5; border-radius: 12px; background: #faf9ff; }
#ug-tool .ug-adv-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: none; border: none; cursor: pointer; font-size: 14px; }
#ug-tool .ug-adv-toggle em { font-style: normal; font-size: 11px; color: #16a34a; margin-left: 6px; }
#ug-tool .ug-adv-body { padding: 0 16px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
#ug-tool .ug-adv-body label { display: flex; flex-direction: column; gap: 4px; }
#ug-tool .ug-adv-body label:has(input[type=checkbox]) { flex-direction: row; align-items: center; gap: 8px; }
#ug-tool .ug-adv-body select { padding: 8px; border: 1px solid #d9dcf0; border-radius: 8px; }

/* Buttons */
#ug-tool .ug-btn-main { width: 100%; margin-top: 18px; padding: 16px; background: #5b54ff; color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; }
#ug-tool .ug-btn-main:hover { background: #4a43e6; }
#ug-tool .ug-btn-outline { padding: 8px 14px; border: 1px solid #5b54ff; color: #5b54ff; background: #fff; border-radius: 8px; cursor: pointer; font-size: 12px; white-space: nowrap; }
#ug-tool .ug-btn-outline:hover { background: #5b54ff; color: #fff; }
#ug-tool .ug-btn-white { width: 100%; margin-top: 10px; padding: 12px; background: #fff; border: 1px solid #d9dcf0; color: #5b54ff; font-weight: 600; border-radius: 10px; cursor: pointer; }
#ug-tool .ug-btn-white:hover { background: #5b54ff; color: #fff; }

/* Results side */
#ug-tool .ug-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
#ug-tool .ug-title { margin: 0; font-size: 18px; font-weight: 600; }
#ug-tool .ug-results { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
#ug-tool .ug-empty { border: 1.5px dashed #cfcbf5; border-radius: 12px; padding: 36px 20px; text-align: center; color: #6b7280; font-size: 13px; }
#ug-tool .ug-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #e5e7f5; border-radius: 10px; background: #fafaff; }
#ug-tool .ug-item span { font-weight: 600; font-size: 15px; word-break: break-all; }
#ug-tool .ug-item div { display: flex; gap: 6px; flex-shrink: 0; }
#ug-tool .ug-mini { border: 1px solid #d9dcf0; background: #fff; border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: 12px; }
#ug-tool .ug-mini:hover { background: #5b54ff; color: #fff; }
#ug-tool .ug-platform-badge { display: inline-block; background: #ede9ff; color: #5b54ff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; margin-left: 6px; }
#ug-tool .ug-green { background: #ecfdf5; }
#ug-tool .ug-purple { background: #f7f5ff; }
#ug-tool .ug-emoji { font-size: 24px; margin-bottom: 6px; }

/* Toast */
#ug-tool #ug-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #1a1a2e; color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 13px; opacity: 0; pointer-events: none; transition: .25s; z-index: 9999; }
#ug-tool #ug-toast.show { opacity: 1; }

/* Mobile */
@media (max-width: 800px) {
  #ug-tool .ug-wrap { grid-template-columns: 1fr; }
}