:root {
     --bg-main: #F5F7FB;
     --bg-card: #FFFFFF;
     --primary: #3B82F6;
     --primary-hover: #2563EB;

     --text-main: #111827;
     --text-body: #374151;
     --text-muted: #6B7280;

     --border-light: #E5E7EB;
 }

 .tool-box {
     max-width: 1000px;
     margin: auto;
     background: var(--bg-card);
     padding: 24px;
     border-radius: 16px;
     border: 1px solid var(--border-light);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
 }

 textarea {
     width: 100%;
     min-height: 150px;
     max-height: 300px;
     margin-bottom: 10px;
     border-radius: 12px;
     border: 1px solid var(--border-light);
     padding: 12px;
 }

 .row {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 15px;
 }

 input {
     flex: 1;
     min-width: 150px;
     padding: 10px;
     border-radius: 10px;
     border: 1px solid var(--border-light);
 }

 button {
     background: var(--primary);
     border: none;
     padding: 10px 16px;
     border-radius: 10px;
     cursor: pointer;
     color: #fff;
     margin-right: 8px;
 }

 button:hover {
     background: var(--primary-hover);
 }

 .info {
     font-size: 13px;
     color: var(--text-muted);
 }

 .copy-wrap {
     position: relative;
     display: inline-block;
 }

 #copyMsg3 {
     position: absolute;
     top: 50%;
     left: 110%;
     transform: translateY(-50%);
     background: #DCFCE7;
     color: #16A34A;
     padding: 6px 10px;
     border-radius: 8px;
     font-size: 12px;
     opacity: 0;
     transition: 0.3s;
 }

 .checkbox {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 14px;
     color: var(--text-body);
 }