/* v5.5.48 · DIY Model prototype */
@media(min-width:761px){
  #diyPanel{
    padding-top:0!important;
    min-height:0!important;
  }
  #diyPanel .diy-page{
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  #diyPanel .diy-workspace-toolbar.workspace-toolbar{
    position:relative!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:46px!important;
    min-height:46px!important;
    margin:0 0 9px!important;
    padding:6px 9px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    border-color:rgba(218,228,238,.145)!important;
    background:
      linear-gradient(180deg,rgba(229,236,243,.092) 0%,rgba(198,209,219,.064) 42%,rgba(157,171,184,.044) 100%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.090),
      inset 0 -1px 0 rgba(58,72,85,.18),
      0 4px 14px rgba(0,0,0,.12)!important;
  }
  #diyPanel .diy-workspace-toolbar.workspace-toolbar::before{
    content:"";
    position:absolute;
    left:0;top:9px;bottom:9px;width:2px;
    border-radius:0 2px 2px 0;
    background:linear-gradient(180deg,rgba(235,242,248,.16),rgba(235,242,248,.72),rgba(235,242,248,.16));
    box-shadow:0 0 7px rgba(221,231,240,.10);
    pointer-events:none;
  }
  #diyPanel .diy-toolbar-tools{
    display:flex;align-items:center;gap:6px;flex:0 0 auto;
  }
  #diyPanel .diy-toolbar-stats{
    display:flex;align-items:center;gap:7px;min-width:0;
  }
  #diyPanel .diy-toolbar-metric{
    display:flex;align-items:center;gap:5px;white-space:nowrap;
  }
  #diyPanel .diy-toolbar-metric>span{
    font-size:11.5px;color:#75818f;font-weight:650;
  }
  #diyPanel .diy-toolbar-metric>strong{
    font-size:14px;color:#e3e8ef;font-weight:800;font-variant-numeric:tabular-nums;
  }
  #diyPanel .diy-toolbar-divider{
    width:1px;height:18px;background:rgba(225,233,241,.10);flex:0 0 1px;
  }
  #diyPanel .diy-toolbar-help{
    min-width:0;
    color:#74808b;
    font-size:10.5px;
    font-weight:620;
    line-height:1.2;
    white-space:nowrap;
  }

  #diyPanel .diy-workspace{
    min-height:0;
    height:calc(var(--advanced-viewport-height, 620px) - 55px);
    display:grid;
    grid-template-columns:minmax(0,1.72fr) minmax(340px,.88fr);
    gap:10px;
  }

  #diyPanel .diy-attribute-panel,
  #diyPanel .diy-badge-panel{
    min-height:0;
    border:1px solid rgba(255,255,255,.065);
    border-radius:15px;
    background:linear-gradient(180deg,rgba(12,18,24,.82),rgba(8,13,18,.90));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
    overflow:hidden;
  }
  #diyPanel .diy-attribute-panel{
    display:flex;flex-direction:column;
  }
  #diyPanel .diy-badge-panel{
    display:flex;flex-direction:column;
  }
  #diyPanel .diy-section-head{
    min-height:48px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid rgba(255,255,255,.055);
    background:rgba(255,255,255,.012);
  }
  #diyPanel .diy-section-head>div{
    min-width:0;display:flex;align-items:baseline;gap:8px;
  }
  #diyPanel .diy-section-head strong{
    color:#e0e6ec;font-size:13.5px;font-weight:760;
  }
  #diyPanel .diy-section-head span,
  #diyPanel .diy-section-head small{
    color:#697681;font-size:9px;font-weight:620;
  }

  #diyPanel .diy-attribute-grid{
    min-height:0;
    flex:1 1 auto;
    overflow:auto;
    padding:10px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-content:start;
    gap:9px;
  }
  #diyPanel .diy-attr-group{
    min-width:0;
    border:1px solid rgba(255,255,255,.052);
    border-radius:12px;
    background:rgba(255,255,255,.013);
    overflow:hidden;
  }
  #diyPanel .diy-attr-group-head{
    height:31px;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 9px;
    border-bottom:1px solid rgba(255,255,255,.045);
  }
  #diyPanel .diy-attr-group-head strong{
    color:#919da8;font-size:11.5px;font-weight:750;
  }
  #diyPanel .diy-attr-group-head span{
    color:#596570;font-size:9px;font-weight:700;
  }
  #diyPanel .diy-attr-row{
    position:relative;
    min-height:31px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 58px 18px;
    align-items:center;
    gap:5px;
    padding:3px 7px 3px 9px;
    border-bottom:1px solid rgba(255,255,255,.033);
    transition:background .16s ease,border-color .16s ease;
  }
  #diyPanel .diy-attr-row:last-child{border-bottom:0}
  #diyPanel .diy-attr-row.is-active{
    background:linear-gradient(90deg,rgba(215,181,90,.038),rgba(255,255,255,.010));
  }
  #diyPanel .diy-attr-row.is-badge-driven{
    box-shadow:inset 2px 0 0 rgba(205,216,227,.34);
  }
  #diyPanel .diy-attr-copy{
    min-width:0;display:flex;align-items:center;gap:5px;
  }
  #diyPanel .diy-attr-copy strong{
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:#aeb8c2;font-size:11.5px;font-weight:620;
  }
  #diyPanel .diy-attr-source{
    flex:0 0 auto;
    padding:2px 4px;
    border-radius:5px;
    color:#aab5c0;
    background:rgba(205,216,227,.065);
    border:1px solid rgba(205,216,227,.09);
    font-size:8px;font-weight:760;line-height:1;
  }
  #diyPanel .diy-attr-input{
    width:58px;height:25px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.07);
    border-radius:7px;
    background:#0a1118;
    color:#e6ebef;
    padding:0 6px;
    outline:none;
    text-align:center;
    font:780 11.5px/1 inherit;
    font-variant-numeric:tabular-nums;
  }
  #diyPanel .diy-attr-input::placeholder{color:#4d5964}
  #diyPanel .diy-attr-input:focus{
    border-color:rgba(216,184,95,.34);
    box-shadow:0 0 0 1px rgba(216,184,95,.08);
  }
  #diyPanel .diy-attr-clear{
    width:18px;height:18px;border:0;border-radius:5px;
    background:transparent;color:#66727d;
    display:grid;place-items:center;
    font:600 13px/1 inherit;
    cursor:pointer;
    opacity:0;
    transition:.15s ease;
  }
  #diyPanel .diy-attr-row.is-active .diy-attr-clear{opacity:1}
  #diyPanel .diy-attr-clear:hover{background:rgba(255,255,255,.045);color:#c7d0d7}

  #diyPanel .diy-badge-groups{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding:9px 10px 10px;
  }
  #diyPanel .diy-badge-group + .diy-badge-group{margin-top:10px}
  #diyPanel .diy-badge-group-head{
    display:flex;align-items:center;justify-content:space-between;
    min-height:22px;margin-bottom:5px;
  }
  #diyPanel .diy-badge-group-head strong{
    color:#7e8a96;font-size:9px;font-weight:800;letter-spacing:.03em;
  }
  #diyPanel .diy-badge-group-head span{
    color:#53606b;font-size:8px;font-weight:700;
  }
  #diyPanel .diy-badge-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
  }
  #diyPanel .diy-badge-btn{
    position:relative;
    min-width:0;
    height:65px;
    border:1px solid rgba(255,255,255,.052);
    border-radius:10px;
    background:rgba(255,255,255,.012);
    color:#8b97a2;
    padding:5px 3px 4px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    cursor:pointer;
    transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
  }
  #diyPanel .diy-badge-btn:hover{
    border-color:rgba(205,216,227,.14);
    background:rgba(205,216,227,.025);
  }
  #diyPanel .diy-badge-btn.selected{
    border-color:rgba(222,229,236,.30);
    background:linear-gradient(180deg,rgba(220,228,235,.075),rgba(220,228,235,.025));
    box-shadow:0 0 0 1px rgba(220,228,235,.055),0 0 16px rgba(220,228,235,.035);
  }
  #diyPanel .diy-silver-badge{
    position:relative;
    width:35px;height:35px;
    display:grid;place-items:center;
    flex:0 0 35px;
  }
  #diyPanel .diy-silver-badge::before{
    content:"";
    position:absolute;
    width:31px;height:31px;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    background:var(--fc27-ps-silver) center/100% 100% no-repeat;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.25));
  }
  #diyPanel .diy-silver-badge img{
    position:relative;z-index:1;
    width:24px;height:24px;
    object-fit:contain;
    opacity:.80;
    filter:none;
  }
  #diyPanel .diy-badge-btn.selected .diy-silver-badge img{opacity:1}
  #diyPanel .diy-badge-btn.selected .diy-silver-badge::before{
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.24)) drop-shadow(0 0 7px rgba(220,228,235,.14));
  }
  #diyPanel .diy-badge-fallback{
    position:relative;z-index:1;
    color:#1b2025;font-size:7px;font-weight:900;
  }
  #diyPanel .diy-badge-name{
    width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:9px;font-weight:680;color:#87939e;text-align:center;
  }
  #diyPanel .diy-badge-btn.selected .diy-badge-name{color:#d2d9df}

  #diyPanel .diy-calc-dock{
    flex:0 0 auto;
    padding:9px 10px 10px;
    border-top:1px solid rgba(255,255,255,.055);
    display:grid;
    grid-template-columns:minmax(0,1fr) 126px;
    gap:9px;
    align-items:center;
    background:rgba(7,12,17,.82);
  }
  #diyPanel .diy-requirement-summary{
    min-width:0;
    color:#697681;
    font-size:9px;
    line-height:1.45;
  }
  #diyPanel .diy-calculate-btn{
    height:42px;
    border:1px solid rgba(216,184,95,.30);
    border-radius:11px;
    background:linear-gradient(180deg,rgba(216,184,95,.13),rgba(216,184,95,.045));
    color:#e6d28b;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    cursor:pointer;
    transition:.18s ease;
  }
  #diyPanel .diy-calculate-btn span{font-size:11.5px;font-weight:820;line-height:1}
  #diyPanel .diy-calculate-btn small{margin-top:4px;font-size:8px;color:#9a8950;font-weight:650}
  #diyPanel .diy-calculate-btn:not(:disabled):hover{
    border-color:rgba(216,184,95,.48);
    background:linear-gradient(180deg,rgba(216,184,95,.18),rgba(216,184,95,.065));
    box-shadow:0 0 18px rgba(216,184,95,.065);
  }
  #diyPanel .diy-calculate-btn:disabled{
    opacity:.35;cursor:not-allowed;filter:saturate(.45);
  }
}

