*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:#0f172a;
  color:#ffffff;
  min-height:100vh;
  overflow-x:hidden;
  transition:all 0.3s ease;
}

/* 顶部栏 */

.topbar{
  width:100%;
  padding:20px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.08);
  gap:20px;
  flex-wrap:wrap;
}

.logo{
  font-size:26px;
  font-weight:700;
}

/* 风格切换 */

.theme-switch{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.theme-btn{
  border:none;
  padding:10px 16px;
  border-radius:12px;
  cursor:pointer;
  background:#1e293b;
  color:#ffffff;
  transition:0.25s;
  font-size:14px;
}

.theme-btn:hover{
  transform:translateY(-2px);
  opacity:0.9;
}

/* 主布局 */

.container{
  width:100%;
  max-width:1600px;
  margin:auto;
  padding:20px;
  display:flex;
  gap:20px;
  min-height:calc(100vh - 100px);
}

/* 面板 */

.panel{
  flex:1;
  min-width:0;
  overflow:hidden;

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  border-radius:24px;

  padding:24px;

  backdrop-filter:blur(20px);
}

.panel h2{
  margin-bottom:20px;
  font-size:22px;
  font-weight:700;
}

/* 输入框 */

textarea{
  width:100%;
  height:500px;

  border:none;

  outline:none;

  resize:none;

  border-radius:18px;

  padding:20px;

  font-size:15px;

  line-height:1.8;

  background:#111827;

  color:#ffffff;

  overflow-y:auto;
}

textarea::placeholder{
  color:#94a3b8;
}

/* 输出框 */

.output{
  width:100%;

  height:500px;

  overflow-y:auto;

  overflow-x:hidden;

  border-radius:18px;

  padding:20px;

  background:#111827;

  line-height:1.9;

  white-space:pre-wrap;

  word-break:break-word;

  font-size:15px;
}

/* 按钮区域 */

.actions{
  margin-top:20px;
  display:flex;
  gap:15px;
}

/* 主按钮 */

.action-btn{
  flex:1;

  border:none;

  padding:16px;

  border-radius:16px;

  font-size:16px;

  font-weight:600;

  cursor:pointer;

  transition:0.3s;

  color:#ffffff;

  background:linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
  );
}

.action-btn:hover{
  transform:translateY(-2px);
  opacity:0.92;
}

/* 加载动画 */

.loading{
  animation:pulse 1.2s infinite;
}

@keyframes pulse{

  0%{
    opacity:0.4;
  }

  50%{
    opacity:1;
  }

  100%{
    opacity:0.4;
  }

}

/* 极简风 */

body.theme-minimal{
  background:#f5f5f5;
  color:#111111;
}

body.theme-minimal .panel{
  background:#ffffff;

  border:none;

  box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

body.theme-minimal textarea,
body.theme-minimal .output{
  background:#f3f4f6;
  color:#111111;
}

body.theme-minimal .theme-btn{
  background:#e5e7eb;
  color:#111111;
}

/* 苹果风 */

body.theme-apple{
  background:linear-gradient(
    135deg,
    #dfe9f3,
    #ffffff
  );

  color:#111111;
}

body.theme-apple .panel{
  background:rgba(255,255,255,0.6);

  border:none;

  backdrop-filter:blur(30px);

  box-shadow:0 10px 40px rgba(0,0,0,0.08);
}

body.theme-apple textarea,
body.theme-apple .output{
  background:rgba(255,255,255,0.7);

  color:#111111;
}

body.theme-apple .theme-btn{
  background:rgba(255,255,255,0.7);
  color:#111111;
}

/* 移动端适配 */

@media(max-width:900px){

  .container{
    flex-direction:column;
    padding:15px;
  }

  textarea,
  .output{
    height:360px;
  }

  .topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .actions{
    flex-direction:column;
  }

}