* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #ff6b35 0%, #ffb84d 100%); min-height: 100vh; padding: 20px; }
.container { max-width: 600px; margin: 30px auto; }
h1 { color: #fff; font-size: clamp(24px, 6vw, 32px); margin-bottom: 20px; }
input { width: 100%; padding: clamp(10px, 3vw, 15px); font-size: clamp(14px, 4vw, 16px); margin-bottom: 15px; border: 2px solid #fff; border-radius: 4px; }
.result { background: rgba(255, 255, 255, 0.9); border-left: 4px solid #fff; padding: clamp(12px, 3vw, 20px); margin: 20px 0; word-break: break-all; font-family: monospace; font-size: clamp(12px, 3vw, 14px); border-radius: 4px; }
.result-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; cursor: pointer; }
.toggle-icon { font-size: clamp(14px, 4vw, 16px); transition: transform 0.2s; flex-shrink: 0; margin-top: 3px; }
.toggle-icon.open { transform: rotate(90deg); }
.header-content { flex: 1; }
.header-label { font-weight: bold; display: block; margin-bottom: 5px; }
.header-url { display: block; }
.hidden-content { display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid #ccc; }
.hidden-content.show { display: block; }
button { padding: clamp(10px, 2.5vw, 15px) clamp(15px, 4vw, 25px); background: #fff; color: #ff6b35; border: none; cursor: pointer; border-radius: 4px; font-weight: bold; margin-right: 10px; margin-bottom: 10px; font-size: clamp(13px, 3.5vw, 15px); }
button.secondary { background: rgba(255, 255, 255, 0.7); }
button:hover { background: #ffe8d6; }
a { text-decoration: none; }