.required {
    color: #ff4b4b;
    margin-left: 2px;
}
.popup-close {
    font-family: 'Be Vietnam Pro', sans-serif !important;
}

.team-box {
    position: relative;
}


.popup-info-btn {
    position: absolute;
    top: 6px;       
    right: 6px;     
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 5;     
}
.hidden {
  display: none !important;
}


.info-circle {
    width: 22px;
    height: 22px;
    border: 2px solid #ff4b4b;
    border-radius: 50%;
    color: #ff4b4b;
    font-weight: 900;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s ease;
}


.popup-info-btn:hover .info-circle {
    background: #ff4b4b;
    color: #fff;
}



.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9990;
}


.popup-box {
  background: #ffffff;
  width: 92%;
  max-width: 430px;
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  animation: fadeUp .25s ease;
  font-family: 'Be Vietnam Pro', sans-serif;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.popup-title {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 16px;
  color: #0b3954;
}


.popup-section {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.popup-section .icon {
  font-size: 32px;
  line-height: 32px;
}

.popup-section h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #06324b;
}

.popup-section p, .popup-section ul {
  margin: 4px 0 0;
  font-size: 14px;
  color: #0f172a;
  line-height: 1.45;
}

.popup-section ul {
  padding-left: 18px;
}


.popup-close {
  margin-top: 14px;
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 900;
  border-radius: 12px;
  border: none;
  background: #1594c8;
  color: #fff;
  cursor: pointer;
}

.popup-close:hover {
  background: #0b6c9b;
}


.guide-btn {
  background: #eef5fb;
  color: #06324b;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #d7e7f2;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}
.guide-btn:hover {
  background: #dceaf5;
}

.btn i{
  width:18px;
  height:18px;
  margin-right:6px;
}

.team-bottom-buttons{
  display:flex;
  gap:15px;
  margin-top:20px;
}

.team-bottom-buttons .btn.small{
  padding:10px 18px;
  font-size:14px;
}

.team-bottom-buttons .danger{
  background:#ff5b5b;
  color:white;
}

    .illu-wrap {
      text-align: center;
      margin-bottom: 14px;
      height: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .illu-wrap img {
      max-width: 300px;
      width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    :root{
      --bg-page:#f3f7fc;
      --pri:#1594c8;
      --pri-dark:#0b6c9b;
      --pill-bg:#f5fbff;
      --pill-border:#cbd5f5;
      --ink:#0f172a;
    }
    *{box-sizing:border-box}
body{
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin:0;
  background:var(--bg-page);
  color:var(--ink);
}

    main{
      max-width:1700px;
      margin:26px auto;
      padding:0 16px 26px;
    }
    .shell{
      background:#fff;
      border-radius:24px;
      box-shadow:0 18px 40px rgba(15,23,42,.12);
      padding:22px 22px 22px;
      display:grid;
      grid-template-columns:1.1fr 1.05fr .9fr;
      gap:18px;
    }
    @media(max-width:960px){
      .shell{grid-template-columns:1fr}
    }
    .card-left{
      border-right:1px solid #e5edf7;
      padding-right:18px;
    }
    .card-middle{
      padding:0 18px;
      border-right:1px solid #e5edf7;
    }
    @media(max-width:960px){
      .card-left,
      .card-middle{
        border-right:none;
        padding-right:0;
        padding-left:0;
      }
    }
    .card-right{}

    label{font-weight:650;font-size:14px;display:block;margin:10px 0 6px}
    input,select{
      width:100%;
      padding:12px 14px;
      border:1px solid #d7e7f2;
      border-radius:12px;
      font-size:15px;
      outline:none;
    }
    input::placeholder{color:#cbd5e1}
    input:focus,select:focus{
      border-color:var(--pri);
      box-shadow:0 0 0 3px rgba(21,148,200,.14);
    }
    .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 20px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight:900; 
  font-size:15px;
}

    .btn-primary{
      background:var(--pri);
      color:#fff;
    }
    .btn-primary:hover{background:var(--pri-dark);}
    .btn-ghost{
      background:#eef5fb;
      color:#06324b;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 12px;
      border-radius:999px;
      background:#ecfeff;
      color:#06324b;
      font-weight:800;
      border:1px solid #c7f2ff;
    }
    .result{
      border:2px dashed #cfe8fb;
      border-radius:16px;
      padding:14px 14px 12px;
      background:#f4fbff;
      margin-top:14px;
    }
    .size-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:44px;
      height:40px;
      border-radius:12px;
      background:#0b1120;
      color:#fff;
      font-weight:900;
      font-size:18px;
      padding:0 10px;
    }
    .hint{font-size:13px;color:#0b3954;margin-top:6px}
    .error{color:#b91c1c;font-weight:800;margin-top:8px}
    table{
      width:100%;
      border-collapse:collapse;
      margin-top:8px;
      font-size:14px;
    }
    th,td{
      text-align:center;
      padding:8px 6px;
      border-bottom:1px solid #eef2f7;
    }
    th{
      background:#f5fbff;
      font-weight:700;
    }
    .subtitle{
      color:#0b3954;
      font-weight:800;
      margin:4px 0 4px;
    }
    .flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .note{
      background:#fff8e1;
      border:1px solid #fde68a;
      color:#8a6d00;
      border-radius:10px;
      padding:8px 10px;
      font-size:13px;
      margin-top:10px;
    }
    tr.pick{background:#e7f5ff !important;}
    tr.heightRow{background:#fef3c7 !important;}
    .hidden{display:none}
    .score{font-size:12px;color:#475569;margin-left:6px}
    .suggestion-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin-top:8px;
    }
    @media(max-width:767px){.suggestion-grid{grid-template-columns:1fr}}
    .sugg-card{
      background:#fff;
      border-radius:10px;
      border:1px solid #dbeafe;
      padding:10px 12px;
    }
    .sugg-title{
      font-size:13px;
      font-weight:800;
      color:#1e293b;
      margin-bottom:4px;
      display:flex;
      align-items:center;
      gap:6px;
    }
    .sugg-title span.label{
      font-size:11px;
      padding:2px 6px;
      border-radius:999px;
      background:#eff6ff;
      color:#1d4ed8;
    }
    .sugg-body{font-size:13px;color:#0f172a}
    .cut-main{font-weight:900;font-size:18px;color:#dc2626;margin-top:6px}
    .cut-sub{font-size:12px;color:#475569;margin-top:2px}
    .cut-cell{font-weight:800;color:#dc2626}

    .mode-tabs{
      display:flex;
      gap:10px;
      margin-bottom:12px;
    }
    .mode-pill{
      flex:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:12px 10px;
      border-radius:999px;
      border:2px solid var(--pill-border);
      background:var(--pill-bg);
      font-size:13px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.03em;
      cursor:pointer;
      color:#0f172a;
    }
    .mode-pill input{display:none;}
    .mode-pill.active{
      background:var(--pri);
      border-color:var(--pri);
      color:#fff;
    }
    .mode-pill span{pointer-events:none;}

    .team-box{
      border-radius:16px;
      border:1px dashed #d4e4f7;
      padding:10px 12px 6px;
      margin-top:14px;
      background:#f7fbff;
    }
    .team-title{font-weight:800;font-size:14px;margin-bottom:4px;color:#0b3954}
    .team-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
    .team-table-wrap{
      max-height:520px; 
      overflow:auto;
      margin-top:6px
    }
    .team-table-wrap table{font-size:13px}

    .btn-del{
      width:26px;
      height:26px;
      border-radius:999px;
      border:1px solid #e2e8f0;
      background:#fff;
      cursor:pointer;
      font-size:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#475569;
    }
    .btn-del:hover{
      background:#fee2e2;
      border-color:#fecaca;
      color:#b91c1c;
    }

.subtitle {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
          }