.utm-layout .workspace-panel { min-width: 0; }

.utm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field-group { min-width: 0; display: grid; gap: 8px; }
.field-group-full { grid-column: 1 / -1; }
.field-help, .field-error { color: var(--muted); font-size: 13px; line-height: 1.45; }
.field-error { min-height: 18px; color: var(--danger); font-weight: 700; }
.field-group.is-invalid .text-input { border-color: rgba(255, 107, 87, 0.7); box-shadow: 0 0 0 3px rgba(255, 107, 87, 0.12); }
.optional-label { color: var(--muted); font-weight: 400; }

.utm-output { min-height: 130px; resize: vertical; overflow-wrap: anywhere; }
.preset-grid, .related-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
.preset-button, .related-tool-link { min-height: 44px; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.045); color: #eef2f6; font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; }
.preset-button:hover, .related-tool-link:hover, .preset-button:focus-visible, .related-tool-link:focus-visible { border-color: rgba(245, 163, 0, 0.58); background: rgba(245, 163, 0, 0.12); transform: translateY(-1px); }

.utm-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 28px 0; }
.utm-guide-panel, .utm-faq-section, .utm-related-section { padding: 24px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; background: rgba(255, 255, 255, 0.035); }
.utm-guide-panel h2, .utm-faq-section h2, .utm-related-section h2 { margin: 7px 0 13px; font-size: 23px; }
.utm-guide-panel p, .utm-faq-section p { color: #c5ced8; line-height: 1.7; }
.utm-guide-panel p:last-child { margin-bottom: 0; }
.utm-guide-panel code { color: var(--accent-2); overflow-wrap: anywhere; }
.utm-faq-section { margin: 28px 0; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(0, 0, 0, 0.16); }
.faq-list summary { padding: 15px 17px; color: #f2f5f8; font-weight: 700; cursor: pointer; }
.faq-list p { margin: 0; padding: 0 17px 16px; }

.more-tools-section { position: relative; z-index: 1; max-width: 1120px; margin: 38px auto 0; text-align: center; }
.more-tools-title-image { display: block; width: min(340px, 76vw); margin: 0 auto 22px; filter: drop-shadow(0 0 16px rgba(245, 163, 0, 0.08)) drop-shadow(0 0 32px rgba(245, 163, 0, 0.04)); }
.more-tools-carousel { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 14px; }
.more-tools-viewport { min-width: 0; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.more-tools-viewport::-webkit-scrollbar { display: none; }
.more-tools-viewport:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 5px; border-radius: 24px; }
.more-tools-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); gap: 22px; }
.more-tool-card { display: grid; align-content: space-between; gap: 20px; min-height: 190px; padding: 22px 20px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)), linear-gradient(135deg, rgba(255, 163, 0, 0.04), rgba(255, 255, 255, 0.02)); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.03); text-align: left; scroll-snap-align: start; }
.more-tool-card h2 { margin: 0; color: #ffffff; font-size: clamp(20px, 2vw, 25px); line-height: 1.08; }
.more-tool-link { width: fit-content; min-height: 46px; padding: 12px 18px; }
.carousel-arrow { display: grid; place-items: center; width: 52px; height: 52px; padding: 0 0 4px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 17px; color: #101216; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 12px 30px rgba(245, 163, 0, 0.18); font: inherit; font-size: 42px; line-height: 1; cursor: pointer; }
.carousel-arrow:hover:not(:disabled), .carousel-arrow:focus-visible:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(245, 163, 0, 0.28); }
.carousel-arrow:disabled { opacity: 0.28; cursor: default; box-shadow: none; }

@media (max-width: 960px) { .more-tools-carousel { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; } .more-tools-track { grid-auto-columns: 100%; gap: 14px; } .carousel-arrow { width: 42px; height: 48px; border-radius: 14px; font-size: 36px; } }
@media (max-width: 720px) { .utm-fields, .utm-guide-grid, .preset-grid { grid-template-columns: 1fr; } .field-group-full { grid-column: auto; } .utm-guide-panel, .utm-faq-section { padding: 20px 18px; } }