.wsp-forge-os .wsp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin: 18px 0;
}
.wsp-forge-os .wsp-stat,
.wsp-forge-os .wsp-panel,
.wsp-forge-os .wsp-preview {
background: #fff;
border: 1px solid #dcdcde;
border-radius: 6px;
padding: 14px;
}
.wsp-forge-os .wsp-stat span {
display: block;
color: #646970;
font-size: 12px;
text-transform: uppercase;
}
.wsp-forge-os .wsp-stat strong {
display: block;
font-size: 28px;
line-height: 1.2;
margin-top: 6px;
}
.wsp-forge-os .wsp-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0;
}
.wsp-forge-os .wsp-inline-form {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 2px 6px 2px 0;
vertical-align: middle;
}
.wsp-forge-os .wsp-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 12px;
}
.wsp-forge-os label {
display: block;
font-weight: 600;
}
.wsp-forge-os input[type="text"],
.wsp-forge-os input[type="number"],
.wsp-forge-os input[type="time"],
.wsp-forge-os input[type="password"],
.wsp-forge-os select,
.wsp-forge-os textarea {
margin-top: 4px;
width: 100%;
}
.wsp-forge-os .wsp-two-col {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 18px;
}
.wsp-forge-os pre {
background: #1d2327;
border-radius: 6px;
color: #f0f0f1;
max-height: 420px;
overflow: auto;
padding: 14px;
white-space: pre-wrap;
}
.wsp-arcbox {
align-items: center;
border: 1px solid #dcdcde;
border-radius: 6px;
display: flex;
gap: 16px;
margin: 24px 0;
padding: 16px;
}
.wsp-arcbox__image {
height: auto;
max-width: 150px;
}
.wsp-arcbox__title {
margin: 0 0 8px;
}
.wsp-arcbox__button {
background: #1d2327;
border-radius: 4px;
color: #fff;
display: inline-block;
padding: 10px 14px;
text-decoration: none;
}
@media (max-width: 782px) {
.wsp-forge-os .wsp-two-col {
grid-template-columns: 1fr;
}
.wsp-arcbox {
align-items: flex-start;
flex-direction: column;
}
}