.th-pl-stylish-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    margin:0 auto;
}
.th-pl-stylish{
    width: 100%;
    max-width: 960px;
    padding: 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border: 1px solid #e6eef9;
    box-shadow: 0 12px 30px rgba(16,24,40,0.06);
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    position: relative;
}

/* Spinner overlay */
.th-spinner-overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index: 30;
    border-radius: 10px;
}
.th-spinner-inner{
    width:48px;
    height:48px;
    border-radius:50%;
    border:6px solid rgba(11,88,209,0.15);
    border-top-color: #0b5ed7;
    animation: th-spin 1s linear infinite;
}
@keyframes th-spin{ to { transform: rotate(360deg); } }

button.th-disabled{ opacity:0.6; transform:none !important; cursor:not-allowed; }

/* layout and styles */
.th-row-desktop{
    display:flex;
    gap:14px;
    align-items:center;
}
.th-prefix-stylish{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:110px;
    padding:10px 12px;
    border-radius:8px;
    background: linear-gradient(90deg,#fff 0%, #f3f9ff 100%);
    border: 1px solid #e0eefc;
}
.th-prefix-emoji{ font-size:22px; }
.th-prefix-code{ font-weight:800; color:#0b57d0; }
.th-input-stylish input{
    width:100%;
    padding:14px 12px;
    border-radius:10px;
    border:1px solid #dbeafe;
    box-shadow: 0 6px 18px rgba(11,88,209,0.04);
    font-size:16px;
    outline:none;
}
.th-select-stylish select{
    padding:12px;
    border-radius:10px;
    border:1px solid #dbeafe;
    font-size:15px;
}
.th-button-stylish{
    padding:12px 18px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    font-weight:700;
    font-size:15px;
    color:#fff;
    background: linear-gradient(90deg,#ff6b6b 0%, #ff8e53 100%);
}
.th-button-stylish:hover{ transform: translateY(-2px); }

/* mobile responsive */
.th-row-mobile{ display:none; gap:10px; }
@media (max-width:720px){
    .th-row-desktop{ display:none; }
    .th-row-mobile{ display:flex; flex-direction:column; display:flex; }
    .th-prefix-mobile{ display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; border:1px solid #e6eef9; background:#fff; }
    .th-input-mobile input{ padding:12px; border-radius:8px; border:1px solid #e6eef9; }
    .th-button-mobile .th-button-stylish{ width:100%; padding:12px; }
}

.th-pl-result-stylish{ margin-top:14px; }
.th-result-card{
    display:block;
    padding:14px;
    border-radius:12px;
    background: linear-gradient(135deg,#f0f9ff 0%, #fef7f1 100%);
    border: 1px solid rgba(11,88,209,0.06);
}
.th-row{ display:flex; gap:10px; align-items:center; padding:6px 0; }
.th-key{ width:120px; font-weight:800; color:#1f2937; }
.th-val{ flex:1; color:#0f172a; font-weight:600; }
.th-pill{ padding:6px 10px; border-radius:999px; color:#fff; font-weight:700; display:inline-block; }
.th-pill.valid{ background: linear-gradient(90deg,#22c55e 0%, #16a34a 100%); }
.th-pill.invalid{ background: linear-gradient(90deg,#ef4444 0%, #dc2626 100%); }
.th-error{ color:#7f1d1d; background:#fff5f5; padding:10px; border-radius:8px; border:1px solid #fee2e2; }


/* Wider input on desktop: input fills remaining space */
.th-prefix-stylish{ flex: 0 0 120px; }
.th-input-stylish{ flex: 1 1 70%; min-width: 220px; }
.th-button-wrap-stylish{ flex: 0 0 auto; }