.web-tool { background: #152430; border: 1px solid #59656b; border-radius: 18px; padding: clamp(16px,4vw,32px); }
.web-tool h2 { margin-top: 0; } .web-privacy { color: #bce4c6; }
.web-drop { border: 2px dashed #b8ad87; padding: 24px; border-radius: 12px; text-align: center; }
.web-tool input,.web-tool select,.web-tool button { font: inherit; color: #f4efdb; border: 1px solid #75818a; background: #101b24; border-radius: 8px; padding: 10px; max-width: 100%; }
.web-tool button,.web-download { cursor: pointer; min-height: 44px; } .web-tool button:disabled { opacity: .5; cursor: wait; }
.web-tool input[type=file] { width: 100%; margin-top: 14px; } .web-tool input[type=file]::file-selector-button { font: inherit; padding: 8px; margin-right: 10px; border: none; border-radius: 4px; }
.web-tool fieldset { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; } .web-tool label { display: block; }
.web-tool [hidden] { display: none !important; } .web-tool :focus-visible { outline: 3px solid #e5ca79; outline-offset: 3px; }
.web-sources { padding: 0; list-style: none; } .web-sources li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #45515b; } .web-sources span { overflow-wrap: anywhere; }
.web-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; } .web-options input,.web-options select { display: block; width: 100%; margin-top: 8px; box-sizing: border-box; }
.web-choice { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: center; padding: 10px 0; } .web-choice span { overflow-wrap: anywhere; }
.web-player { background: #101b24; border-radius: 10px; padding: 14px; margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .web-player p { grid-column: 1/-1; margin: 0; overflow-wrap: anywhere; } .web-player select { display: block; width: 100%; margin-top: 8px; }
.web-tool progress { width: 100%; } .web-status { min-height: 28px; overflow-wrap: anywhere; } .web-tool .actions { flex-wrap: wrap; }
@media(max-width:600px) { .web-options,.web-choice,.web-player { grid-template-columns: 1fr !important; } .web-player p { grid-column: 1; } .web-tool .actions button { flex: 1; } .web-drop { padding: 16px; } }