.subsetting-page{
   padding-bottom: 2rem;
}

.subsetting-page,
.subsetting-page section,
section.subsetting-page{
   max-width: 1400px;
}

.subsetting-app{
   display: grid;
   gap: 2rem;
}

.subsetting-intro,
.subsetting-toolbar,
.subnet-card,
.summary-card{
   background: var(--white);
   border: var(--border);
   border-radius: var(--radius);
   box-shadow: var(--box-shadow);
}

.subsetting-intro{
   padding: 2.4rem;
}

.subsetting-intro .heading{
   text-align: left;
   margin-bottom: 1rem;
}

.subsetting-toolbar{
   display: flex;
   flex-wrap: wrap;
   gap: 1.2rem;
   align-items: end;
   padding: 2rem;
}

.toolbar-field{
   display: grid;
   gap: .8rem;
   flex: 1 1 22rem;
}

.toolbar-small{
   flex: 0 1 14rem;
}

.toolbar-field span{
   font-size: 1.4rem;
   color: var(--light-color);
   text-transform: uppercase;
   letter-spacing: .08em;
}

.toolbar-field input{
   background: var(--light-bg);
   border: var(--border);
   border-radius: .9rem;
   color: var(--black);
   font-size: 1.8rem;
   padding: 1.2rem 1.4rem;
}

.toolbar-field select{
   background: var(--light-bg);
   border: var(--border);
   border-radius: .9rem;
   color: var(--black);
   font-size: 1.7rem;
   padding: 1.2rem 1.4rem;
}

.toolbar-field.is-hidden{
   display: none;
}

.toolbar-actions{
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

.toolbar-actions .inline-btn,
.toolbar-actions .inline-option-btn{
   margin-top: 0;
}

.subsetting-summary{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   gap: 1.2rem;
}

.summary-card{
   padding: 1.6rem;
}

.summary-label{
   font-size: 1.3rem;
   color: var(--light-color);
   text-transform: uppercase;
   letter-spacing: .08em;
   margin-bottom: .6rem;
}

.summary-value{
   font-size: 2.4rem;
   font-weight: 600;
   color: var(--black);
}

.subsetting-grid{
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 1.5rem;
}

.subnet-card{
   padding: 2rem;
}

.subnet-card-wide{
   width: 100%;
}

.subsetting-detail-grid{
   display: grid;
   grid-template-columns: 1fr;
   gap: 1.5rem;
}

.subnet-card h2{
   font-size: 2.4rem;
   margin-bottom: 1.2rem;
}

.task-card{
   display: grid;
   gap: 1rem;
}

.task-eyebrow{
   font-size: 1.3rem;
   color: var(--light-color);
   text-transform: uppercase;
   letter-spacing: .08em;
}

.task-text{
   font-size: 1.9rem;
   line-height: 1.55;
   color: var(--black);
}

.task-answer-grid{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   gap: 1rem;
}

.task-answer{
   border: var(--border);
   background: #f8faff;
   border-radius: 1rem;
   padding: 1.2rem 1.4rem;
}

.task-answer-label{
   display: block;
   font-size: 1.3rem;
   color: var(--light-color);
   text-transform: uppercase;
   letter-spacing: .06em;
   margin-bottom: .5rem;
}

.task-answer-value{
   font-size: 2rem;
   font-weight: 600;
   color: var(--black);
}

.result-line{
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   flex-wrap: wrap;
   margin-bottom: 1rem;
   font-size: 1.6rem;
}

.result-line span{
   color: var(--light-color);
}

.result-line strong{
   color: var(--black);
}

.bit-table{
   display: grid;
   gap: 1rem;
   margin-top: 1.5rem;
}

.bit-row{
   display: grid;
   grid-template-columns: 12rem repeat(4, minmax(17rem, 1fr));
   gap: .8rem;
   align-items: start;
}

.bit-label{
   font-size: 1.4rem;
   color: var(--light-color);
   font-weight: 600;
   padding-top: .6rem;
}

.octet-group{
   display: grid;
   grid-template-columns: repeat(8, minmax(2.6rem, 1fr));
   gap: .35rem;
   padding: .6rem;
   border-radius: 1rem;
   background: #f6f8fc;
   border: 1px solid rgba(15, 23, 42, .08);
}

.bit-cell{
   min-height: 2.8rem;
   display: grid;
   place-items: center;
   border-radius: .6rem;
   background: var(--light-bg);
   border: var(--border);
   font-size: 1.2rem;
   color: var(--black);
}

.bit-cell.weight{
   background: #eef3ff;
   color: var(--main-color);
   font-weight: 600;
}

.bit-cell.active{
   background: rgba(26,79,216,.12);
   border-color: rgba(26,79,216,.3);
}

.bit-cell.empty{
   color: transparent;
}

.hint-list{
   display: grid;
   gap: .9rem;
   padding-left: 1.8rem;
   font-size: 1.6rem;
   line-height: 1.5;
}

@media (max-width: 900px){
   .bit-row{
      grid-template-columns: 1fr;
   }

   .octet-group{
      grid-template-columns: repeat(8, minmax(2.4rem, 1fr));
   }
}

@media (max-width: 768px){
   .toolbar-actions{
      width: 100%;
   }

   .toolbar-actions .inline-btn,
   .toolbar-actions .inline-option-btn{
      flex: 1 1 100%;
   }

   .bit-row{
      gap: .5rem;
   }

   .octet-group{
      grid-template-columns: repeat(4, minmax(2.2rem, 1fr));
   }

   .bit-cell{
      min-height: 2.4rem;
      font-size: 1rem;
   }
}