* { box-sizing: border-box;  margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}

body { background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); min-height: 100vh; padding: 20px; display: flex; 
    justify-content: center; align-items: center;}

.container { width: 100%; max-width: 1200px; background: rgba(255, 255, 255, 0.95); border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); overflow: hidden;}
header { background: linear-gradient(90deg, #2c3e50, #4a6491); color: white; padding: 25px; text-align: center;}
h1 { font-size: 2.8rem; margin-top: 10px; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}
h1 br{display: none;}
/* .subtitle { font-size: 1.2rem; opacity: 0.9; max-width: 700px; margin: 0 auto;} */
h2 { font-size: 2.0rem; text-align: center; margin-top: 30px; margin-bottom: 30px; text-shadow: 2px 2px 4px rgba(63, 62, 62, 0.3);}

.instructions { background: #e3f2fd; border-radius: 10px; padding: 15px; margin-top: 15px; font-size: 0.95rem;}
.instructions h3 { color: #0d47a1; margin-bottom: 10px;}
.instructions ul { padding-left: 20px;}
.instructions li { margin-bottom: 8px;}

.control-panel { background: white; padding: 25px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
    border-bottom: 1px solid #eee; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.00); width: 100%;}
.control-panel-half { background: white; padding: 15px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
    border-bottom: 1px solid #eee; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.00);  width: 48%;}
.control-panel-gray { background: white; padding: 5px; display: flex; flex-wrap: wrap; justify-content: left;
    gap: 20px; border-bottom: 1px solid #eee; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.00); width: 100%; text-align: left;
    background-color: rgb(239, 233, 233); justify-content: flex-start;}

.formular { text-align: center; font-size: 1.2rem; color: #0d0d0d; margin-bottom: 15px; font-weight: 600;}

.big-formula { text-align: left; font-size: 1.6rem; color: #232121; margin-top: 35px; margin-right: 35px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold;}
.big-formula-inline { text-align: left; font-size: 1.6rem; color: #232121; display: inline;  margin-top: 8px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold;}   
 .big-formula-inline span{display: none;} 
.middle-formula { text-align: left; font-size: 1.2rem; color: #232121; 
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold;}
.middle-formula br{display: none;}
.middle-formula-center {text-align: left; font-size: 1.2rem; color: #232121; margin-top: 8px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  font-weight: bold;
    /* 上下方向居中 */   justify-content: center; align-items: center;}
.middle-formula-center br{display: none;}

 .control-panel-compu{ display: flex;  flex-wrap: nowrap; }
 .formula-block{ display: flex; }
.compu-prob-formula { display: flex; text-align: left; font-size: 1.6rem; color: #2b2a2a; margin-top: 4px;}

.input-group { display: flex; flex-direction: column; min-width: 200px;}
label { font-weight: 600; margin-bottom: 8px; color: #2c3e50; font-size: 1.1rem;}
.arraylabel{width: 100%; font-size: 1.2rem;}
input {padding: 12px 15px; border: 2px solid #ddd; border-radius: 8px; font-size: 1.1rem; transition: all 0.3s; width: 180px;}

input:focus { border-color: #4a6491; outline: none; box-shadow: 0 0 0 3px rgba(74, 100, 145, 0.2);}
.short-input-group { display: flex; flex-direction: column; min-width: 100px;}
.long-input-group { display: flex; flex-direction: column;  min-width: 1000px;}
.row-input-group { display: flex; flex-direction: row;}
.short-input {display: flex; justify-content: center; align-items: center;/* 左右居中 */ text-align-last: center; 
    font-size: x-large; font-family: 'Times New Roman', Times, serif; max-width: 200px; width: 100px;}
.input-section {margin-bottom: 25px;}


.input-box {width: 100%; padding: 15px; border: 2px solid #ddd; border-radius: 8px; font-size: 1rem;
    transition: border-color 0.3s; /* 左对齐 */ text-align: left;}
.input-box:focus { border-color: #3498db; outline: none; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);}
.input-hint { margin-top: 8px; font-size: 0.9rem; color: #7f8c8d;}

.charts-container { display: flex;  flex-wrap: wrap; padding: 20px; gap: 25px;}

/* .charts-container-wide { display: flex; flex-wrap: wrap; padding: 2px; gap: 25px; width: 100%;} */
.chart-box { flex: 1; min-width: 500px; background: white; border-radius: 15px; padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; width: 1160px;}
.chart-box p br{display: none;}

/* .chart-box-wide-gray { flex: 1; min-width: 300px; background: white; border-radius: 15px; padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; background-color: rgb(239, 233, 233);  width: 100%;} */
.chart-title { text-align: center;  font-size: 1.4rem;  color: #2c3e50; margin-bottom: 15px; font-weight: 600;}
.chart-title br{display: none;}
.small-chart-title { text-align: center; font-size: 1.2rem; color: #2c3e50; margin-top: 15px;  margin-bottom: 15px; font-weight: 600;}
.small-chart-title br{display: none;}
.chart-title-inline { text-align: center; font-size: 1.4rem; color: #2c3e50; margin-bottom: 15px; font-weight: 600; display: inline;}
.chart-wrapper { position: relative; height: 350px; width: 100%;}


select {padding: 9px 15px; border: 2px solid #ddd; border-radius: 8px; font-size: 1.1rem; transition: all 0.3s;}
select:focus {border-color: #4a6491; outline: none; box-shadow: 0 0 0 3px rgba(74, 100, 145, 0.2);}

.tabs { display: flex;  background: #f0f4ff; border-bottom: 1px solid #ddd;}
.tab { padding: 15px 25px; cursor: pointer; font-weight: 600; transition: background 0.3s; text-align: center; flex: 1;}
.tab.active { background: #415b79; color: white;}
.tab:hover:not(.active) { background: #d9e1ff;}
.tab-content {  display: none;}
.tab-content.active {display: flex; flex-wrap: wrap;}


.buttons {display: flex; gap: 15px; align-self: flex-end;}
button { padding: 12px 25px; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; 
    transition: all 0.3s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}

.btnL { background: linear-gradient(135deg, #27ae60, #2ecc71); color: white;}
.btnR { background: linear-gradient(135deg, #c0392b, #e74c3c); color: white;} 

button:hover { transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);}
button:active { transform: translateY(1px);}

#counter {display: inline; color: #f5061a; font-size: 1.4rem;}
.freedom { display: inline; color: #f5061a; font-size: 1.8rem;  font-family: 'Times New Roman', Times, serif;}


#result-container {  display: flex; /* flex-basis: 10%; */  width: 100px; height: 50px; font-family: 'Times New Roman', Times, serif;
    font-size: x-large; color: #0d47a1; text-align: left; /* 垂直居中 */ align-items: center;  /* max-width: 200px; */
    background: rgba(235, 233, 233, 0.95); border-radius: 8px; margin-left: 20px;}
.result-container { display: flex;  width: 100px;  height: 50px; font-family: 'Times New Roman', Times, serif;  
    font-size: large; color: #d73442; text-align: left; /* 垂直居中 */ align-items: center; /* max-width: 200px; */
    background: rgba(235, 233, 233, 0.95); border-radius: 8px; margin-left: 10px;  padding-left: 5px;}
.short { max-width: 60px; min-width: 50px; }
.long {max-width: 500px; min-width: 200px;}
.long1 { max-width: 500px; min-width: 250px;}
.long2 { max-width: 500px; min-width: 300px;}

.result-container-long2 { display: flex; flex-basis: 10%; height: 50px; /* font-family: 'Times New Roman', Times, serif; */
    font-size: large; color: #d73442; text-align: left; /* 垂直居中 */ align-items: center; max-width: 500px; min-width: 300px;
     background: rgba(235, 233, 233, 0.95); border-radius: 8px;}


.result-container-nobox { /* flex-basis: 10%; */ display: flex; gap: 0px; margin-left: 5px;  margin-right: 5px; width: 35px; height: 18px;
    font-family: 'Times New Roman', Times, serif;  font-size: large; text-align: left; /* 垂直居中 */ align-items: center;
     display: inline-block; justify-content: baseline;}

.footer { text-align: center; padding: 25px; color: #7f8c8d; font-size: 1rem; background: #f8f9fa; border-top: 1px solid #eee;}
.footer br{display: none;}


.charts-container.birthday{display: block;}
.charts-container.birthday-c{display: none;}


/* 手机平板端适配 */
@media (max-width: 768px) {

    body { padding: 0;}
    .container {  border-radius: 0; }

    header { padding: 15px;}
    h1 { font-size: 2.0rem; margin-top: 5px; margin-bottom: 5px; }
    h2 { font-size: 1.5rem;  margin-top: 20px; margin-bottom: 20px; }
    h1 br{display: block;}

    .instructions { border-radius: 0; padding: 15px; font-size: 0.9rem;}
    .instructions ul { padding-left: 15px;}
    .instructions li { margin-bottom: 5px;}
   
    .control-panel { flex-direction: column; align-items: left;}
    .control-panel img { display: flex; justify-content: center; margin-left: 35%;}
    .big-formula { font-size: 1.4rem; margin-left: 10px; margin-top: 10px; }
    .big-formula-inline { font-size: 1.4rem; }
    .big-formula-inline span{display: block;} 
    .middle-formula {line-height: 2rem; }
    .middle-formula br{display: block;}
    .middle-formula-center br{display: block;}
    .input-group {flex-direction: row; min-width: 200px;}
    
    label {width:110px; padding-left: 10px; padding-top: 10px;  margin: 0;  font-size: 1.0rem;}
    input { font-size: 1.2rem;  width: 150px;}
    .short-input-group {  flex-direction: row; min-width: 200px; gap: 10px;}
   
   .buttons { align-self: center; margin-top: 15px;}

   .charts-container { padding: 0; padding-top: 10px; gap: 10px; flex-direction: column;}
   .chart-box {  border-radius: 8px; padding: 0; margin: 0; width: 100%;}
   .chart-box p{margin: 10px;}
   .chart-box p br{display: block;}
   .chart-title { font-size: 1.2rem; margin-top:15px; padding-right: 15%;}
   .chart-title br{display: block;}
   .chart-title-inline { margin-top:15px;}
   .small-chart-title {font-size: 1rem;}
   .small-chart-title br{display: block;}
   .formular { font-size: 0.8rem; margin-bottom: 10px; padding-left: 0; }
   .chart-wrapper { position: relative; height: 350px; width: 85%;}
   
   /* .control-panel.control-panel-compu{flex-direction: column; align-items: left; padding-left: 0; width: 100%;} */
   .formula-block{ align-items: left; padding-left: 0; width: 100%;}
   .compu-prob-formula {  font-size: 1.4rem; margin: 0; margin-top: 8px;}
   
   .short-input { font-size: x-large; max-width: 100px; width: 80px;  margin: 0;}
   #result-container { width: 100px;}
   
   .control-panel.fredom-change{display: none;} /* 自由度变化不显示 */
   #counter { display: block; font-size: 1.2rem; margin-right: 10px; word-wrap: break-word;}
  .tab { padding: 8px 5px;}
  .control-panel-half {  padding: 15px;}
  .long-input-group { display: flex; flex-direction: column;  min-width: 90%;}

  .footer br{display: block;}
  .footer .shuxian{display: none;}


  
 .charts-container.birthday{display:none;}
 .charts-container.birthday-c{display: block;}
  

}