/* WebApp转APK在线服务 - 自定义样式 */

/* 强制使用Bulma的light主题 */
html {
  color-scheme: light;
}

/* 确保Bulma使用light主题变量 */
:root {
  --bulma-scheme-main: hsl(0, 0%, 100%);
  --bulma-scheme-main-bis: hsl(0, 0%, 98%);
  --bulma-scheme-main-ter: hsl(0, 0%, 96%);
  --bulma-background: hsl(0, 0%, 100%);
  --bulma-border: hsl(0, 0%, 86%);
  --bulma-border-weak: hsl(0, 0%, 93%);
  --bulma-text: hsl(0, 0%, 21%);
  --bulma-text-weak: hsl(0, 0%, 48%);
  --bulma-text-strong: hsl(0, 0%, 21%);
}

/* 主按钮样式优化 */
.button.is-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  border: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.button.is-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark), #1e5bb8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(50, 115, 220, 0.3);
}

/* 导航栏样式 */
.navbar.is-primary {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Hero区域样式 */
.hero.is-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.hero.is-large .hero-body {
  padding: 6rem 1.5rem;
}

/* 卡片样式 */
.box {
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8e8e8;
  transition: all 0.3s ease;
}

.box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* 进度指示器样式 */
.breadcrumb {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 表单样式优化 */
.input, .textarea, .select select {
  border-radius: 8px;
  border: 2px solid #e8e8e8;
  transition: border-color 0.3s ease;
}

.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(50, 115, 220, 0.1);
}

/* 文件上传样式 */
.file.has-name .file-cta {
  border-radius: 8px 0 0 8px;
}

.file.has-name .file-name {
  border-radius: 0 8px 8px 0;
}

/* 标签样式 */
.tag {
  border-radius: 6px;
  font-weight: 500;
}

/* 表格样式 */
.table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  background-color: #ffffff !important;
  color: #363636 !important;
}

.table th {
  background-color: #f8f9fa !important;
  font-weight: 600;
  border-bottom: 2px solid #e8e8e8;
  color: #363636 !important;
}

.table td {
  color: #4a4a4a !important;
}

.table .title, .table .subtitle {
  color: #363636 !important;
}

/* 图标样式 */
.icon.is-large {
  margin-bottom: 1rem;
}

/* 进度条样式 */
.progress {
  border-radius: 10px;
  height: 8px;
}

/* 通知样式 */
.notification {
  border-radius: 8px;
  border-left: 4px solid;
  background-color: #ffffff !important;
  color: #4a4a4a !important;
}

.notification.is-info {
  border-left-color: var(--primary-color);
  background-color: #e7f3ff !important;
}

.notification.is-success {
  border-left-color: var(--secondary-color);
  background-color: #f0fff4 !important;
}

.notification.is-light {
  background-color: #fafafa !important;
  color: #4a4a4a !important;
}

.notification .title, .notification .subtitle {
  color: #363636 !important;
}

.notification p {
  color: #4a4a4a !important;
}

/* 页脚样式 */
.footer {
  background-color: #f8f9fa !important;
  border-top: 1px solid #e8e8e8;
  color: #4a4a4a !important;
}

.footer .title, .footer .subtitle {
  color: #363636 !important;
}

.footer p, .footer a {
  color: #4a4a4a !important;
}

.footer a:hover {
  color: #3273dc !important;
}

/* 响应式优化 */
@media screen and (max-width: 768px) {
  .hero.is-large .hero-body {
    padding: 3rem 1.5rem;
  }
  
  .title.is-1 {
    font-size: 2.5rem;
  }
  
  .subtitle.is-3 {
    font-size: 1.5rem;
  }
}

/* 加载动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* 自定义工具类 */
.shadow-soft {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.border-radius-lg {
  border-radius: 12px;
}

.text-gradient {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Enhanced responsive grid layout for 1-5 columns */
/* Small mobile phones (iPhone 4s, 5, etc.): 1 column */
@media screen and (max-width: 374px) {
  .column.is-half-mobile {
    flex: none;
    width: 100%;
  }
}

/* Modern mobile phones (iPhone 6+, most Android): 2 columns */
@media screen and (min-width: 375px) and (max-width: 768px) {
  .column.is-half-mobile {
    flex: none;
    width: 50%;
  }
}

/* Tablet: 2-3 columns */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .column.is-one-third-tablet {
    flex: none;
    width: 33.3333%;
  }
}

/* Desktop: 4 columns */
@media screen and (min-width: 1024px) and (max-width: 1215px) {
  .column.is-one-quarter-desktop {
    flex: none;
    width: 25%;
  }
}

/* Widescreen and beyond: 5 columns */
@media screen and (min-width: 1216px) {
  .column.is-one-fifth-widescreen {
    flex: none;
    width: 20%;
  }
}

/* Ultra-wide screens: ensure 5 columns maximum */
@media screen and (min-width: 1920px) {
  .column.is-one-fifth-widescreen {
    flex: none;
    width: 20%;
  }
}

/* RovoDev: Simple Carousel (no external framework) */
.rv-carousel { position: relative; overflow: hidden; height: 56vh; min-height: 320px; background-color: #1A2B2B; }
.rv-carousel-track { display: flex; height: 100%; transition: transform .6s ease; }
.rv-carousel-slide { min-width: 100%; height: 100%; position: relative; }
.rv-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-carousel-caption { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); text-align: center; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.rv-carousel-control { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 9999px; border: none; background: rgba(0,0,0,.35); color: #fff; font-size: 22px; line-height: 44px; cursor: pointer; z-index: 2; }
.rv-carousel-control:hover { background: rgba(0,0,0,.5); }
.rv-carousel-control.prev { left: 12px; }
.rv-carousel-control.next { right: 12px; }
.rv-carousel-indicators { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.rv-carousel-indicators button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.4); cursor: pointer; }
.rv-carousel-indicators button.is-active { background: #fff; }
@media (max-width: 768px) { .rv-carousel { height: 42vh; min-height: 240px; } .rv-carousel-caption { bottom: 8%; } }