/* URL Shortener (.us-*) */ .us-card { padding: 16px 18px; margin-bottom: 14px; }
.hidden { display: none !important; } /* Form */
.us-form { margin-bottom: 14px; }
.us-input-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.us-protocol-select { width: 110px; flex-shrink: 0; }
.us-input-wrapper { flex: 1; min-width: 220px; position: relative; }
.us-input { padding-right: 36px !important; }
.us-clear-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: transparent; border: none; color: var(--yst-text-muted); font-size: 18px; cursor: pointer; border-radius: 50%;
}
.us-clear-btn:hover { color: #ef4444; background: var(--yst-bg-subtle); }
.us-submit-btn { height: 44px !important; padding: 0 22px !important; flex-shrink: 0; } /* Result */
.us-result { background: var(--yst-bg-subtle); border: 1px solid var(--yst-border); border-radius: 8px; padding: 18px; margin-top: 14px;
}
.us-result-head h3 { font: 700 16px var(--yst-font); color: #047857; margin: 0 0 14px;
} .us-url-display { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px;
}
.us-url-item { display: flex; flex-direction: column; gap: 4px; }
.us-url-label { font: 11px var(--yst-font); color: var(--yst-text-muted); text-transform: uppercase; letter-spacing: 1.2px;
}
.us-url-content { background: #fff; border: 1px solid var(--yst-border); border-radius: 6px; padding: 8px 12px; font: 13px/1.5 var(--yst-font-mono, monospace); color: var(--yst-text); word-break: break-all;
}
.us-url-row { display: flex; gap: 8px; align-items: stretch;
}
.us-url-row .us-url-content { flex: 1; }
.us-url-item.us-short .us-url-content { color: var(--yst-brand); font-weight: 600;
}
.us-copy-btn { flex-shrink: 0; padding: 0 16px !important; } /* QR */
.us-qr-section { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--yst-border); border-radius: 8px; padding: 16px 18px;
}
.us-qr-wrapper { text-align: center; }
.us-qrcode { background: #fff; padding: 8px; border: 1px solid var(--yst-border); border-radius: 6px; width: 140px; height: 140px; display: inline-block;
}
.us-qrcode img, .us-qrcode canvas { max-width: 100%; height: auto; }
.us-qr-tip { font: 11px var(--yst-font); color: var(--yst-text-muted); margin: 6px 0 0;
}
.us-actions { display: flex; flex-direction: column; gap: 8px;
} /* Toast */
.us-toast { position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-100px); background: var(--yst-text); color: #fff; padding: 10px 18px; border-radius: 6px; font: 13px var(--yst-font); z-index: 9999; transition: transform .25s; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); opacity: 0;
}
.us-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } @media (max-width: 768px) { .us-input-row { flex-direction: column; align-items: stretch; } .us-protocol-select, .us-submit-btn { width: 100%; } .us-input-wrapper { width: 100%; } .us-qr-section { grid-template-columns: 1fr; text-align: center; } .us-actions { flex-direction: row; justify-content: center; } .us-url-row { flex-direction: column; } .us-copy-btn { width: 100%; }
}