:root
{
  ::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}
}
html,body {
  background: #EFF3F4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.hero-body .container {
  max-width: 700px;
}
.hero-body .title {
  color: hsl(192,17%,99%) !important;
}
.hero-body .subtitle {
  color: hsl(192,17%,99%) !important;
  padding-top: 2rem;
  line-height: 1.5;
}
.features {
  padding: 5rem 0;
}
.box.cta {
  border-radius: 0;
  border-left: none;
  border-right: none;
}
.card-image > .fa {
  font-size: 8rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: #209cee;
}
.card-content .content {
  font-size: 14px;
  margin: 1rem 1rem;
}
.card-content .content h4 {
  font-size: 16px;
  font-weight: 700;
}
.card {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
  margin-bottom: 2rem;
}
.intro {
  padding: 5rem 0;
  text-align: center;
}
.sandbox {
  padding: 5rem 0;
}
.tile.notification {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.is-shady {
animation: flyintoright .4s backwards;
background: #fff;
box-shadow: rgba(0, 0, 0, .1) 0 1px 0;
border-radius: 4px;
display: inline-block;
margin: 10px;
position: relative;
transition: all .2s ease-in-out;
}
.is-shady:hover {
box-shadow: 0 10px 16px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .19);
}
/*adds font awesome stars*/
footer li:before {
  content: '\f1b2';
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.5em;
  color: #147efb;
}


/*水印工具*/

.mark-container {
  max-width: 700px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}


.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Custom file upload */
.custom-upload {
  display: flex;
  align-items: center;
  gap: 10px;
}

#customUploadBtn {
  padding: 10px 16px;
  background-color: #256df2;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
}

#fileName {
  font-size: 14px;
  color: #555;
  min-width: 140px;
}

/* Text input */
#watermarkText {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%;
}

/* Slider styling */
.slider-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-group input[type="range"] {
  -webkit-appearance: none;
  width: 200px;
  height: 6px;
  background: #ddd;
  border-radius: 3px;
  outline: none;
}

.slider-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
}

.slider-group input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
}

/* Horizontal layout for font size + color */
.horizontal-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.inline-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* For color input spacing */
.inline-group input[type="color"] {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}


/* Color picker */
input[type="color"] {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  background: none;
  box-shadow: 0 0 0 1px #ccc inset;
  transition: box-shadow 0.2s ease;
}

input[type="color"]:hover {
  box-shadow: 0 0 0 2px #3b82f6 inset;
}

/* Buttons */
.button-group {
  display: flex;
  gap: 10px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #2563eb;
}

/* Canvas */
canvas {
  width: 100%;
  max-width: 100%;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #fff;
}




/* Footer */
.footer {
  margin-top: 40px;
  padding: 20px;
  background: #f3f4f6;
  text-align: center;
  font-size: 14px;
  color: #666;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 16px 16px;
}

.footer a {
  color: #3b82f6;
  text-decoration: none;
  margin: 0 6px;
}

.footer a:hover {
  text-decoration: underline;
}