
:root{color-scheme:dark;--utha-bg:#080d19;--utha-line:rgba(148,163,184,.18);--utha-blue:#6ea8ff}
html{scroll-behavior:smooth;background:var(--utha-bg)}
body{background:radial-gradient(ellipse at 12% -8%,rgba(37,99,235,.18),transparent 34%),radial-gradient(ellipse at 90% 5%,rgba(13,148,136,.10),transparent 30%),var(--utha-bg)!important;color:#e5edf9!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
header{background:rgba(8,13,25,.88)!important;border-bottom:1px solid var(--utha-line)!important;backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(0,0,0,.12)}
header a{transition:color .18s ease,background .18s ease}header a:hover{color:#fff!important}
footer{background:linear-gradient(145deg,#0d1729,#080d19)!important;border-top:1px solid var(--utha-line)!important}
main{min-height:60vh}section{scroll-margin-top:100px}
h1,h2,h3,h4{letter-spacing:-.035em;line-height:1.18}h1{font-weight:850!important}
button,.button,[role=button]{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
button:hover,.button:hover{transform:translateY(-1px)}
input,textarea,select{background:#0b1425!important;border:1px solid rgba(148,163,184,.28)!important;color:#e5edf9!important;border-radius:12px!important}
input:focus,textarea:focus,select:focus{outline:2px solid rgba(96,165,250,.55)!important;outline-offset:1px}
.bg-cardnavy,.bg-darknavy{background:linear-gradient(145deg,rgba(17,29,49,.96),rgba(12,21,37,.98))!important;border-color:var(--utha-line)!important;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.border-bordercolor{border-color:var(--utha-line)!important}.rounded-xl,.rounded-2xl{border-radius:18px!important}
.shadow-lg,.shadow-2xl{box-shadow:0 14px 34px rgba(0,0,0,.22)!important}
.text-blue-500,.text-blue-400{color:var(--utha-blue)!important}
.bg-blue-600{background:linear-gradient(110deg,#2563eb,#477cf5)!important}
#drop-zone{border:1.5px dashed rgba(110,168,255,.48)!important;background:rgba(37,99,235,.055)!important;transition:border-color .2s,background .2s,transform .2s}
#drop-zone:hover{border-color:var(--utha-blue)!important;background:rgba(37,99,235,.12)!important;transform:translateY(-2px)}
.animate-fade-in{animation:uthaFade .35s ease both}@keyframes uthaFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){header .container,header .max-w-7xl{padding-left:16px!important;padding-right:16px!important}main{padding-left:0!important;padding-right:0!important}footer{padding-top:28px!important}h1{letter-spacing:-.045em}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{body{background:#fff!important;color:#111!important}header,footer,button{display:none!important}.bg-cardnavy,.bg-darknavy{background:#fff!important;color:#111!important;box-shadow:none!important;border:1px solid #ddd!important}}


/* Header layout correction and touch-friendly responsive language controls */
header{z-index:100!important}
header>div:first-child{gap:12px;min-width:0}
header nav{min-width:0;flex-wrap:wrap}
header #lang-select,header #utha-mobile-lang{min-width:64px;max-width:110px;padding:9px 10px!important;background:#111b2d!important;border:1px solid rgba(110,168,255,.5)!important;border-radius:12px!important;color:#e6eefc!important;font-size:12px!important;font-weight:700!important}
#utha-mobile-language-wrap{display:none}
@media(max-width:1023px){
 header>div:first-child{height:auto!important;min-height:72px;padding-top:10px!important;padding-bottom:10px!important;flex-wrap:wrap}
 header nav{display:none!important}
 header #lang-select{display:none!important}
 #utha-mobile-language-wrap{display:flex!important;align-items:center;gap:8px;padding:12px 0 6px}
 #mobile-menu{max-height:75vh;overflow-y:auto}
}
@media(min-width:1024px) and (max-width:1350px){
 header nav{gap:0!important}
 header nav a{padding-left:8px!important;padding-right:8px!important;font-size:12px!important}
}
@media(max-width:480px){
 #utha-mobile-lang{width:100%;max-width:none!important}
 #utha-mobile-language-wrap{align-items:stretch;flex-direction:column}
}


/* Definitive header layout: brand left, language/upload/hamburger right on every viewport */
header{position:sticky!important;top:0!important;z-index:100!important}
header .utha-header-bar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:76px!important;height:auto!important;padding-top:10px!important;padding-bottom:10px!important}
header .utha-brand{flex:0 1 auto!important;min-width:0!important}
header .utha-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;flex:0 0 auto!important}
header .utha-actions #lang-select{display:block!important;min-width:92px!important;max-width:132px!important;padding:10px 12px!important;background:#111b2d!important;border:1px solid rgba(110,168,255,.5)!important;border-radius:12px!important;color:#e8efff!important;font-size:12px!important;font-weight:700!important}
header .utha-actions .utha-upload{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:10px 16px!important;border-radius:14px!important;white-space:nowrap!important;font-weight:700!important}
header .utha-actions #mobile-menu-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:10px!important;border-radius:12px!important;background:#111b2d!important;border:1px solid rgba(148,163,184,.25)!important;color:#e8efff!important}
header nav{display:none!important}
header #mobile-menu{position:absolute!important;top:100%!important;left:0!important;right:0!important;z-index:110!important;max-height:calc(100vh - 76px)!important;overflow-y:auto!important;padding:12px max(16px,calc((100% - 1180px)/2)) 20px!important;background:rgba(10,17,31,.98)!important;border-bottom:1px solid rgba(148,163,184,.22)!important;box-shadow:0 18px 40px rgba(0,0,0,.38)!important;backdrop-filter:blur(20px)!important}
header #mobile-menu a{display:block!important;padding:12px 14px!important;border-radius:10px!important;color:#dce7f8!important;font-weight:600!important}
header #mobile-menu a:hover{background:rgba(71,124,245,.15)!important;color:#fff!important}
@media(max-width:640px){header .utha-header-bar{min-height:68px!important;padding-left:12px!important;padding-right:12px!important;gap:6px!important}header .utha-actions{gap:6px!important}header .utha-actions #lang-select{min-width:65px!important;max-width:76px!important;padding:9px 5px!important;font-size:10px!important}header .utha-actions .utha-upload{min-height:38px!important;padding:8px 9px!important;font-size:11px!important}header .utha-brand{gap:7px!important}header .utha-brand span:first-child{font-size:14px!important}}

/* Final viewport-specific header matching the supplied desktop, tablet and mobile references */
header{position:sticky!important;top:0!important;z-index:100!important}
header .utha-header-bar{position:relative;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;height:auto!important;min-height:76px!important;padding:10px max(18px,calc((100% - 1240px)/2))!important;flex-wrap:nowrap!important}
header .utha-brand{display:flex!important;align-items:center!important;gap:12px!important;flex:0 0 auto!important;min-width:0!important}
header .utha-actions{display:flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important;margin-left:auto!important}
header .utha-actions #lang-select{display:block!important;width:132px!important;max-width:132px!important;min-width:104px!important;height:42px!important;padding:0 12px!important;background:#111b2d!important;border:1px solid rgba(110,168,255,.5)!important;border-radius:12px!important;color:#e8efff!important;font-size:12px!important;font-weight:700!important}
header .utha-actions .utha-upload{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:10px 17px!important;border-radius:14px!important;white-space:nowrap!important;font-weight:700!important}
header .utha-actions #mobile-menu-btn{display:none!important}
header nav{display:none!important}
header #mobile-menu{position:absolute!important;top:100%!important;left:0!important;right:0!important;z-index:110!important;max-height:calc(100vh - 76px)!important;overflow-y:auto!important;padding:12px max(16px,calc((100% - 1180px)/2)) 20px!important;background:rgba(10,17,31,.98)!important;border-bottom:1px solid rgba(148,163,184,.22)!important;box-shadow:0 18px 40px rgba(0,0,0,.38)!important;backdrop-filter:blur(20px)!important}
header #mobile-menu a{display:block!important;padding:12px 14px!important;border-radius:10px!important;color:#dce7f8!important;font-weight:600!important}
@media(min-width:768px) and (max-width:1100px){
 header .utha-header-bar{min-height:80px!important;padding-left:22px!important;padding-right:22px!important;gap:12px!important}
 header .utha-actions{gap:9px!important}
 header .utha-actions #mobile-menu-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;margin-right:auto!important;border-radius:15px!important;background:#172235!important;border:1px solid rgba(148,163,184,.12)!important;color:#e8efff!important}
 header .utha-actions{flex:1 1 auto!important}
 header .utha-actions #lang-select{margin-left:auto!important}
}
@media(max-width:767px){
 header .utha-header-bar{min-height:92px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;column-gap:8px!important;row-gap:6px!important;padding:10px 12px!important}
 header .utha-brand{grid-column:1!important;grid-row:1!important;gap:8px!important}
 header .utha-brand span:first-child{font-size:14px!important}
 header .utha-actions{display:contents!important}
 header .utha-actions #mobile-menu-btn{display:inline-flex!important;grid-column:2!important;grid-row:1!important;align-self:center!important;justify-self:end!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;border-radius:15px!important;background:#172235!important;border:1px solid rgba(148,163,184,.12)!important;color:#e8efff!important}
 header .utha-actions #lang-select{grid-column:1!important;grid-row:2!important;width:76px!important;min-width:76px!important;height:34px!important;padding:0 6px!important;font-size:10px!important}
 header .utha-actions .utha-upload{grid-column:1!important;grid-row:2!important;justify-self:start!important;margin-left:82px!important;min-height:34px!important;padding:7px 11px!important;font-size:11px!important}
}

/* Screenshot-matched compact header: one horizontal toolbar at every viewport */
header .utha-header-bar{
 display:flex!important; flex-direction:row!important; align-items:center!important;
 justify-content:space-between!important; flex-wrap:nowrap!important;
 min-height:66px!important; height:auto!important; padding:8px 8px!important; gap:8px!important;
}
header .utha-brand{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;flex:0 1 auto!important;min-width:0!important}
header .utha-brand > div:first-child{width:32px!important;height:32px!important;min-width:32px!important;border-radius:8px!important}
header .utha-brand svg{width:18px!important;height:18px!important}
header .utha-brand span:first-child{font-size:14px!important;line-height:1.2!important;white-space:nowrap!important}
header .utha-brand span:nth-child(2){font-size:10px!important;line-height:1.2!important;white-space:nowrap!important}
header .utha-actions{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;flex:0 0 auto!important;margin-left:auto!important}
header .utha-actions #lang-select{display:block!important;width:auto!important;min-width:42px!important;max-width:76px!important;height:30px!important;padding:0 4px!important;background:transparent!important;border:0!important;border-radius:4px!important;color:#e8efff!important;font-size:10px!important;font-weight:500!important}
header .utha-actions .utha-upload{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:30px!important;height:30px!important;padding:0 11px!important;border-radius:11px!important;white-space:nowrap!important;font-size:11px!important;font-weight:700!important}
header .utha-actions #mobile-menu-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:32px!important;height:32px!important;padding:0!important;border-radius:9px!important;background:#172235!important;border:1px solid rgba(148,163,184,.10)!important;color:#e8efff!important;flex:0 0 32px!important}
header .utha-actions #mobile-menu-btn svg{width:18px!important;height:18px!important}
header nav{display:none!important}
@media(min-width:768px){
 header .utha-header-bar{min-height:66px!important;padding:8px 8px!important}
 header .utha-brand > div:first-child{width:32px!important;height:32px!important;min-width:32px!important}
}
@media(max-width:767px){
 header .utha-header-bar{display:flex!important;flex-direction:row!important;min-height:66px!important;padding:8px 8px!important;gap:6px!important}
 header .utha-brand{gap:7px!important}
 header .utha-brand span:first-child{font-size:13px!important}
 header .utha-brand span:nth-child(2){font-size:9px!important}
 header .utha-actions{display:flex!important;gap:5px!important}
 header .utha-actions #lang-select{min-width:39px!important;max-width:55px!important;font-size:9px!important;padding:0 2px!important}
 header .utha-actions .utha-upload{padding:0 8px!important;font-size:10px!important;min-height:29px!important;height:29px!important}
 header .utha-actions #mobile-menu-btn{width:30px!important;height:30px!important;flex-basis:30px!important}
}

/* Fix native language dropdown contrast and ensure the hamburger menu can open/close */
header .utha-actions #lang-select, header #lang-select{color-scheme:dark!important;background-color:#111b2d!important;color:#eef4ff!important}
header #lang-select option{background:#101a2b!important;color:#eef4ff!important}
header #mobile-menu.hidden{display:none!important}
header #mobile-menu:not(.hidden){display:block!important}
header #mobile-menu{pointer-events:auto!important}
header #mobile-menu-btn{position:relative!important;z-index:130!important;cursor:pointer!important;pointer-events:auto!important;touch-action:manipulation!important}
header .utha-header-bar{overflow:visible!important}
@media(max-width:767px){
 header .utha-header-bar{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;min-height:62px!important;padding:7px 8px!important;gap:5px!important}
 header .utha-brand{min-width:0!important;max-width:42%!important;gap:6px!important}
 header .utha-brand > div:first-child{width:30px!important;height:30px!important;min-width:30px!important}
 header .utha-brand span:first-child{font-size:12px!important;letter-spacing:-.02em!important}
 header .utha-brand span:nth-child(2){font-size:8px!important}
 header .utha-actions{gap:4px!important;min-width:0!important}
 header .utha-actions #lang-select{min-width:48px!important;max-width:61px!important;width:61px!important;height:30px!important;font-size:9px!important}
 header .utha-actions .utha-upload{font-size:9px!important;padding:0 7px!important;min-height:30px!important;height:30px!important}
 header .utha-actions #mobile-menu-btn{width:30px!important;height:30px!important;flex-basis:30px!important}
}

/* 375px-class phones: keep branding and all controls in one balanced row */
@media (max-width: 400px) {
  header .utha-header-bar {
    box-sizing: border-box!important;
    width: 100%!important;
    min-height: 58px!important;
    padding: 6px 7px!important;
    gap: 5px!important;
    flex-wrap: nowrap!important;
  }
  header .utha-brand {
    flex: 1 1 0!important;
    width: 0!important;
    max-width: none!important;
    min-width: 0!important;
    gap: 5px!important;
    overflow: hidden!important;
  }
  header .utha-brand > div:first-child {
    flex: 0 0 28px!important;
    width: 28px!important;
    height: 28px!important;
    min-width: 28px!important;
  }
  header .utha-brand > div:last-child {
    min-width: 0!important;
    overflow: hidden!important;
  }
  header .utha-brand span:first-child {
    display: block!important;
    max-width: 100%!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    white-space: nowrap!important;
    font-size: 11px!important;
  }
  header .utha-brand span:nth-child(2) {
    display: block!important;
    overflow: hidden!important;
    text-overflow: clip!important;
    white-space: nowrap!important;
    font-size: 7px!important;
  }
  header .utha-actions {
    flex: 0 0 auto!important;
    margin-left: 0!important;
    gap: 4px!important;
  }
  header .utha-actions #lang-select {
    flex: 0 0 48px!important;
    width: 48px!important;
    min-width: 48px!important;
    max-width: 48px!important;
    height: 29px!important;
    padding: 0 2px!important;
    font-size: 8px!important;
  }
  header .utha-actions .utha-upload {
    flex: 0 0 auto!important;
    min-height: 29px!important;
    height: 29px!important;
    padding: 0 6px!important;
    font-size: 9px!important;
    letter-spacing: -.02em!important;
  }
  header .utha-actions #mobile-menu-btn {
    flex: 0 0 28px!important;
    width: 28px!important;
    height: 29px!important;
  }
}

/* CLS mitigation: stabilize text and CTA geometry during initial paint */
html { font-synthesis: none; }
body { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.uth-tools-cta {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 820px;
  min-height: 320px;
  contain: layout;
}
.uth-tools-cta h3 { line-height: 1.2; }
.uth-tools-cta p { line-height: 1.65; }
.uth-cta-buttons { min-height: 52px; align-items: stretch; }
.uth-cta-btn { box-sizing: border-box; }
@media (max-width: 600px) {
  .uth-tools-cta { min-height: 390px; }
  .uth-cta-buttons { min-height: 0; }
}

/* CLS follow-up: ensure CTA geometry rules win over its embedded style block */
html { font-synthesis:none; }
body, button, input, select, textarea {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
.uth-tools-cta {
  box-sizing:border-box!important;
  width:calc(100% - 32px)!important;
  max-width:820px!important;
  min-height:0!important;
  margin:40px auto!important;
  contain:layout!important;
}
.uth-tools-cta h3 { line-height:1.2!important; }
.uth-tools-cta p { line-height:1.6!important; }
.uth-cta-buttons { min-height:52px!important; }
.uth-cta-btn { box-sizing:border-box!important; }
@media(max-width:600px) {
  .uth-tools-cta { width:calc(100% - 24px)!important; margin:28px auto!important; padding:30px 16px!important; }
  .uth-cta-buttons { min-height:0!important; }
}


/* Mobile content gutters: keep text and cards away from the viewport edges. */
@media (max-width: 640px) {
  main { padding-left: 16px !important; padding-right: 16px !important; }
}

/* CLS follow-up: disable button movement/animation.
   Keep color, background, and other visual hover feedback intact. */
button,
button:hover,
button:focus,
button:active,
.button,
.button:hover,
.button:focus,
.button:active,
[role="button"],
[role="button"]:hover,
[role="button"]:focus,
[role="button"]:active,
a.uth-cta-btn,
a.uth-cta-btn:hover,
a.uth-cta-btn:focus,
a.uth-cta-btn:active,
a[class*="transition-all"],
a[class*="transition-transform"],
a[class*="hover:scale-105"] {
  animation: none !important;
  transition-property: none !important;
  transform: none !important;
}
