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

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

.page-bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at top left,rgba(59,130,246,.08),transparent 35%),
    radial-gradient(circle at bottom right,rgba(124,58,237,.08),transparent 35%);
  pointer-events:none;
  z-index:-1;
}

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

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
}

.logo{
  font-size:28px;
  font-weight:700;
  letter-spacing:.5px;
}

.subtitle{
  margin-top:4px;
  font-size:13px;
  color:rgba(17,17,17,.55);
}

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

.theme-btn{
  border:none;
  padding:10px 16px;
  border-radius:12px;
  cursor:pointer;
  background:#e5e7eb;
  color:#111111;
  transition:.25s;
  font-size:14px;
}

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

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

.panel{
  flex:1;
  min-width:0;
  overflow:hidden;
  background:#ffffff;
  border:none;
  border-radius:24px;
  padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition:all .3s ease;
}

.panel:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 40px rgba(0,0,0,.09);
}

.panel-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}

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

.panel-title span{
  font-size:12px;
  color:rgba(17,17,17,.45);
}

textarea{
  width:100%;
  height:500px;
  border:none;
  outline:none;
  resize:none;
  border-radius:18px;
  padding:20px;
  font-size:15px;
  line-height:1.8;
  background:#f3f4f6;
  color:#111111;
  overflow-y:auto;
  transition:.3s;
}

textarea::placeholder{
  color:#9ca3af;
}

textarea:focus{
  box-shadow:
    0 0 0 1px rgba(59,130,246,.45),
    0 0 30px rgba(59,130,246,.12);
}

.output{
  width:100%;
  height:500px;
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:18px;
  padding:20px;
  background:#f3f4f6;
  color:#111111;
  line-height:1.9;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:15px;
  transition:.3s;
}

.output:hover{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}

.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:.25s;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  box-shadow:0 10px 25px rgba(59,130,246,.25);
}

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

.action-btn:active{
  transform:translateY(1px);
}

.loading{
  animation:pulse 1.2s infinite;
}

@keyframes pulse{
  0%{opacity:.4;}
  50%{opacity:1;}
  100%{opacity:.4;}
}

/* 科技风 */
body:not(.theme-minimal):not(.theme-apple){
  background:#0f172a;
  color:#ffffff;
}

body:not(.theme-minimal):not(.theme-apple) .topbar{
  border-bottom:1px solid rgba(255,255,255,.08);
}

body:not(.theme-minimal):not(.theme-apple) .subtitle{
  color:rgba(255,255,255,.55);
}

body:not(.theme-minimal):not(.theme-apple) .panel{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  box-shadow:none;
}

body:not(.theme-minimal):not(.theme-apple) .panel-title span{
  color:rgba(255,255,255,.45);
}

body:not(.theme-minimal):not(.theme-apple) textarea,
body:not(.theme-minimal):not(.theme-apple) .output{
  background:#111827;
  color:#ffffff;
}

body:not(.theme-minimal):not(.theme-apple) .theme-btn{
  background:#1e293b;
  color:#ffffff;
}

body:not(.theme-minimal):not(.theme-apple) .output:hover{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* 极简风 */
body.theme-minimal{
  background:#f5f5f5;
  color:#111111;
}

body.theme-minimal .topbar{
  border-bottom:1px solid rgba(0,0,0,.06);
}

body.theme-minimal .subtitle{
  color:rgba(17,17,17,.55);
}

body.theme-minimal .panel{
  background:#ffffff;
  border:none;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

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

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

body.theme-minimal .panel-title span{
  color:rgba(17,17,17,.45);
}

/* 苹果风 */
body.theme-apple{
  background:linear-gradient(135deg,#dfe9f3,#ffffff);
  color:#111111;
}

body.theme-apple .topbar{
  border-bottom:1px solid rgba(0,0,0,.05);
}

body.theme-apple .subtitle{
  color:rgba(17,17,17,.55);
}

body.theme-apple .panel{
  background:rgba(255,255,255,.65);
  border:none;
  backdrop-filter:blur(30px);
  box-shadow:0 10px 40px rgba(0,0,0,.08);
}

body.theme-apple textarea,
body.theme-apple .output{
  background:rgba(255,255,255,.72);
  color:#111111;
}

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

body.theme-apple .panel-title span{
  color:rgba(17,17,17,.45);
}

.icp-footer{
  width:100%;
  text-align:center;
  padding:35px 0 20px;
  font-size:12px;
  color:rgba(17,17,17,.45);
}

.icp-footer a{
  color:inherit;
  text-decoration:none;
}

.icp-footer a:hover{
  color:#2563eb;
}

body:not(.theme-minimal):not(.theme-apple) .icp-footer{
  color:rgba(255,255,255,.35);
}

@media(max-width:900px){
  .topbar{
    padding:18px;
    flex-direction:column;
    align-items:flex-start;
  }

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

  textarea,
  .output{
    height:360px;
  }

  .actions{
    flex-direction:column;
  }

  .logo{
    font-size:24px;
  }

  .panel{
    padding:20px;
  }
}