@media(max-width:1180px) and (min-width:761px){
  #diyPanel .diy-workspace{
    grid-template-columns:minmax(0,1.45fr) minmax(300px,.9fr);
  }
  #diyPanel .diy-attribute-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #diyPanel .diy-badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #diyPanel .diy-toolbar-help{display:none}
  #diyPanel .diy-toolbar-help-divider{display:none}
}

@media(max-width:760px){
  #diyPanel .diy-workspace-toolbar{
    min-height:46px!important;height:auto!important;padding:7px!important;
    display:flex!important;flex-wrap:wrap!important;gap:7px!important;
  }
  #diyPanel .diy-toolbar-tools,
  #diyPanel .diy-toolbar-stats{display:flex;align-items:center;gap:6px}
  #diyPanel .diy-toolbar-help{display:none}
  #diyPanel .diy-workspace{display:block}
  #diyPanel .diy-attribute-panel,
  #diyPanel .diy-badge-panel{margin-bottom:10px}
  #diyPanel .diy-attribute-grid{grid-template-columns:1fr 1fr}
  #diyPanel .diy-badge-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Result window */
.diy-result-modal[hidden]{display:none!important}
.diy-result-modal{
  position:fixed;inset:0;z-index:2147483200;
  display:grid;place-items:center;
}
.diy-result-backdrop{
  position:absolute;inset:0;background:rgba(3,7,11,.72);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.diy-result-dialog{
  position:relative;z-index:1;
  width:min(930px,92vw);
  height:min(690px,86vh);
  min-height:0;
  display:flex;flex-direction:column;
  border:1px solid rgba(218,228,238,.15);
  border-radius:18px;
  background:linear-gradient(160deg,rgba(24,34,44,.985),rgba(10,16,22,.995));
  box-shadow:0 30px 80px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.045);
  overflow:hidden;
}
.diy-result-head{
  min-height:62px;padding:12px 15px 10px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.065);
}
.diy-result-head span{
  display:block;color:#687683;font-size:8px;font-weight:850;letter-spacing:.12em;
}
.diy-result-head h3{
  margin:4px 0 0;color:#edf2f5;font-size:17px;font-weight:800;
}
.diy-result-close{
  width:34px;height:34px;border:0;border-radius:10px;
  background:transparent;color:#88949f;font-size:22px;cursor:pointer;
}
.diy-result-close:hover{background:rgba(255,255,255,.04);color:#e5ebef}
.diy-result-meta{
  min-height:36px;padding:0 15px;
  display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.052);
  color:#788591;font-size:10.5px;font-weight:620;
}
.diy-result-body{
  min-height:0;flex:1 1 auto;
  display:grid;grid-template-columns:320px minmax(0,1fr);
}
.diy-result-list{
  min-height:0;overflow:auto;padding:8px;
  border-right:1px solid rgba(255,255,255,.055);
}
.diy-result-row{
  width:100%;min-height:48px;
  margin:0 0 5px;padding:7px 9px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:10px;
  background:rgba(255,255,255,.012);
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;
  gap:7px;align-items:center;
  color:inherit;text-align:left;cursor:pointer;
}
.diy-result-row:hover{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.08)}
.diy-result-row.active{
  border-color:rgba(216,184,95,.23);
  background:linear-gradient(90deg,rgba(216,184,95,.065),rgba(255,255,255,.012));
}
.diy-result-rank{
  color:#596671;font-size:10px;font-weight:850;font-variant-numeric:tabular-nums;
}
.diy-result-copy{min-width:0}
.diy-result-copy strong{
  display:block;color:#dce3e8;font-size:11.5px;font-weight:760;
}
.diy-result-copy span{
  display:block;margin-top:3px;color:#64717c;font-size:8.5px;font-weight:620;
}
.diy-result-cost{
  color:#dfca7d;font-size:14px;font-weight:850;font-variant-numeric:tabular-nums;
}
.diy-result-row.impossible .diy-result-cost{color:#9a6c66;font-size:9px}
.diy-result-detail{min-height:0;overflow:auto;padding:15px 16px}
.diy-result-detail-empty{
  min-height:100%;display:grid;place-items:center;color:#66727d;font-size:11px;
}
.diy-detail-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.055);
}
.diy-detail-head small{display:block;color:#65727d;font-size:8.5px;font-weight:700}
.diy-detail-head strong{display:block;margin-top:3px;color:#edf1f4;font-size:17px;font-weight:820}
.diy-detail-total{text-align:right}
.diy-detail-total span{display:block;color:#697580;font-size:8.5px}
.diy-detail-total b{display:block;margin-top:3px;color:#e2cb78;font-size:22px;font-weight:850}
.diy-detail-grid{margin-top:10px;display:grid;grid-template-columns:1fr;gap:5px}
.diy-detail-row{
  min-height:34px;padding:6px 8px;
  display:grid;grid-template-columns:minmax(0,1fr) 86px 65px;
  gap:8px;align-items:center;
  border:1px solid rgba(255,255,255,.038);border-radius:8px;
  background:rgba(255,255,255,.010);
}
.diy-detail-row>span{color:#9ba6b0;font-size:10.5px;font-weight:620}
.diy-detail-row>em{
  color:#74808b;font-size:9px;font-style:normal;text-align:right;font-variant-numeric:tabular-nums;
}
.diy-detail-row>b{
  color:#cbb875;font-size:10.5px;text-align:right;font-variant-numeric:tabular-nums;
}
.diy-detail-impossible{
  margin-top:12px;padding:10px 11px;border:1px solid rgba(185,101,88,.16);
  border-radius:10px;background:rgba(157,77,66,.055);
  color:#b98279;font-size:10.5px;line-height:1.55;
}
@media(max-width:700px){
  .diy-result-dialog{width:96vw;height:91vh}
  .diy-result-body{grid-template-columns:1fr}
  .diy-result-list{max-height:40vh;border-right:0;border-bottom:1px solid rgba(255,255,255,.055)}
}